JQuery UI Ziehbare von außerhalb des Fensters zurückzukehren

Question

probabely dies eine sehr einfache Frage, aber ich bin ein Anfänger in JQuery ...

Ich habe folgendes 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> 

Und das ist, was mein Körper enthält:

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

Nun meine Frage: ich habe den grauenin der Lage sein wollen, ziehenvon der roten <div> in den blauen <div>. Es funktioniert tatsächlich, aber die grauen <li> werden immer von außerhalb des Fensters in den blauen <div> zurückfallen, wenn ich sie fallen lasse. Warum passiert das? Ist es möglich, dass meine <li> von wo ich sie fallen lassen?

Vielen Dank für Ihre Hilfe!

Answer 1

Ich glaube, ich die Lösung gefunden:

Das Problem ist, dass die <li> in dem blauen div mit dem CSS-Stil an die neuen <ul> angehängt bekommen hat er vor ge angehängt wurde.

Nach dem Löschen der <li> in die neue <ul id="schub">, hat es immer noch die CSS von Jquery, die etwa links ist: -1000px; (Das bekommt man, weil wir die <li> von rechts nach links ziehen). Dann wird es an die neue ul angehängt. Der Browser denkt, dass die <li> ist ein Element der <ul id="schub"> mit links: -1000px; Das ist außerhalb des Fensters. Die Definition wird zurückgesetzt: wahr; ist auf die <li> gesetzt, so dass es von außerhalb des Fensters in die <ul id="schub"> zurückkehrt.

Ich fand eigentlich keine Lösung, sondern ein Problem zu umgehen:

wir die Definition Helfer hinzufügen: ‚Klon‘ zum <li>. So bekommen wir einen Klon des Originals. Es wird tatsächlich nicht von dem Punkt zurückgesetzt, an dem wir es fallen lassen, sondern es wird an das neue <ul> angehängt, ohne von außerhalb des Fensters zurückzukehren.