1

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

  1. 然后，当他们将页面发布回服务器时，它将保存他们的选择以及他们将项目放入的框。因此，当一个项目被“丢弃”到其中一个盒子中时，我需要以某种方式获取被丢弃项目的 id 和它被放入的盒子的 id。稍后我会将其存储在数组/对象中。
  2. 如果用户可以在可放置的框中订购物品，那将很方便，但并不重要。我确实需要它们自动排列好，就像无序列表应该如何工作一样。目前，这些项目只是放在目标框中的任何位置，因此所有项目都在目标框内的所有地方。
  3. 如果用户改变主意，他们应该能够将项目从目标框移回源框
  4. 我在下面有一个代码外壳，但它不起作用，我似乎无法获得移动项目的 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>
4

1 回答 1

1

从文档中：

在回调中，$(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"
    }
})
于 2012-02-14T10:24:47.290 回答