拖动的 div 用目的地改变地方答案

【问题标题】：Dragged div change places with destination拖动的 div 用目的地改变地方
【发布时间】：2009-05-11 14:38:30
【问题描述】：

解释起来可能有点复杂。我有一个包含 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 的排序表将无法工作，因为他们的解决方案是使用浮点数。这会将所有框“推”到右边或左边，例如：

9 1 2
3 4 5
6 7 8

提前致谢。

【问题讨论】：

查看一些实际代码总是有帮助的。 HTML、CSS 和 JS。

标签： javascript jquery drag-and-drop sortables

【解决方案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>

【讨论】：

【解决方案2】：

看看这个插件：

http://github.com/brandonaaron/jquery-swap/tree/master

【讨论】：

【解决方案3】：

感谢您的快速回复！

您的解决方案看起来不错，但第一个解决方案在更改位置 1 和 2 时会引发一些错误。第二个解决方案不完全存在。但他们帮助很大！

我尝试编写一些我认为是朝着正确方向迈出的代码。你怎么看？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
    <meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" />
    <title>Drag drop 1</title>
    <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui-1.7.1.custom.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
        $(".item").draggable({
            // Elements cannot go outside #container
            containment: 'parent',
            // Make sure the element can only be dropped in a grid
            grid: [150,150],
            start: function(event, ui) {
                // Make sure picture always are on top when dragged (z-index)
                $(this).css({'z-index' : '100'});
                // Show start dragged position
                var Startpos = $(this).position();
                $("div#start").text("START: \nLeft: "+ Startpos.left + "\nTop: " + Startpos.top);
            },
            stop: function(event, ui) {
                // Revert to default layer position when dropped (z-index)
                $(this).css({'z-index' : '10'});
                // Show dropped position
                var Stoppos = $(this).position();
                $("div#stop").text("STOP: \nLeft: "+ Stoppos.left + "\nTop: " + Stoppos.top);
            }
        });
    });
    </script>
    <style>
    #container {
        width:480px;
        border:1px solid #000;
    }
    .item {
        position:relative;
        width:150px;
        height:150px;
        z-index:10;
    }
    </style>
</head>
<body>
    <div id="container">
        <img id="productid_1" src="images/pic1.jpg" class="item" alt="" title="" /><img id="productid_2" src="images/pic2.jpg" class="item" alt="" title="" /><img id="productid_3" src="images/pic3.jpg" class="item" alt="" title="" /><img id="productid_4" src="images/pic4.jpg" class="item" alt="" title="" /><img id="productid_5" src="images/pic5.jpg" class="item" alt="" title="" /><img id="productid_6" src="images/pic6.jpg" class="item" alt="" title="" /><img id="productid_7" src="images/pic7.jpg" class="item" alt="" title="" /><img id="productid_8" src="images/pic8.jpg" class="item" alt="" title="" /><img id="productid_9" src="images/pic9.jpg" class="item" alt="" title="" />
    </div>
    <div style="clear:both;"></div>
    <div id="start">Waiting...</div>
    <div id="stop">Waiting...</div>
</body>
</html>

【讨论】：