jquery-ui 通过排序拖放多个 div

Question

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

1. 允许将“.todo-task”放入 4 个“backlog、pending、inProgress、completed”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 实现什么目标，但我只是对此进行了 fork 和胡闹:

jsfiddle

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

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

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

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

所以我清理了一些。

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

查看 jQuery API:droppable methods

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