Jquery UI resize div 没有掉落到正确的位置

Question

我有一个 'box' 可以拖放到一列可放置的 div 上。可拖动框使用 JqueryUI 位置函数捕捉到可放置的 div，但是当我将可拖动框的大小调整为原始高度的 3 倍或更多时，我无法再将框向下移动一个 'droppable div'。

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

我希望这是有道理的，基本上是为了重现问题，将可拖动框的大小调整为高度的 3 倍，然后尝试将其向下拖动 1 div。

jsfiddle: link

感谢您的帮助。

Answer 1

my 和 at 选项的取值顺序为 'horizontal-alignment vertical-alignment'。默认值为 'center'，这就是语法错误导致您在评论中描述的结果的原因。只需将顺序从 'top left' 切换为 'left top'。

更新： 我还为 .droppable() 添加了一个自定义容差选项，这样当 #box 的顶部是超过它。

$.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
    });
  }
});

查看此 已更新 工作 fiddle：https://jsfiddle.net/joL53wkq/5/