Question

我试图创建一个jquery拖放解决方案，并且我对如何实现以下内容感到有点迷失。

允许＆＃39; .todo-task＆＃39;被放入4＆＃39;积压，待定，inProgress，完成＆＃39;中的任何一个div containers。
使用高亮辅助工具显示任务将放置在容器中的位置。
能够在容器中拖放以更改为订单。

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

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

我不确定您在＆＃34;禁用＆＃34;方面确实想要实现的其他目标。风格的CSS，但我只是分叉和喋喋不休地说了一会儿：

jsfiddle

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

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

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

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

所以我清理了一点。

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

请参阅jQuery API：droppable methods

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

jquery-ui使用sort拖放多个div

1 个答案: