2

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

我想在几个较小的 tr 上放置一个 div 并获得 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>

查询：

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

作为jsfiddle

提前致谢！

4

2 回答 2

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 被覆盖的次数一样多（使用公差触摸时）。

于 2013-08-06T12:41:59.090 回答
0

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

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

于 2013-08-06T12:17:01.417 回答