jQueryUI-如何从源框拖动到两个目标框，然后获得移动项目的id和目标框的id

我正在尝试使用jQueryUI draggable/doppable/sortable来将项目从源框移动到任一目标框。这就是用户可以将项目分类到他们想要的框中。

然后，当他们将页面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>

来自文档：

在回调中，$（this）表示可丢弃可拖动对象被丢弃。ui.dragable表示可拖动对象。

所以我想你可以这么做：

$('#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"
    }
})

相关内容

最新更新

热门标签：