Перетаскивание, добавляя интервал над элементами

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

Скорректированная скрипка