Question

我对JavaScript和JQuery很陌生，希望你能帮我解决我的问题。

我想将div放在几个较小的tr上，然后得到div所覆盖的最高值。但似乎JQuery在div的中心选择了tr。

是否有一种更简单的方法可以在不使用div的高度来计算顶部tr的情况下实现这一点，那是什么？

也许我只是做错了什么或遗失了什么。

HTML：

<table border="1">
    <tr>
        <td class="droppable" data-time="08:00:00" style="width: 30px;"></td>
    </tr>
    <tr>
        <td class="droppable" data-time="09:00:00"></td>
    </tr>
    <tr>
        <td class="droppable" data-time="10:00:00"></td>
    </tr>
    <tr>
        <td class="droppable" data-time="11:00:00"></td>
    </tr>
    <tr>
        <td class="droppable" data-time="12:00:00"></td>
    </tr>
    <tr>
        <td class="droppable" data-time="13:00:00"></td>
    </tr>
    <tr>
        <td class="droppable" data-time="14:00:00"></td>
    </tr>
    <tr>
        <td class="droppable" data-time="15:00:00"></td>
    </tr>
</table>
<div class="draggable" style="width: 30px; height: 100px; background: green;"></div>

JQuery的：

$(function () {
    $(".draggable").draggable({
    });
    $(".droppable").droppable({
        drop: function (event, ui) {
            $(this).effect("highlight", {}, 1500);
        }
    });
});

作为jsfiddle

提前致谢！

Answer 1

我编辑了你的小提琴

$(function () {
var dropped = false;
$(".draggable").draggable({
});
$(".droppable").droppable({
    tolerance: 'touch',
    drop: function (event, ui) {
        if(false === dropped) {
            $(this).effect("highlight", {}, 1500);
            dropped = true;
        }
    },
    activate: function(event,ui){
         dropped = false;   
    }
});

}）;

在这里小提琴：http://jsfiddle.net/4L3Lf/

问题来自于drop函数被触发的时间与tr一样多（使用公差触摸时）。

Answer 2

API文档可能很有用： http://api.jqueryui.com/droppable/#option-tolerance有几种方法可以通过给定的属性和方法对您想要的行为进行编码。

示例：更改“触摸”的容差。使用对象的位置和偏移数据选择适当的元素以突出显示。

jquery drop div on multiple droppable tds但仅使用最高

2 个答案: