Have To Add Spacer Element To Enabling Drag and Drop to First Destination Location

[evolross]

I'm using this library in two places in my project.

1. To drag and drop a <ul> of <li> elements
2. To drag and drop a set of <div> elements

In both situations, I have to create a dummy, very small spacer element before the first draggable element (an <li> in the first example and a <div> in the second) or I am unable to drag into the "first" available location. I can drag the first element to any location but I can't drag any other elements to the first location. It will never show the placeholder element in the first destination location. The dummy element must also be the draggable class.

My original code looks like:

HTML:

<ul class="sortable-elements">
   <li class="drag-element">Element 1</li> 
   <li class="drag-element">Element 2</li> 
   <li class="drag-element">Element 3</li> 
   <!-- More elements... -->
</ul>

JS:

//  sortableClass is "sortable-elements"
var initSortable = function(sortableClass) {

  var sortableList = $(sortableClass);
  sortableList.sortable('destroy');
  sortableList.sortable({
    placeholder: '<li class="placeholder">&nsbp;</li>',
    hoverClass: 'cursor-move',
    draggingClass: 'cursor-move',
    forcePlaceholderSize: true,
    items: '.drag-element',
    dragImage: null
  });
  sortableList.sortable().off('sortupdate');
  sortableList.sortable().on('sortupdate', function(event, result) {
    //  Update server with new order - works fine.
  });

  $('.drag-element').on('dragstart', function (ev) {
    var dt = ev.originalEvent.dataTransfer;
    // In IE browsers, setDragImage does not exist. However, the issue we are 
    // trying to fix does not happen in these browsers. So if setDragImage is not
    // available, then just don't do anything.
    if (dt.setDragImage) 
      dt.setDragImage(ev.target, 0, 0);
  });
};

Same setup with set of divs. The dragging all works fine. I just cannot drag to the first location. It happens in all browsers.

It seems like the html5sortable code needs a "spacer" object - something before the first draggable element - that you hover over for it to recognize the first destination location.

So to get it to work I have to update my HTML to this:

<ul class="sortable-elements">
   <!-- Added "spacer" element to fix the issue -->
   <li class="drag-element">&nbsp;</li> 
   <li class="drag-element">Element 1</li> 
   <li class="drag-element">Element 2</li> 
   <li class="drag-element">Element 3</li> 
   <!-- More elements... -->
</ul>

It's not a big deal, except it took me forever to realize I needed to do this. And I worry that because the spacer element has to be the draggable class too, that it may be accidentally dragged. Though in my tests, this doesn't seem to happen.

[lukasoppermann]

Hey, this might have to do with this: #172

The fix might be to check if the item the draggedItem is dragged onto is the first and if so, check if it is on the top 48% if so the placeholder has to be before, otherwise after.

I would really appreciate a PR. Thanks.

[pinta83]

If it's related to issue #172 then you have the answer there ;)
Works for meh :)