Javascript 拖放背后的逻辑

我想知道基本拖放功能的“如何工作”和“如何设计和实现”

我从未实现过这样的功能。我计划为我的一个项目这样做，我对如何实施它有一些想法。我想确保我走上了正确的道路，你们也很可能对这件事有话要说

假设我有5个元素，如下所示，并从数据库中抓取

<div id="1">this is content for 1</div>
<div id="2">this is content for 2</div>
<div id="3">this is content for 3</div>
<div id="4">this is content for 4</div>
<div id="5">this is content for 5</div>

这是1的内容
这是2的内容
这是3的内容
这是4的内容
这是5分钟的内容

因为这是从数据库中提取出来的，所以我们知道它有一个名为“序列”或“顺序”的字段来区分我们要输出的顺序。我们还假设当前的“序列”列值与div的id相同。所以：

1

，

2

，

3

，

4

和

5

我的问题和想法

如果我拖动div

4

并将其放在

1

和

2

之间；从那以后的步骤是什么？例如：

确定正在拖动的div的id（我们称之为

div-a

）

在本例中，确定要插入的div

div-a

后面（或之前）的div的id，在div

id

1

之后（我们称之为

div-b

）

更新数据库中的

div-a

序列，并将其设置为当前序列

div-b

经过这一步，我感到很困惑。。。我是否计算所有div，并根据div的顺序相应地更新DB？还是我完全错了，还有别的办法吗

---

---

感谢您的回答，但我知道有插件和其他东西可以完成这项工作，但我只对其中的逻辑部分感兴趣。

我相信jquery提供了一种根据id获取订单的方法

---

我一直以来的做法是，每次发生动作时，获取当前订单，通过ajax将其发送回我的应用程序。然后，我的应用程序只是从它提供的内容中解析出ID，并更新每个项目的订单值。

除非你这样做是为了自己的教育，否则我建议你使用jQueryUI

除其他功能外，它还具有拖放功能，这可能会帮助您了解DaD的本质，让您实现特定于您的问题的部分。

---

toArray是您的divs ID序列

谢谢phillic的回答。我感兴趣的是逻辑，而不是如何做的代码。。。你的回答给了我一个想法，证明了我走在正确的道路上。

    $("#col1").sortable({
        placeholder: "top",
        forcePlaceholderSize: true,
        revert: true, 
        update: function() { 
                $.ajax({
                     type: "GET",
                     url: "/request.php",
                     data: "data="+$(this).sortable("toArray")+"",
                     success: function(msg){ }
                        });         
             }
    });