Datatable <--> Abslayout Drag&Drop

From this example Code Snippet

  1. From “TableToForm” Btn, after click, abslayout will added view from datatable, can we change from this behavior to individual drag and drop?

  2. how to delete ui from abslayout if it is drag to delete area?

  3. On footer bar, I have get form which will get object key-value from the abslayout, this is the result I want from abslayout for saving to database for next time use(for user).

Good day @savirusing ,

  1. You could move your logic from tableToForm() to $drop {…} in the
    webix.DragControl.addDrop(view.$view, {…}).
    Please, have a look at the example: Code Snippet .
    Here, we can get the dropped item from the context (via webix.DragControl.getContext()), define its top and left and add a view via view.addView(item). Note, that while adding the same items from the table there can be the conflict because of the same IDs. So, after the item has been dropped, we could define a new id for it.
    Also, to drag the item with the correct view type (after it has been selected with select editor), you could you editStop() in the datatable onBeforeDrag event.
1 Like

@savirusing ,

  1. I would recommend you to place the delete area in the abslayout. In this case, you could delete an item via view.removeView(item) in the $dragDestroy{…} in webix.DragControl.addDrag(view.$view, {…}).
    Here is the example: Code Snippet .
1 Like

@savirusing ,

  1. If you still want to have the delete area outside the abslayout, to move the item from the abslayout, you should change an overflow: hidden; to the overflow: visible; for the abslayout and all its parents separating the abslayout and the delete area. For instance, in the example there is outside_dnd class for it : Code Snippet .

However, in this case you will be able to move the item not only to the delete area, which can be inconvenient. To avoid this, you will need to recalculate $dragPos and if the item has gone beyond the abslayout and delete area not to change its position so that it always will stay in their borders.

1 Like

@savirusing , for example, you may create a function correctPos(pos, e, control) where you will correct the position of the dragged item.

The example: Code Snippet .

Hope it will be helpful for you!

1 Like

Thanks for reply, these are very helpful. I did able to move from datatable to abs_layout and encounter the problem about same ui, and also the offset to place new drag ui. And with these example, now those problems are solved.
I wonder if we can resize each ui manually like in webix designer. Something like the border of the ui to let user resize the width?


Do you mean something like adding a resizer between the views?
Please, check an example: Code Snippet

I mean, resizer for textbox or datepicker, or button

Unfortunately, this does not seem to be possible.
Please, read our article about resizing components: Resizing Components of Guides, Configuring Components Webix Docs. It may contain some helpful information for you.