Search code examples
javascriptjqueryjquery-uisortingdraggable

Is there any way to control the sorting of elements when using jquery ui

I have a sortable div (#sortable) with elements (.draggable) inside it. In there, when I sort elements from bottom to up, the elements can easily be sorted by dragging up and I don't have to drag much to the top. But when sorting elements from up to bottom, I have to drag the element far below then wanted. Is there any way to control the sorting of elements, so that even if I drag just a little bit up/below and not all the way up/down it will display the placeholder to place the element respectively?

Demo at codepen.

js

  $('#content #sortable').sortable({
    handle: '.drag_handle',
    placeholder: "ui-state-highlight",
    axis: "y"
  });

  $('#blocks .draggable').draggable({
    helper: "clone",
    revert: "invalid",
    connectToSortable: '#content #sortable'
  });

update

Sorting upwards

Sorting upwards is easy as I don't have to drag the element all the way up above the element I want to sort with.

enter image description here

Sorting downwards

Sorting downwards is difficult as I have to drag the element all the way down below the element I want to sort with.

enter image description here

Solution

  • Just change the tolerance option of the sortable API to "pointer". This option will make the draggable considered to be on the placeholder when the cursor is over it (what you need right now) instead of wait until over 50% of the element is overlapping the placeholder. This was why you had to scroll way too far down in order to sort it.

    $('#content #sortable').sortable({
    handle: '.drag_handle',
    placeholder: "ui-state-highlight",
    tolerance: "pointer"
});

    Here is the updated CodePen