Jquery UI Draggable вернуться из-за пределов окна

Question

Probabely это очень простой вопрос, но я новичок в Jquery ...

Я следующий сценарий:

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

И это то, что мой Body содержит:

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

Теперь мой вопрос: Я хочу, чтобы иметь возможность перетащить серый <li> от красного <div> в синий <div>. Он действительно работает, но серый <li> всегда возвращается извне окна в синий <div>, когда я их бросаю. Почему это происходит? Разве не возможно, что мои <li> вернутся с того места, где я их бросаю?

Большое спасибо за помощь!

Answer 1

Я думаю, я нашел решение:

Проблема заключается в том, что <li> становится добавляется к новому <ul> в синем DIV со стилем CSS он имеет, прежде чем GE получил прилагается.

После удаления <li> в новый <ul id="schub"> у него все еще есть css из Jquery, который находится примерно влево: -1000px; (он получает это, потому что мы перетаскиваем <li> справа налево). Затем он присоединяется к новой ul. Браузер считает, что <li> является en элементом <ul id="schub"> с левым: -1000px; который находится вне окна. Определение revert: true; установлен на <li>, поэтому он возвращается извне окна в <ul id="schub">.

Я на самом деле не нашел решение, но обходной путь:

Мы можем добавить помощник определения: «клон» в <li>. Таким образом, мы получаем клон оригинала. На самом деле он не возвращается с той точки, в которой мы его бросаем, но добавляем его к новому <ul>, не возвращаясь извне окна.