javascript - 拖动的 div 改变目的地的位置

Question

可能解释起来有点复杂。我有一个包含 9 个 100 x 100 像素图像的网格(每个数字代表一张图片):

1 2 3
4 5 6
7 8 9

我想要的是用户可以拖放，例如9 比 1，他们这样换位置:

9 2 3
4 5 6
7 8 1

来自 jquery UI 的 Sortables 将无法工作，因为他们的解决方案是使用 float 。这会将所有框“推”到右侧或左侧，例如:

9 1 2
3 4 5
6 7 8

提前致谢。

Answer 1

这同时使用了 Draggable 和 Droppable。 Draggable 在放下时恢复到它的原始位置。当拖动开始时，Draggable 创建一个函数来指定在何处插入 Droppable，项目被放置在该位置上。当项目被放下时，drop 函数将被拖动的项目插入到它被放置在其上的项目之后，并对被放下的项目调用 insert 函数以将 Droppable 移动到正确的位置。

$(function() {
  $('.item').draggable( {
     containment: 'parent',
     revert: true,
     revertDuration: 0,
     start: function() {
         var that = $(this);
         var previous = that.prev( '.item:last' );
         var next = that.next( '.item:first' );
         that.data( 'insert' , function(elem) {
             if (previous.size() > 0) {
                $(elem).insertAfter(previous);
             }
             else if (next.size() > 0) {
                $(elem).insertBefore(next);
             }
         });
     }
  });
  $('.item').droppable( {
    accept: '.item',
    drop: function(event, ui) {
       var elem = $(this);
       if (elem.siblings('.item').size() > 1) {
           ui.draggable.insertAfter(elem);
           var insert = ui.draggable.data('insert');
           insert(elem);
       }
       else { // case where there are only two elements, swap
           var parent = elem.closest('.container');
           var first = parent.children( '.item:first' );
           var last = parent.children( '.item:last' );
           last.insertBefore( first );
       }
    }
  });
});

<div id="container">
    <span class="item">1</span>
    <span class="item">2</span>
    <span class="item">3</span>
    <span class="item">4</span>
    <span class="item">5</span>
</div>