JqueryUI resized div not dropping to correct location

Question

I have a 'box' that can be dragged and dropped onto a column of droppable divs. The draggable box snaps to the droppable div using the JqueryUI position function, but when I resize the draggable box to 3x the original height or more, I can no longer move the box a single 'droppable div' lower.

$( ".ru" ).droppable({
  activeClass: "active",
  hoverClass: "hover",
  drop: function(event, ui) {
    ui.draggable.position({
      of: $(this),
      my: 'top left',
      at: 'top left'
    });
  }
});

I hope that makes sense, basically to recreate the problem, resize the draggable box to 3x the height and try to drag it 1 div down.

jsfiddle: link

Thanks for any help.

Answer 1

The my and at options take values in the order of 'horizontal-alignment vertical-alignment'. Default value is 'center', which is why the mistake in syntax has the result you describe in your comment. Simply switch the order from 'top left' to 'left top'.

UPDATED: I've also added a custom tolerance option for .droppable() so that hovering is activated on a droppable when the top of #box is over it.

$.ui.intersect = function(draggable, droppable, toleranceMode) {

  var draggableLeft, draggableTop,
    x1 = (draggable.positionAbs || draggable.position.absolute).left,
    y1 = (draggable.positionAbs || draggable.position.absolute).top + 15,
    x2 = x1 + draggable.helperProportions.width,
    y2 = y1 + draggable.helperProportions.height,
    l = droppable.offset.left,
    t = droppable.offset.top,
    r = l + droppable.proportions.width,
    b = t + droppable.proportions.height;

  return (l < x1 + (draggable.helperProportions.width) && 
    x2 - (draggable.helperProportions.width) < r && 
    t < y1 + 1 && 
    b > y1 - 1); 
};

$( "#box" ).draggable({
  revert: "invalid",
});

$( ".ru" ).droppable({
  hoverClass: "hover",
  tolerance: "custom", //added this line
  drop: function(event, ui) {
    ui.draggable.position({
      of: $(this),
      my: 'left top', //edited this line
      at: 'left top' //edited this line
    });
  }
});

Check out this UPDATED working fiddle: https://jsfiddle.net/joL53wkq/5/