JqueryUI调整div不会降低到正确的位置

2023年10月31日 201次阅读

我有一个“盒子”,可以拖放到一列可放置的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

谢谢你的帮助.

最佳答案 my和at选项按“水平对齐垂直对齐”的顺序获取值.默认值为“center”,这就是语法错误具有您在评论中描述的结果的原因.只需将订单从“左上角”切换到“左上角”即可.

更新：我还为.droppable()添加了一个自定义容差选项,以便当#box的顶部超过它时,在一个droppable上激活悬停.

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

看看这个更新的工作小提琴：https://jsfiddle.net/joL53wkq/5/

点赞