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

我有一个可拖放的

#box

div，可以放到多个可拖放的

.ru

div中的一个上。然而，

#box

的高度大约是

.ru

div高度的3倍，因此我正在使用

.droppable

的

公差

选项，但似乎没有任何东西符合我的要求

我希望

#box

悬停在其中一个下拉列表上，这取决于

#box

的上三分之一在其中一个下拉列表上的时间

我尝试使用

tolerance:pointer

并设置

.draggable（）

选项

cursorAt:{top:15}

，但这会使

#box

在开始拖动时跳转到新位置，这是我不希望看到的

我现在正在尝试添加一个子div，

#test

15px，从

#box

的顶部开始，我想知道当

#test

超过

.ru

时，是否有一种方法可以在

.ru

上激活悬停？或者，有没有一种很好的方法可以让悬停激活，就像我描述的那样，不使用子div

小提琴：

#box {
    background-color: teal;
    width: 500px;
    height: 92px;
    position: absolute;
    z-index: 50;
}  

#test{
    position: relative;
    top: 15px;
    width: 100%;
    height: 1px;
    background-color: blue;
}

#containment {
    background-color: #ddd;
    width: 500px;
    height: 800px;
}

.ru {
    background-color: red;
    width: 500px;
    height: 30px;
    margin-top: 1px;
}

.hover {
    background-color: yellow;
}

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

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

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

HTML:

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

JS:

#box {
    background-color: teal;
    width: 500px;
    height: 92px;
    position: absolute;
    z-index: 50;
}  

#test{
    position: relative;
    top: 15px;
    width: 100%;
    height: 1px;
    background-color: blue;
}

#containment {
    background-color: #ddd;
    width: 500px;
    height: 800px;
}

.ru {
    background-color: red;
    width: 500px;
    height: 30px;
    margin-top: 1px;
}

.hover {
    background-color: yellow;
}

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

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

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

---

对于（i=1；i管理公差的函数称为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'
    });
  }
});

$.ui.intersect=函数（可拖动、可拖放、公差模式）{
如果（！droppable.offset）{
返回false；
}
变量draggableLeft，draggableTop，
x1=（draggable.positionAbs | | draggable.position.absolute）。左，
y1=（draggable.positionAbs | | draggable.position.absolute）。顶部，
x2=x1+draggable.helperProportions.width，
y2=y1+draggable.helperProportions.height，
l=droppable.offset.left，
t=可下拉的.offset.top，
r=l+可下拉比例宽度，
b=t+可下降高度；
开关（公差模式）{
案例“海关”：
//你可以在这里定义你的规则
返回（ly1+15）；//上半部分
案例“适合”：
返回（l）