Javascript 用户jQuery拖动一个DIV并放入一个TD。。。并有DIV“；snap"；到位

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

我希望用户能够从一列（TD）中拖动任务DIV，然后将其放到另一列（TD）中。除了一些小的格式问题外，我的工作正常。我有一个TD，它有一个名为droppable的类，它接受可拖动的类。我希望实际从当前TD中删除task DIV，并将其附加到Drop on 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>

$（函数（）{
$（“.draggable”）.draggable({
光标：“移动”，
取消：“a”，
还原：“无效”，
快照：“真的”
});
});
$（函数（）{
$（“.droppable”）.droppable({
接受：'.draggable'，
hoverClass:“可拖放悬停”，
drop:函数（事件，ui）{}
});
});

这是我的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>

我的队列
顾客
项目
顾客
项目
待定（0）
就绪（0）
进行中（2）
准备测试（0）
测试（0）
准备发布（0）

---

与drop事件的斗争以及如何实现这一点。感谢您的帮助

这个例子是可行的，但它还有待观察，因为div位于任何地方。这是因为首先触发事件是“可拖放的”，而不是“可拖动的”

---

正如@David Lively建议的那样，我们选择了可排序的路线。。。做了我需要它做的事

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

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