jquery-ui 拖放多个 div 并排序
jquery-ui drag and drop across multiple divs with sort
我正在尝试创建一个 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");
}
})
我不确定您在 "disabled" 风格 CSS 方面还想达到什么目的,但我只是分叉并胡闹了一分钟:
一件事是我认为您的 jQuery 方法是多余的。为什么说:
$(".task-container").contents().find(".todo-task").draggable( ...etc.
当您可以轻松做到这一点时:
$(".todo-task").draggable( ...etc.
所以我清理了一点。
我做的另一件事是 .task-container
droppable
.
见 jQuery API: droppable methods
这允许您在列之间进行排序和移动,但就像我提到的那样,此修复程序似乎与您的 CSS class 方法表现得很奇怪。
我正在尝试创建一个 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");
}
})
我不确定您在 "disabled" 风格 CSS 方面还想达到什么目的,但我只是分叉并胡闹了一分钟:
一件事是我认为您的 jQuery 方法是多余的。为什么说:
$(".task-container").contents().find(".todo-task").draggable( ...etc.
当您可以轻松做到这一点时:
$(".todo-task").draggable( ...etc.
所以我清理了一点。
我做的另一件事是 .task-container
droppable
.
见 jQuery API: droppable methods
这允许您在列之间进行排序和移动,但就像我提到的那样,此修复程序似乎与您的 CSS class 方法表现得很奇怪。