用户 jQuery 拖动一个 DIV 并放入一个 TD ...并使 DIV “卡入”到位答案

【问题标题】：User jQuery to drag a DIV and drop in a TD ... and have the DIV "snap" into place用户 jQuery 拖动一个 DIV 并放入一个 TD ...并使 DIV “卡入”到位
【发布时间】：2010-12-16 09:12:33
【问题描述】：

我正在完成任务管理系统的重写，并且正在添加拖放功能。

我希望用户能够将任务 DIV 从一列 (TD) 拖放到另一列 (TD)。我有这个工作正常，除了一些小的格式问题。我的 TD 有一个名为 droppable 的类，它接受可拖动的类。我想要发生的实际上是从当前 TD 中删除任务 DIV 并将其附加到已删除的 TD 上。

这是我的脚本：

<script type="text/javascript">
    $(function() {
        $(".draggable").draggable({
            cursor: 'move',
            cancel: 'a',
            revert: 'invalid',
            snap: 'true'
        });
    });
    $(function() {
        $(".droppable").droppable({
            accept: '.draggable',
            hoverClass: 'droppable-hover',
            drop: function(event, ui) { }
        });
    });

</script>

这是我的 HTML：

<h3>
    My Queue</h3>
<table style="width: 100%;" class="queue">
    <tbody>
        <tr>            
            <td style="width: 14%; vertical-align:bottom ;" class="droppable" id="StagePG">                
            </td>            
            <td style="width: 14%; vertical-align:bottom ;" class="droppable" id="StageRY">                
            </td>           
            <td style="width: 14%; vertical-align:bottom ;" class="droppable" id="StagePR">                
                <div class="queue-item draggable" title="Task description goes here.">
                    <em>Customer</em>
                    <strong>Project</strong>
                    <h4><a href="/Sauron/Task/Details/100001">100001</a></h4>
                </div>

                <div class="queue-item draggable" title="Task description goes here.">

                    <em>Customer</em>
                    <strong>Project</strong>
                    <h4><a href="/Sauron/Task/Details/100002">100002</a></h4>
                </div>              
            </td>
            <td style="width: 14%; vertical-align:bottom ;" class="droppable" id="StageRT">
            </td>
            <td style="width: 14%; vertical-align:bottom ;" class="droppable" id="StageTE">
            </td>
            <td style="width: 14%; vertical-align:bottom ;" class="droppable" id="StageRL">
            </td>            
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td style="width: 14%; text-align: center;">
                Pending (0)
            </td>
            <td style="width: 14%; text-align: center;">
                Ready (0)
            </td>
            <td style="width: 14%; text-align: center;">
                In Progress (2)
            </td>
            <td style="width: 14%; text-align: center;">
                Ready for Testing (0)
            </td>
            <td style="width: 14%; text-align: center;">
                Testing (0)
            </td>
            <td style="width: 14%; text-align: center;">
                Ready for Release (0)
            </td>
        </tr>
    </tfoot>
</table>

正在努力解决 drop 事件以及如何实现这一点。任何帮助表示赞赏！

【问题讨论】：

您是否考虑过使用 .sortable() 而不是 .draggable()？它非常适合在单个容器中进行排序（例如，td 中的 div），并提供了一种在容器之间移动项目的非常简单的方法。
说实话......我真的需要能够做到这两点......我需要允许在当前列中进行排序，然后左右拖动。
我认为你是对的......可排序是解决这个问题的方法！
@mattruma sortable 将允许您在容器（div 或 TD）之间拖放。它非常灵活，解决了我所有的拖放需求。

标签： javascript jquery asp.net-mvc jquery-ui drag-and-drop

【解决方案1】：

此示例有效，但仍有待观察，因为 div 位于任何位置。这是有效的，因为事件首先被“droppable”而不是“draggable”触发

    $(function() {

     $_dropEnd = null;

     $(".draggable").draggable({
            cursor: 'move',
            cancel: 'a',
            revert: 'invalid',
            snap: 'true',
            stop: function(event, ui) { 
               $(this).appendTo($_dropEnd);
               $_dropEnd = null;
            }
        });
    });
    $(function() {
        $(".droppable").droppable({
            accept: '.draggable',
            hoverClass: 'droppable-hover',
            drop: function(event, ui) {
               $_dropEnd = this;
            }
        });
    });

【讨论】：

【解决方案2】：

正如@David Lively 建议的那样，我们采用了可排序的路线……完全按照我的需要去做！

【讨论】：