jQuery UI可排序/可拖动嵌套示例

我一直在玩jQuery UI可排序和可拖动，我正在寻找一种方法来嵌套列表项（只有第一级和第二级），具体取决于它们在列表中的放置位置。

简单的JSFiddle我想做的例子： 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）我正在附近的列表项目，它将使该列表项目成为第一和第二级项目。 例如，如果我将一个列表项拖到另一个上面，并且我更接近我正在盘旋的列表项的底部，那么如果我离底部更远，如果我放下它将会捕捉到它所述列表项的底部是一个第一级项。 如果我要将该列表项更远地移动并放下它，它将捕捉到底部并成为第二级项。 占位符也会更新，只是在hover时调用一个类，以显示删除的列表项在实际删除之前是第一级还是第二级。

根据上面的小提琴，在drop方法中，我正在检查拖动列表项距离左侧的距离。 如果它大于或等于20px，我将添加一个缩进列表项的“二级”类。 如果它小于20px，我将添加一个“第一级”类，使列表项保持向左冲洗。 仅用于左（x）计算，这是有效的，但它不是将类应用于删除的列表项，它将它们应用于它已“跳过”的列表项。 我没有调用正确的方法来执行此操作吗？ 此外，我将如何执行此类计算以确定列表项将在何处捕捉，具体取决于它与我hover的列表项的距离（y）是多少？

任何反馈/方向将不胜感激。

Answer 1

好吧，我认为你的问题看起来像是一个有趣的挑战..而且我对如何做到这一点有所了解但不确定..所以我试了一下。 希望这将是有用的..我不确定它是否能满足你所​​需的一切，所以如果有什么东西丢失，请告诉我。 谢谢。

这是我想出的一个例子：使用sortable事件。

CSS

 .placeholder-sub { background: #fff; border: 1px dashed #ccc; height: 50px; width: 480px; margin-left: 20px; } 

jQuery的

 $(".items").sortable({ connectWith: ".items", placeholder: "placeholder", update: function(event, ui) { // update }, start: function(event, ui) { if(ui.helper.hasClass('second-level')){ ui.placeholder.removeClass('placeholder'); ui.placeholder.addClass('placeholder-sub'); } else{ ui.placeholder.removeClass('placeholder-sub'); ui.placeholder.addClass('placeholder'); } }, sort: function(event, ui) { var pos; if(ui.helper.hasClass('second-level')){ pos = ui.position.left+20; $('#cursor').text(ui.position.left+20); } else{ pos = ui.position.left; $('#cursor').text(ui.position.left); } if(pos >= 32 && !ui.helper.hasClass('second-level')){ ui.placeholder.removeClass('placeholder'); ui.placeholder.addClass('placeholder-sub'); ui.helper.addClass('second-level'); } else if(pos < 25 && ui.helper.hasClass('second-level')){ ui.placeholder.removeClass('placeholder-sub'); ui.placeholder.addClass('placeholder'); ui.helper.removeClass('second-level'); } } }); 

小提琴