Jquery UI Draggable revert from outside of window

Question

Probabely this is a very simple question but i am a beginner in Jquery...

I have following Script:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js">/script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.js">

    </script>

    <script>
         $(function() {

            $('li').draggable({
                containment: 'document',
                revert: true
            });


            $("#config").droppable({
                drop: function(event, ui) {
                $(ui.draggable).appendTo( "#schub" );
                }
            });

        });


    </script>

And this is what my Body contains:

    <div style="width:1800px; height:600px; background-color:#efefef;padding:10px;" >
    <div style="float:left; width:1250px; height:580px; border:1px solid grey; padding:10px;" >
        <div id="config" style="background-color:blue; border:1px solid black; width:700px; height:500px;">

            <ul id="schub" style="width:300px;  height:500px;"></ul>

        </div>
    </div>

<div style=" background-color:red;float:left; width:490px; height:580px; border:1px solid grey; margin-left:10px;padding:10px;" id="menu">
    <ul class="category">

        <li  class="dragg"  style="background-color:#e6e6e6; border:1px solid black; width:150px; height:98px;">
        </li>

        <li class="dragg" style="background-color:#e6e6e6; border:1px solid black; width:150px; height:98px;">
        </li>

        <li  class="dragg"  style="background-color:#e6e6e6; border:1px solid black; width:150px; height:98px;">
        </li>

    </ul>

</div>

Now my issue: I want to be able to drag the grey <li> from the red <div> into the blue <div>. It actually works but the grey <li> are always reverting from outside of the window into the blue <div> when i drop them. Why is that happening?? Isnt it posible that my <li> revert from where i drop them?

Thanks very much for your help!

score 1 · Accepted Answer · answered Apr 14 '12 at 13:45

I think i found the solution:

The problem is, that the <li> is getting appended to the new <ul> in the blue div with the css style he has before ge got appended.

After dropping the <li> into the new <ul id="schub">, it has still the css from Jquery which is about left:-1000px; (it gets that because we drag the <li> from right to left). Then its getting appended to the new ul. The browser thinks that the <li> is en element of the <ul id="schub"> with left:-1000px; which is outside of the window. The definition revert:true; is set on the <li> so it is reverting from outside of the window into the <ul id="schub">.

I actually didn't find a solution, but a workaround:

We can add the definition helper: 'clone' to the <li>. Like that we get a clone of the original. Its actually not reverting from the point we drop it but its getting appended to the new <ul> without reverting from outside of the window.

You are correct in the explanation, however there is a solution and that is to _correct_ the position of the dropped element in the `drop()` method. It's a bit of a hack if you can't use `helper: 'clone'` for any reason. Have a look at the demo in my answer on http://stackoverflow.com/questions/9949049/jquery-ui-droppable-how-to-actually-change-the-html — andyb, Apr 14 '12 at 19:56

Jquery UI Draggable revert from outside of window

1 Answers1