jquery-ui 拖放多个 div 并排序

Question

我正在尝试创建一个 jquery 拖放解决方案，但我对实现以下目标的方式有点迷茫。

允许将“.todo-task”放入 4 个 'backlog, pending, inProgress, completed'div 容器中的任何一个。
使用高亮助手显示任务在容器中的位置。
能够在容器中拖放以更改顺序。

我的第一个问题是我似乎无法正确激活拖动项。

我已经用目前的代码创建了一个 jsfiddle。感谢任何指导/帮助

这是我的 jquery 代码

 $(".task-container").contents().find(".todo-task").draggable({
    connectToSortable: ".ui-droppable",
    helper: function (event) {

    },
    iframeFix: true,
    // stop: makeSortable()
    stop: function (event, ui) {
      //  alert('stop');
    }
});   

$(".ui-droppable").sortable({
    placeholder: "ui-state-highlight",
    opacity: .5,
    //dropOnEmpty: true,
    helper: 'original',
    beforeStop: function (event, ui) {
     newItem = ui.item;
    },
    receive: function (event, ui) {

    },

}).disableSelection().droppable({
    over: ".ui-droppable",
    activeClass: 'highlight',
    drop: function (event, ui) {
        $(this).addClass("ui-state-highlight");

    }
})

Answer 1

我不确定您在 "disabled" 风格 CSS 方面还想达到什么目的，但我只是分叉并胡闹了一分钟：

jsfiddle

一件事是我认为您的 jQuery 方法是多余的。为什么说：

$(".task-container").contents().find(".todo-task").draggable( ...etc.

当您可以轻松做到这一点时：

$(".todo-task").draggable( ...etc.

所以我清理了一点。

我做的另一件事是 .task-container droppable.

见 jQuery API: droppable methods

这允许您在列之间进行排序和移动，但就像我提到的那样，此修复程序似乎与您的 CSS class 方法表现得很奇怪。

jquery-ui 拖放多个 div 并排序

jquery-ui drag and drop across multiple divs with sort

jquery-ui

drag-and-drop

jquery-ui-sortable