How to fix wrongly positioned draggable helpers for connected sortables (partially caused by floated/relative positioned parent elements)?

Question

Preface

I\'m experiencing a problem where the draggable helper is being offset incorrectly, when using draggables + sortables that are placed in floating, relative pos

Answer 1

see https://jsfiddle.net/tsLcjw9c/1/

I put a fixed width on the draggables list (100px) so that the draggable helper has the same width as the list items, this prevents the initial horizontal offset.

the big horizontal offset you got while dragging over the sortable container indeed seems to be a bug in jquery UI but it also seems to be exactly 100% of the width of the sortable container, which is why I added the following css:

.sortable .ui-draggable-dragging:not(.ui-sortable-helper){
    margin-left:100%;
}

The vertical offset that you got after entering and leaving the sortable lists seemed to be caused by the draggable items' margin of 4px, which I removed. You can reach the same effect with a transparent border and box-sizing:border-box; or either add a padding and set background-clip to padding-box.

Lastly the 600ms animation that you wanted to happen upon dropping the items happened in a strange way in my browser (Chrome), it went to 2 different locations before finally animating towards the correct place. This is why I now disabled the animation. You can try to override the drop event in the sortable jQuery, so that you manually animate towards the correct location.

Here the jsfiddle code:

html

  

    

      

        

          

            
sortable 1
            
sortable 2
            
sortable 3
            
sortable 4
            
sortable 5
            
sortable 6
          
        
        

          

            
sortable 1
            
sortable 2
            
sortable 3
            
sortable 4
            
sortable 5
            
sortable 6
          
        
        

          

            
sortable 1
            
sortable 2
            
sortable 3
            
sortable 4
            
sortable 5
            
sortable 6
          
        
      
    

    

      

        
draggable 1
        
draggable 2
        
draggable 3
      
    
  

jquery

$('.sortable').sortable({
  connectWith: '.sortable',
  revert: 0,
  forcePlaceholderSize: true,
  placeholder: 'ui-sortable-placeholder',
  tolerance: 'pointer'
}).disableSelection();

$('.draggable').draggable({
  connectToSortable: '.sortable',
  helper: 'clone',
  revert: false
}).disableSelection();

css

.sortable-container {
  display: inline-block;
  width: 100px;
  vertical-align: top;
}
.sortable {
  cursor: move;
  margin: 0;
  padding: 0;
  list-style-type: none;
  vertical-align: top;
  border: 1px solid #000;
}
.ui-sortable-placeholder {
  background: #ff0000;
}
#draggables {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.draggable {
  cursor: move;
  color: #fff;
  background: #5dd1ff;
    width:100px;
    max-width:100%;
}
.sortable .ui-draggable-dragging:not(.ui-sortable-helper){
    margin-left:100%;
}