Question

Codepen Demo

这里我使用 sortable jQuery 。只有答案块 - 1,2,3,4,5是可排序的块，而不是块1,2,3,4,5。 aboce代码仅用于移动元素。

但需要交换元素。

如果将第4个元素拖到第2个位置结果如下 1-2 4-3- -5。 第四名是空的。

但我的期望结果如此 1-4-3-2-5

JS代码：

$(".right-block").sortable({
          connectWith: '.right-block',
        opacity: 0.6, cursor:"move",               
          cancel: ".unsortable" , 
            revert:true,
           items: "span",
         placeholder: "highlight",
                start: function (event, ui) {
                        ui.item.toggleClass("highlight");
                           ui.placeholder.height(ui.item.height());                       
                },          

                stop: function (event, ui) {
                        ui.item.toggleClass("highlight");
                }       
        });

Answer 1

由于每个项目都可以根据您的特定情况进行排序，因此您可以使用receive回调，例如：

receive: function(event, ui) {
  ui.sender.append($(this).find('span').not(ui.item));
},

Updated Pen

根据您的用例判断，如果您只想交换元素，我认为使用draggable + dropable会更好。

如何在可排序的jquery中交换div元素？

1 个答案: