jQuery拖放,可排序的UI无法正常工作

时间:2015-06-16 14:37:05

标签: javascript jquery jquery-ui

我正在尝试使用可排序列表项创建拖放...但是当我将可拖动项目移向占位符时,它只会返回到它的位置。我有什么想法吗?

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

这是我的HTML:

$(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();

});

感谢您的帮助! :)

修改

这是有效的jQuery:

Get-ChildItem

2 个答案:

答案 0 :(得分:2)

你至少有三个主要问题:

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

  • 要使用connectToSortable,您需要sortable,而不是< 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();

});

答案 1 :(得分:0)

请查看我所做的更改

    $(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>

需要一些调整来获得一些额外的功能,但你应该能够做到这一点

您需要额外的代码才能进行排序

查看此链接here 干杯 Truez