Question

如何更改可排序的切换行为？我的意思是默认1 - 2 - 3 - 4 http://jsfiddle.net/keGuN/ 当我切换4和1的位置时，它们会转换为4 - 1 - 2 - 3。我只希望切换4和1（4 - 2 - 3 - 1）的位置。怎么做？

Answer 1

您可以使用draggable / droppable实现交换

$(function() {
$(".swapable").
draggable({ revert: true }).
droppable({
    drop:function(event,ui){
        swapNodes($(this).get(0),$(ui.draggable).get(0));
    }});
});

https://stackoverflow.com/a/698440/2033671

function swapNodes(a, b) {
    var aparent= a.parentNode;
    var asibling= a.nextSibling===b? a : a.nextSibling;
    b.parentNode.insertBefore(a, b);
    aparent.insertBefore(b, asibling);
}

http://jsfiddle.net/keGuN/1/

Answer 2

我想我明白你要做什么。 jQuery的Sortable并不是为了满足你的要求而设计的。但是，使用Sortable公开的事件，您可以将拖动项目（A）的位置与先前位于放置A的点（B）中的项目进行交换。我认为这可以实现你想要的效果：

jsFiddle demo

jQuery的：

$(function() {
    var oldIndex;

    $("#sortable").sortable({
        start: function(event, ui) {
            oldIndex = ui.item.index();
        },
        stop: function(event, ui) {
            var newIndex = ui.item.index();
            var movingForward = newIndex > oldIndex;            
            var nextIndex = newIndex + (movingForward ? -1 : 1);

            var items = $('#sortable > div');

            // Find the element to move
            var itemToMove = items.get(nextIndex);
            if (itemToMove) {

                // Find the element at the index where we want to move the itemToMove
                var newLocation = $(items.get(oldIndex));

                // Decide if it goes before or after
                if (movingForward) {
                    $(itemToMove).insertBefore(newLocation);
                } else {
                    $(itemToMove).insertAfter(newLocation);
                }
            }
        }
    });

    $("#sortable").disableSelection();
});

唯一值得注意的问题是位置不会在拖动时更新，而是仅在项目在新位置被删除后才会更新。

改变开关位置行为

2 个答案: