jquery-ui 拖放多个 div 并排序

Question

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

1. 允许将“.todo-task”拖放到 4 个“积压、待处理、进行中、已完成”的 div 容器中的任何一个中。

2. 使用高亮助手显示任务在容器中的放置位置。

3. 能够在容器中拖放以更改顺序。

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

我已经用我目前拥有的代码创建了一个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

我不确定您在“禁用”样式 CSS 方面还试图实现什么，但我只是分叉和胡闹了一分钟：

jsfiddle

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

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

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

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

所以我清理了一点。

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

查看 jQuery API：droppable methods

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