jQueryUI - 如何从源框拖动到两个目标框，然后获取移动项目的 ID 和目标框的 ID答案

【问题标题】：jQueryUI - how to drag from source box to two destination boxes, then get id of moved item and id of destination boxjQueryUI - 如何从源框拖动到两个目标框，然后获取移动项目的 ID 和目标框的 ID
【发布时间】：2012-02-14 10:16:08
【问题描述】：

我正在尝试使用 jQueryUI 可拖动/可拖放/可排序将项目从源框移动（而不是复制）到任一目标框。这就是用户可以将物品分类到他们想要的盒子中。

然后，当他们将页面 POST 回服务器时，它将保存他们的选择以及什么他们将物品放入的盒子。所以当一个项目被“放入”一个在盒子中，我需要以某种方式获取被丢弃物品的 id 和放入的盒子的 id。我会把它存储在一个数组/对象稍后。
如果用户可以订购可放置框中的项目，但不重要。我确实需要它们像无序列表一样自动排列好去工作。目前这些物品只是掉落在目标框，以便所有项目都在目标框内。
如果用户改变主意，他们应该能够将项目从目标框移回源框
我在下面有一个代码外壳，但它不起作用，而且我似乎无法获得移动项目的 ID 或目标 ID。我试图使用新的 HTML5 数据属性，但它似乎没有得到任何东西。我的网站是 HTML5，因此可以使用这些新技术。

更新： 得到它的工作 - JSfiddle 及以下的完整解决方案：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>jQuery UI Source + Double Destination Demo</title>
    <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
    <script src="../../jquery-1.7.1.js"></script>
    <script src="../../ui/jquery.ui.core.js"></script>
    <script src="../../ui/jquery.ui.widget.js"></script>
    <script src="../../ui/jquery.ui.mouse.js"></script>
    <script src="../../ui/jquery.ui.draggable.js"></script>
    <script src="../../ui/jquery.ui.droppable.js"></script>
    <script src="../../ui/jquery.ui.sortable.js"></script>
    <link rel="stylesheet" href="../demos.css">
    <style>
        h1 { padding: .2em; margin: 0; }
        #destinationA, #destinationB { width: 200px; float: left; }

        /* style the list to maximize the droppable hitarea */
        #destinationA ol, #destinationB ol, #source ul { margin: 0; padding: 1em 0 1em 3em; background-color: #f7f7f7; }
    </style>

    <script>
    $(function()
    {
        $( "#source li" ).draggable({
            appendTo: "body",
            helper: "clone"
        });
        $( "#destinationA ol, #destinationB ol, #source ul" ).droppable(
        {
            activeClass: "ui-state-default",
            hoverClass: "ui-state-hover",
            accept: ":not(.ui-sortable-helper)",
            drop: function( event, ui )
            {
                // Get id of the item that was moved
                var itemIdMoved = ui.draggable.data('item-id');
                var itemName = ui.draggable.data('item-name');

                // Get id of the current destination (the item is dropped into the ul tag so we need to go up a level to get the div id)
                var destinationId = $(this).parent().attr('id');

                // Move the draggable into the destination box (actually moves the original li element including data attributes)
                ui.draggable.appendTo(this);

                // Debug
                console.log('item ' + itemName + ' (id: ' + itemIdMoved + ') dropped into ' + destinationId);
            }
        }).sortable(
        {
            sort: function()
            {
                // gets added unintentionally by droppable interacting with sortable
                // using connectWithSortable fixes this, but doesn't allow you to customize active/hoverClass options
                $( this ).removeClass( "ui-state-default" );
            }
        });
    });
    </script>
</head>
<body>
    <h1 class="ui-widget-header">Source</h1>    
    <div id="source">
        <ul>
            <li data-item-id="1" data-item-name="One">Item 1</li>
            <li data-item-id="2" data-item-name="Two">Item 2</li>
            <li data-item-id="3" data-item-name="Three">Item 3</li>
            <li data-item-id="4" data-item-name="Four">Item 4</li>
        </ul>
    </div>

    <div id="destinationA">
        <h1 class="ui-widget-header">Destination A</h1>
        <ol>

        </ol>
    </div>

    <div id="destinationB">
        <h1 class="ui-widget-header">Destination B</h1>
        <ol>

        </ol>
    </div>
</body>
</html>

【问题讨论】：

标签： html jquery-ui jquery-ui-sortable jquery-ui-draggable jquery-ui-droppable

【解决方案1】：

来自documentation：

在回调中，$(this) 表示可拖放对象，可拖动对象被拖放到上面。 ui.draggable 代表可拖动对象。

所以我想你可以这样做：

$('#destinationA ul, #destinationB ul').droppable(
{
    drop: function(event, ui)
    {
        // Get id of the item that was moved
        var idMoved = $(this).data('itemid');
        console.log(idMoved);

        // How to get the destination ID that the item was dropped to?
        var idDropped = this.id;
        console.log(idDropped);  // "destinationA" or "destinationB"
    }
})

【讨论】：

很棒的伙伴，非常感谢！我让它工作了，@ 987654322@。您可以拖放到任一目的地或从目的地拖放回源，它会向您显示destinationId 和移动项目的数据属性。正如拉里大卫所说的“pretty good”。