jquery drop div on multiple droppable tds but use only highest

Question

I'm quite new to JavaScript and JQuery and hope you can help me with my problem.

I want to drop a div over several smaller tr and get the highest one covered by the div. But it seems that JQuery selects the tr at the center of the div.

Is there an easier way to make this happen without using the height of the div to calculate the top tr, thats covered?

Maybe I'm just doing something wrong or missing something.

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);
        }
    });
});

As jsfiddle

Thanks in advance!

Answer 1

The API documentation may be useful: http://api.jqueryui.com/droppable/#option-tolerance There are several ways to code your wanted behaviour by the given properties and methods.

Example: Change tolerance to "touch". Use position and offset data of your objects to select the proper element for highlighting.

Answer 2

I edited your fiddle

$(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;   
    }
});

});

Fiddle here: http://jsfiddle.net/4L3Lf/

The problem came from the fact that drop function was fired as many time as tr was covered (when using tolerance touch).