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

Question

I'm currently trying to create a drag and drop, with sortable list items... But when I'm moving the draggable item towards the placeholder, it just returns to it's place. Any ideas what I'm doing wrong?

I found this method here , but it doesn't seem to work for me.

Here is my 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>

And this is the 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();

});

Thanks for the help! :)

EDIT

This is the working 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

You've got at least three major problems:

• Draggable doesn't have connectWith , it has connectToSortable . So you should change this. See doc: http://api.jqueryui.com/draggable/

• To use connectToSortable , you need a sortable , not at
  droppable .

• You'll need to change drop event for a sortable event, receive
  maybe or update , depending on what you need.
  http://api.jqueryui.com/sortable/

It could look like this:

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

Please see the changes I have made

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

});

The additional div ensures you are dragging on to the right panel

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

Requires some tweaking to get some additional functionality but you should be able to do this

you will need additional code to do the sorting

Check out this link here Cheers Truez