1

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

9 1 2
3 4 5
6 7 8

提前致谢。

4

3 回答 3

2

这同时使用了 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>
于 2009-05-11T15:35:41.710 回答
0

感谢您的快速回复！

您的解决方案看起来不错，但第一个在更改位置 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>
于 2009-05-12T10:16:43.550 回答
0

看看这个插件：

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

于 2009-05-11T14:58:16.283 回答