Question

我有一个＆＃39;框＆＃39;可以拖放到一个可放置的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选项按照＆＃39;水平对齐垂直对齐＆＃39;的顺序获取值。默认值为＆＃39; center＆＃39;，这就是语法错误具有您在评论中描述的结果的原因。只需从左上方切换订单即可。到了顶部＆＃39;。

更新：我还为.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
    });
  }
});

查看 UPDATED 工作小提琴：https://jsfiddle.net/joL53wkq/5/

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

1 个答案: