Question

我想知道“它是如何工作”和“它应该如何设计和实施”的基本拖拽和丢弃功能。

我从未实现过这样的功能。我打算为我的一个项目这样做，我对如何实现它有一些想法。我想确保自己走在正确的道路上，并且人们最有可能对此事有所说明......

让我们假设我有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>

因为这是从数据库中删除的，所以我们知道它有一个名为“sequence”或“order”的字段来区分我们要输出的顺序。我们还想象当前“序列”列的值与div的ID相同。所以：分别为1,2,3,4和5。

我的问题和想法;

如果我拖动div 4并将其放在1和2之间;那里的步骤是什么？ E.g：

1）确定被拖动的div的ID（让我们称之为 div -a ）

2）确定在此情况之后（或之前）插入 div-a 的div的id，然后在div id 1之后（让我们称之为 div-b） ）

3）在db中更新 div-a 的序列并将其设置为 div-b 的当前序列

在这一步之后我感到很困惑......我是否计算了所有的div，并根据div的顺序，我是否相应地更新了db？或者我完全错了，还有另一种方式吗？

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

Answer 1

我相信jquery会为你提供一种基于id获取订单的方法吗？

我一直这样做的方式是每次动作发生时，抓住当前的订单，通过ajax将其发回我的应用程序。然后我的应用程序只是根据给出的内容解析ID并更新每个项目的订单值。

Answer 2

http://jqueryui.com/demos/sortable/

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

toArray是你的divs id的序列

Answer 3

除非你为自己的教育做这件事，否则我建议你使用jQueryUI。

它具有拖放功能，除其他外，可能会帮助您解决DaD的细节问题，让您实现特定于您的问题的部分。

拖放背后的逻辑

3 个答案: