jQuery UI：表格及其行内的可拖动和可放置（不触发）

Question

我目前正在使用 jQuery UI 中的 Draggable 来拖动表格中的选定行。但是，当我尝试在某些表行上使用 Droppable 时，即使将 ui-droppable 类添加到这些特定行，它的任何事件都不会触发。注意表是动态创建的，但是我创建的事件都是在表渲染的时候生成的。

到目前为止，这很好用：

 $(".files") //this is the class of tbody
            .draggable({
                handle: ".selected",
                start: function () {
                    amDragging = true;
                },
                drag: function (evt) {
                    $('.files .template-folder:not(.selected)').addClass('drag-over');
                },
                helper: function (ui) {
                    var endReturn = '<div>';
                    $('.selected').find('.name').each(function (index, element) {
                        endReturn = endReturn + ' ' + $(this).text();
                    });
                    amDragging = true;
                    console.log(amDragging);
                    return endReturn + '</div>';
                },
                cursorAt: {
                    top: -10,
                    left: -10
                },
                scroll: false,
                stop: function (evt) {
                    $('.files .template-folder').removeClass('drag-over');
                }
            });

但这不会触发：

 $(".files .template-folder").droppable({
           drop: function(event, ui) { 
             console.log("dropped");
           }
 });

基本上，我想要做的是将具有.selected 类的行拖到具有.template-folder 类的行上，并在完成后触发一个事件。我丢失的代码有什么问题吗，或者有一个简单的解决方法吗？

我已尝试将 dragover 绑定到 .template-folder 上，但这不会与 Draggable 一起触发，只能与拖动的文本等一起触发。

这是表格 html 的样子：

任何帮助都将不胜感激，因为我真的坚持这一点。

Answer 1

如果你想在表格元素上使用 ui，你应该使用 ui helper:'clone'，这将使元素位置：绝对

注意：默认的 ui 拖动是相对位置的，表格元素不支持相对位置。

尝试：activeClass 选项 https://api.jqueryui.com/droppable/#option-activeClass 也许它会解决你的问题。