Jquery UI 调整 div 大小未放置到正确位置

Question

我有一个“盒子”，可以将其拖放到可放置的 div 列上。可拖动框使用 JqueryUI 位置函数捕捉到可放置 div，但是当我将可拖动框的大小调整为原始高度的 3 倍或更多时，我无法再将框移动一个“可放置 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 选项按“水平对齐垂直对齐”的顺序取值。默认值是“center”，这就是为什么语法错误会产生您在评论中描述的结果。只需将顺序从“左上”切换为“左上”即可。

更新:我还为 .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/