Draggable adding spacing above elements

Question

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>

score 0 · Answer 1 · answered Jan 28 '15 at 00:20

0

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

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

Adjusted Fiddle

answered Jan 28 '15 at 00:20

matthias_h

11,356
9
22
40

I was wondering if you would be able to help me out with a similar problem when using draggable in R shiny. I've tried the css code from this post, but it doesn't seem to help. If you can have a look, I would be grateful! https://stackoverflow.com/questions/57287579/distorted-spacing-between-div-elements-after-sorting-with-jqui-sortable – Mark Aug 01 '19 at 11:45

Draggable adding spacing above elements

1 Answers1

Linked