javascript - 用户 jQuery 拖动一个 DIV 并放入一个 TD ... 并将 DIV "snap"放置到位

Question

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

我希望用户能够将任务 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 事件以及如何实现它。感谢您的帮助!

Answer 1

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

    $(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;
            }
        });
    });