Question

I’m making a project, it’s a simple todo list. You can drag tasks and rearrange it, i have set the tasks containment to be the div containing them.

But when you want to put a task at the top, and you simply drag it to the top, the container div stop it from going above the current task at the top.

I want to modify sortable plugin, to add an extra 10px on the top and the bottom, so the task don’t stop exactly at the top of the div, but beyond it with 10px and the same goes to the bottom of the container div.

Try it yourself to understand what i mean. here. Add several tasks and try to put some task at the top of the container.

I tried to modify sortable using the development bundle, i got to those lines but didn’t know what to modify exactly:

   if(!(/^(document|window|parent)$/).test(o.containment) && o.containment.constructor != Array) {
       var c = $(o.containment);
       var ce = c[0]; if(!ce) return;
       var co = c.offset();
       var over = ($(ce).css("overflow") != 'hidden');

       this.containment = [
           (parseInt($(ce).css("borderLeftWidth"),10) || 0) + (parseInt($(ce).css("paddingLeft"),10) || 0),
           (parseInt($(ce).css("borderTopWidth"),10) || 0) + (parseInt($(ce).css("paddingTop"),10) || 0),
           (over ? Math.max(ce.scrollWidth,ce.offsetWidth) : ce.offsetWidth) - (parseInt($(ce).css("borderLeftWidth"),10) || 0) - (parseInt($(ce).css("paddingRight"),10) || 0) - this.helperProportions.width - this.margins.left - this.margins.right,
           (over ? Math.max(ce.scrollHeight,ce.offsetHeight) : ce.offsetHeight) - (parseInt($(ce).css("borderTopWidth"),10) || 0) - (parseInt($(ce).css("paddingBottom"),10) || 0) - this.helperProportions.height - this.margins.top  - this.margins.bottom
       ];
    this.relative_container = c;

    }

Answer 1

Hmmm, It seems that i have solved it, to anyone having this issue add this option to the sortable :

tolerance: "pointer"

This is the way the reordering behaves during drag. Possible values:
‘intersect’, ‘pointer’. In some setups, ‘pointer’ is more natural.

• intersect: draggable overlaps the droppable at least 50%
• pointer: mouse pointer overlaps the droppable

Strangely, intersect is the default value, where it could be much better to make pointer is the default one.