javascript - jQuery 用户界面 : Draggable and Droppable(not firing) within a table and its rows

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 的行上，然后触发一个事件完毕。我缺少的代码有什么问题吗？或者有一个简单的解决方法吗？

我尝试在 .template-folder 上绑定(bind) dragover，但这不会通过 Draggable 触发，只能通过拖动的文本等触发。

这就是表格 html 的样子:

任何帮助将不胜感激，因为我真的很困惑。

Answer 1

如果你想在表格元素上使用 ui，你应该使用ui helper:'clone'，这将使元素position:absolute

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

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