javascript - 带有可排序 UI 的 jQuery 拖放不起作用

Question

我目前正在尝试创建一个带有可排序列表项的拖放...但是当我将可拖动项移向占位符时，它只是返回到它的位置。知道我做错了什么吗？

我找到了这个方法here ，但它似乎对我不起作用。

这是我的 HTML:

<ul id="draggable">

    <li class="to-drag" class="items">
        <h1>1</h1>
        <p>Description 1</p>
    </li>

    <li class="to-drag" class="items">
        <h1>2</h1>
        <p>Description 2</p>
    </li>

    <li class="to-drag" class="items">
        <h1>3</h1>
        <p>Description 3</p>
    </li>

</ul>

<div style="height: 100px; clear: both;"></div>

<ul id="dropzone" class="items">

    <li class="placeholder"></li>

</ul>

这是 jQuery:

$(function() {

    $("#draggable li.to-drag").draggable({

        connectWith: "#dropzone",
        helper: "clone",
        revert: "invalid",
        droppable: "drop"

    });

    $("#dropzone").droppable({

        drop: function( event, ui) {

            $(this).addClass("correct");

        }

    });

    $("ul, li").disableSelection();

});

感谢您的帮助! :)

编辑

这是工作中的 jQuery:

$(function() {

$("#dropzone").sortable({

    revert: true,
    opacity: 0.5

});

$("#draggable li").draggable({

    connectToSortable: ".items",
    helper: "clone",
    revert: true,
    opacity: 0.5

});

$("li.placeholder").droppable({
    revert: false,

    drop: function (event, ui) {

        var dragging = ui.draggable.clone();

        $(this).append(dragging);

    }

});

$("ul, li").disableSelection();

});

Answer 1

你至少有三个主要问题:

• Draggable 没有 connectWith，它有 connectToSortable。所以你应该改变这个。见文件: http://api.jqueryui.com/draggable/

• 要使用connectToSortable，您需要一个sortable，而不是
  可放置。

• 您需要将 drop 事件更改为可排序事件，receive
  可能或 update，具体取决于您的需要。
  http://api.jqueryui.com/sortable/

它可能看起来像这样:

$(function() {

    $("#draggable li.to-drag").draggable({

        connectToSortable: "#dropzone",
        helper: "clone",
        revert: "invalid",
        droppable: "drop"

    });

    $("#dropzone").sortable({

        receive: function( event, ui) {

            $(this).addClass("correct");

        }

    });

    $("ul, li").disableSelection();

});