当前位置： 文江博客话题详情

拖动的 div 随目的地改变位置

发布于 2024-07-19 17:41:48 字数 328 浏览 13 评论 0原文

也许解释起来有点复杂。 我有一个包含 9 个图像 100 x 100 px 的网格，如下所示（每个数字代表一张图片）：

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

提前致谢。

原文

Maybe a bit complex to explain. I have a grid with 9 images 100 x 100 px like this (each number symbolize a picture):

1 2 3
4 5 6
7 8 9

What I want is that the user can drag and drop e.g. 9 over 1 and they change places like this:

9 2 3
4 5 6
7 8 1

Sortables from jquery UI will not work since their solution is using floats. That will "push" all the boxes to the right or left e.g.:

9 1 2
3 4 5
6 7 8

thanks in advance.

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（3）

大姐，你呐 2024-07-26 17:41:48

这同时使用了 Draggable 和 Droppable。 Draggable 在放下时会恢复到其原始位置。 当拖动开始时，Draggable 创建一个函数来指定在何处插入项目放置的 Droppable。 当项目被放置时，放置函数会将拖动的项目插入到放置项目之后，并调用放置的项目上的插入函数以将 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>

This uses both Draggable and Droppable. The Draggable reverts to it's original position on drop. When dragging starts, the Draggable creates a function to specify where to insert the Droppable that the item gets dropped on. When the item is dropped the drop function inserts the dragged item after the item it was dropped on and invokes the insert function on the dropped item to move the Droppable to the correct position.

$(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>
回复 原文
旧时模样 2024-07-26 17:41:48

感谢您的快速回复！

您的解决方案看起来不错，但第一个解决方案在更改位置 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>

Thanks for the fast replies!

Your solutions looks good but the first one throws some errors when changing position 1 and 2. The second one is not quite there. But they help alot!

I have tried to make some code that I think is a step in the right direction. What do you think?

<!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>
回复 原文
~没有更多了~

关于作者

偏爱自由

暂无简介

文章
评论
21390 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

一桥轻雨一伞开

文章 0 评论 0

冷血

文章 0 评论 0

隔岸观火

文章 0 评论 0

昔梦

文章 0 评论 0

最终幸福

文章 0 评论 0

世界等同你

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文