我一直在使用 jQuery UI 可排序和可拖动,并且我正在寻找一种方法来嵌套列表项(仅第一级和第二级),具体取决于它们在列表中的位置。
我正在尝试做的简单 JSFiddle 示例:http://jsfiddle.net/picitelli/XZ4Tw/ http://jsfiddle.net/picitelli/XZ4Tw/
$(".items").sortable({
connectWith: ".items",
placeholder: "placeholder",
update: function(event, ui) {
// update
},
sort: function(event, ui) {
// sort
}
});
$(".item").droppable({
accept: ".item",
hoverClass: "dragHover",
drop: function( event, ui ) {
console.log('drop');
if (ui.position.left >= 20) {
$(this).removeClass("first-level");
$(this).addClass("second-level");
} else {
$(this).removeClass("second-level");
$(this).addClass("first-level");
}
},
over: function( event, ui ) {
// over
},
activate: function( event, ui ) {
// activate
}
});
我希望能够拖动一个列表项并将其放在另一个列表项之前/之后,具体取决于我距列表左侧 (x) 的距离以及距底部/顶部 (y) 的距离我正在放置的列表项附近,它将使该列表项成为第一级和第二级项目。例如,如果我将一个列表项拖到另一个列表项的顶部,并且我距离悬停在其上的该列表项的底部更近,而不是距离底部更远,那么如果我放下它,它将捕捉到所述列表项的底部并且是第一级项。如果我将该列表项移得更远并放下它,它就会吸附到底部并成为第二级项目。占位符也会更新,仅在悬停时调用一个类,以显示删除的列表项在实际删除之前将是第一级或第二级。
根据上面的小提琴,在 drop 方法中,我检查拖动的列表项距左侧有多远。如果它大于或等于 20px,我将添加一个缩进列表项的“二级”类。如果它小于 20px,我将添加一个“第一级”类,使列表项保持左对齐。仅对于左(x)计算,这是有效的,但它没有将类应用到删除的列表项,而是将它们应用到它“跳过”的列表项。我是否没有调用正确的方法来执行此操作?另外,我将如何执行这样的计算来确定列表项将捕捉到的位置,具体取决于它距我悬停的列表项的距离(y)?
任何反馈/方向将不胜感激。