Перетаскиваемый добавочный интервал над элементами

Question

Ниже приведен код, и моя проблема заключается в том, что после того, как вы перетащили один элемент в сортируемую область, следующий элемент, который вы добавляете, зависает над сортируемой областью, он рекламирует некоторый промежуток времени сортировки и я не хочу, чтобы это произошло. Я не могу найти его в своем коде.

http://jsfiddle.net/j7xv4he4/

 <meta charset="UTF-8"> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js" ></script> 
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script> 

<style> 
.wrapper { width: 700px; height: 500px; margin: auto; } 
.wrapper > h5 { padding: 0; margin: 0; } 
.wrapper > div { margin-bottom: 15px; border: 1px solid #aaa; } 
.item-wrapper { position: relative; padding: 3px; color: #555; display:inline-block;padding:10 25px;} 
.item-wrapper:nth-child(even) { background-color: #f8f8f8; } 

.drag-handle { position: absolute; left: 0; right: 0; top: 0; bottom: 0; cursor: move; } 
.item-container { position: relative; text-align: center; cursor: move; } 
.drop-container .item-container { cursor: default; } 
.sort-container{height:50px;} 
.sort-container .item-container { } 
.sort-container div{display:inline-block;} 
.item-wrapper.mx-state-moving { background-color: #fcefa1; color: #000; } 
.drag-container .item-wrapper.mx-content-hover { background-color: #cce0ff; color: #000;} 
.drop-container.mx-content-hover { background-color: #ccff99; } 
.sort-container .drag-handle.mx-content-hover { border-color: #cce0ff; } 
.sort-container .item-wrapper.mx-content-hover { color: #000; } 
</style> 

<br/> 

<div class="wrapper"> 

    <h5>Draggable</h5> 
    <div class="drag-container ui-corner-all"> 
     <div class="item-wrapper"> 
     <div class="item-container">hǎo</div> 
     </div> 

     <div class="item-wrapper"> 
     <div class="item-container">?</div> 
     </div> 


     <div class="item-wrapper"> 
     <div class="item-container">ma</div> 
     </div> 

     <div class="item-wrapper"> 
     <div class="item-container">nǐ</div> 
     </div> 


    </div> 


    <h5>Sortable</h5> 
    <div class="sort-container ui-corner-all"> 


    </div> 


</div> 

<script> 
    var items = 4; 
    function fixHelper(e, ui) { 
     var $ctr = $(this); 
     ui.helper 
     .addClass('mx-state-moving ui-corner-all') 
     .find('.mx-content-hover') 
      .removeClass('mx-content-hover') 
      .end(); 
    } 

    function toggleHover(e) { 

    } 

    sdCfg = { 
     cursor: 'move', 
     zIndex: 200, 
     opacity: 0.75, 
     handle: '.drag-handle', 
     scroll: false, 
     containment: 'window', 
     appendTo: document.body, 
     helper: 'clone', 
     start: fixHelper 
    }; 

    $('.drag-container') 
     .find('.item-wrapper').draggable({ 
     cursor: 'move', 
     zIndex: 200, 
     opacity: 0.75, 
     scroll: false, 
     containment: 'window', 
     appendTo: document.body, 
     helper: 'clone', 
     connectToSortable: '.sort-container', 
     start: fixHelper 
     }).hover(toggleHover); 



    $('.sort-container') 
     .sortable({ 
      containment: 'parent', 
      handle: '.item-container', 
      tolerance: 'pointer', 
      helper: 'clone', 
      start: fixHelper, 
      update: function (e, ui) { 
        if (ui.item.find('.drag-handle').length == 0) { 
        //$('.drag-container .item-container').html('Item ' + (++items)); 
        ui.item 
         .find('.item-container') 
          .before($('<div class="drag-handle">')) 
          .parent() 
         .draggable(sdCfg) 
         .hover(toggleHover) 
         .find('.drag-handle') 
        $(this).sortable('option', 'containment', 'parent'); 
        } 
       } 
     }).find('.item-wrapper') 
     .draggable(sdCfg) 
     .hover(toggleHover) 
     .find('.drag-handle'); 


</script> 

Answer 1

Добавленного пространство при наведении на сортируемую области не происходит, когда вы добавляете

.sort-container .item-wrapper {float:left;} 

Скорректированной Fiddle