Question

我有一个可拖动的#box div，我可以将其放在多个可放置的.ru div之一上。 #box的高度约为.ru div高度的3倍，但是，我正在使用tolerance的{{1}}选项，但似乎没有任何内容适合我想要的。

我希望.droppable根据#box的前三分之一超过其中一个droppable而悬停在其中一个dropable上。

我尝试使用#box并设置tolerance: pointer选项.draggable()，但这会让cursorAt: {top: 15}在启动拖动时跳转到新位置，我不会想。

我现在正在尝试从#box的顶部添加一个子div #test 15px，我想知道是否有一种方法可以在{{1}上激活鼠标悬停当#box超过.ru时？或者，或者，有没有一种好的方法可以让hovering激活，因为我已经描述过不使用子div？

FIDDLE： https://jsfiddle.net/joL53wkq/4/

HTML：

#test

CSS：

.ru

JS：

<div id="containment">
    <div id="box">
        <div id="test">
        </div>
    </div>
</div>

Answer 1

管理公差的功能称为 intersect ，您可以重新定义它并添加自定义公差选项。这样的东西似乎有用，它可能需要一些调整和测试，但它应该给你一些想法：

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

    if (!droppable.offset) {
        return false;
    }

    var draggableLeft, draggableTop,
        x1 = (draggable.positionAbs || draggable.position.absolute).left,
        y1 = (draggable.positionAbs || draggable.position.absolute).top,
        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;

    switch (toleranceMode) {
  case "custom":
  //you can define your rules here
            return (l < x1 + (draggable.helperProportions.width / 2) && // Right Half
                x2 - (draggable.helperProportions.width / 2) < r && // Left Half
                t < y1 && // Bottom Half
                b > y1 + 15 ); // Top Half
        case "fit":
            return (l <= x1 && x2 <= r && t <= y1 && y2 <= b);
        case "intersect":
            return (l < x1 + (draggable.helperProportions.width / 2) && // Right Half
                x2 - (draggable.helperProportions.width / 2) < r && // Left Half
                t < y1 + (draggable.helperProportions.height / 2) && // Bottom Half
                y2 - (draggable.helperProportions.height / 2) < b ); // Top Half
        case "pointer":
            draggableLeft = ((draggable.positionAbs || draggable.position.absolute).left + (draggable.clickOffset || draggable.offset.click).left);
            draggableTop = ((draggable.positionAbs || draggable.position.absolute).top + (draggable.clickOffset || draggable.offset.click).top);
            return isOverAxis( draggableTop, t, droppable.proportions().height ) && isOverAxis( draggableLeft, l, droppable.proportions().width );
        case "touch":
            return (
                (y1 >= t && y1 <= b) || // Top edge touching
                (y2 >= t && y2 <= b) || // Bottom edge touching
                (y1 < t && y2 > b)      // Surrounded vertically
            ) && (
                (x1 >= l && x1 <= r) || // Left edge touching
                (x2 >= l && x2 <= r) || // Right edge touching
                (x1 < l && x2 > r)      // Surrounded horizontally
            );
        default:
            return false;
        }

};
for(i=1; i<20; i++){
  $("#containment").append("<div class='ru'>")    
}


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


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

请参阅https://jsfiddle.net/nxkfcwpp/1/

如何获得.droppable（）的自定义容差效果？

1 个答案: