19

I'm having an issue with jQuery sortables. I'm using it to develop an iGoogle-like dashboard by creating 3 columns. All 3 contain sortable divs and are connected to each other using the connectWith option.

The issue I'm having is when trying to drop a div at the bottom of a sortable column; it just doesn't want to happen. It only works if I drag it over/past the bottom-most div that's already in the list I'm dragging to.

Is there any way to avoid this? Or maybe to create a dummy div fixed at the bottom of each column? ANY help on this would be MUCH appreciated!

Thanks in advance.

2 Answers 2

49

Old question but maybe to help others...

Padding works but changes your visual treatment.

Another solution is to use 'tolerance' provided by the sortable api. A tolerance value of 'pointer' means that as long as the users cursor is over one of the other elements the item can replace its position (instead of being a certain amount of space over the element which is the reason you have trouble without padding).

Try adding this to your initialization (in my example I am sorting a list vertically).

      $(this.$el).sortable({
            axis: 'y',
            cursor: 'move',
            containment: 'parent',
            tolerance: 'pointer' // this is the important bit
        });

It should be very snappy after you do that.

Also you can see the jquery doc on it here: http://api.jqueryui.com/sortable/#option-tolerance

4
  • Makes a lot of sense. Helped me a lot with a sortable grid. Mar 7, 2014 at 6:19
  • Just what I was looking for. Stackoverflow rocks!
    – Red Virus
    May 5, 2016 at 9:52
  • The issues, as has been noted elsewhere, relies on where your cursor is when you start to drag the object. Whether its in the upper or lower part of the object and whether you go up or down. This answer solves the problem. Thanks @bryce
    – fezfox
    Jul 31, 2016 at 12:46
  • Nice find! Thank you! Oct 10, 2017 at 21:24
10

The columns that contain the divs need a reasonably large padding-bottom to extend the draggable area beyond the bottom div. Otherwise, the columns hug the divs tightly and the area underneath each bottom div lies outside the sortable list.

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.