Drag and Drop tr in Table

[esoftixbad]

Hi Does this package support drag and drop tr in table tag? I try this with tr but it does not work.

[Postlagerkarte]

Hi @esoftixbad , thank you for contacting me.

DraggableTableRows are not supported yet but I consider adding support for it with the next release.

[VR-Architect]

Please add this. I tried to use the current code base in a work around using Table for a hack for UL/LI. It didn't work as you know :)

So I spent literally 4 hours trying to figure out Syncfusion's treeview drop/drag and finally saw in their documentation the cancel event is not working. So basically we can't prevent a user from dropping to an invalid dropzone. Which your code works great for that.

So after all this frustration, it would be awesome to see your component implement it 👍 Would even willing to send some coffee money your way.

Thanks, VR Architect

[Postlagerkarte]

Hi @VR-Architect , thank you for contacting me.

The reason that this is currently not working is because the draggable component creates a draggable div around its child content. For tables this is invalid. Table tags only take tbody (optional) and tr as their permitted content.

So instead of a div I could render a draggable tbody element to make it work. However, since there can only be one tbody element, the table itself can not contain such an element anymore. Therefore, I was reluctant to implement it.

Code would look like this:

<Dropzone>
    <table>
       <DraggableTableRow AllowDrag="()=>false">
                <th>#</th>
                <th>Header A</th>
                <th>Header B</th>
                <th>Header C</th>
         </DraggableTableRow>
        <DraggableTableRow>
                <td>1</td>
                <td>Row data 1</td>
                <td>foo</td>
                <td>bar</td>
            </DraggableTableRow>
            <DraggableTableRow>
                <td>1</td>
                <td>Row data 1</td>
                <td>foo</td>
                <td>bar</td>
            </DraggableTableRow>
    </table>
</Dropzone>

[VR-Architect]

Greetings to you! I would be OK with your solution. It would be awesome to get a tree drag working. Especially if it included an event on drag to cancel the drag if there were special conditiions. And the drag would move in/out of the tree. I am happy to help with code.

[Postlagerkarte]

To get tree drag working you would need nested draggables - I wonder how are draggable tables rows going to help with that?

[VR-Architect]

Not sure. Here is a demo of Syncfusion's. I can drag in the same control or to another control while placing the dropped node at any level of the tree.

https://ej2.syncfusion.com/aspnetcore/TreeView/DragDrop#/material

[VR-Architect]

What it can't do is fire a cancel event if you didn't want the user to put a node in a particular place and/or control.

[elgransan]

I saw in a Vue implementation of draggable component that they allow to change the div tag for another one like ul, ol, tbody, etc using a tag property