帶有可排序 UI 的 jQuery 拖放不起作用

Question

我目前正在嘗試使用可排序的列表項創建拖放...但是當我將可拖動項移向占位符時，它只會返回到它的位置。 任何想法我做錯了什么？

我在這里找到了這種方法，但它似乎對我不起作用。

這是我的 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 ，而不是 at
  droppable 。

• 您需要更改可排序事件的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();

});

Answer 2

請查看我所做的更改

    $(function() {

    $("#draggable li.to-drag").draggable({
    appendTo: "body",
      helper: "clone",
        revert:"invalid"
    });

    $("#dropzone1").droppable({

        drop:function( event, ui) {
alert(ui.draggable.text())
$("#dropzone").text( ui.draggable.text() ).appendTo( this );


        }

    });

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

});

額外的 div 確保您拖動到右側面板

    <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>
<div id="dropzone1" style="border:solid 1px">
    <ul id="dropzone" class="items" >

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

</ul>
</div>

需要一些調整以獲得一些額外的功能，但你應該能夠做到這一點

您將需要額外的代碼來進行排序

在此處查看此鏈接 Cheers Truez