Draggable adding spacing above elements

问题

The following is the code and my problem is that after you have dragged one element to the sortable area, the next element you add upon hovering over the sortable area it ads some kind of spacing top of the sortable area and i dont want this to happen. I cannot find it in my code.

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>

回答1:

The added space upon hovering on the sortable area doesn't occur when you add

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

Adjusted Fiddle

来源：https://stackoverflow.com/questions/28180970/draggable-adding-spacing-above-elements