Question

鉴于以下代码，我该怎么做：

使li可排序。
如何将li拖入ul.droppable并在其中保持可排序？
如何将li拖入ul.droppable拖出ul.droppable并直接返回ul.sortable？

<ul class="sortable">
    <li>Test</li>
    <li>Test</li>
    <li>Test</li>
    <li>Test</li>
    <li>Test</li>
    <li>Test</li>
    <li>
        <ul class="droppable" style="border:1px dashed #000;min-height:200px;">
        </ul>
    </li>
    <li>Test</li>
    <li>Test</li>
    <li>Test</li>       
</ul>

jQuery(document).ready(function($) {
    $('.sortable').sortable({});

    $('.droppable').droppable({
        hoverClass: '<div style="border: 1px dashed red; height: 20px; width: 100%;"></div>',
        drop: function (e, ui) {
            $(ui.draggable).appendTo($(this));
        }
    });     

    $('.sortable li').draggable({
        helper: function(event, ui) {
            return '<div style="border: 1px dashed blue; height: 20px; width: 100%;"></div>';
        } 
    });         
});

我希望你能清楚，谢谢你。

Answer 1

问题在于包含jQuery UI库。

added external resource...

Here is the fiddle

BTW：只需打开浏览器调试控制台即可查看错误。

HTML：

<ul id="droppable-2">
    <li>Test 1</li>
    <li>Test 2</li>
    <li>Test 3</li>
    <li>Test 4</li>
    <li>Test 5</li>
    <li>Test 6</li>
    <li>Test 7</li>
    <li>Test 8</li>
    <li>Test 9</li>     
</ul>

<ul id="droppable" style="border:1px dashed #000;min-height:200px;">
</ul>

JS：

jQuery(document).ready(function($) {
    var droppableObj = {
        hoverClass: '<div style="border:1px dashed red;height:20px;width:100%;"></div>',
        drop: function (e, ui) {
            var $item = $(ui.draggable);
            $(this).append($item);
        }
    };

    $('#droppable').droppable(droppableObj);    
    $('#droppable-2').droppable(droppableObj);

    $('#droppable-2 li').draggable({
        helper: function(event, ui) {
            return '<div style="border:1px dashed blue;height:20px;width:100%;"></div>';
        } 
    }); 
});

Here is the new version.

如何同时使jQuery UI可排序，可拖动和可放置工作

1 个答案: