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

Posted 2023-05-08

【中文标题】用户 jQuery 拖动一个 DIV 并放入一个 TD ...并使 DIV “卡入”到位

【英文标题】：User jQuery to drag a DIV and drop in a TD ... and have the DIV "snap" into place

【发布时间】：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）之间拖放。它非常灵活，解决了我所有的拖放需求。

【参考方案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 建议的那样，我们采用了可排序的路线……完全按照我的需要去做！