jquery drop div на нескольких droppable tds, но используйте только самые высокие

Question

Я довольно новичок в JavaScript и JQuery и надеюсь, что вы можете помочь мне с моей проблемой.

Я хочу сбросить div на несколько меньших tr и получить самый высокий, покрытый div. Но кажется, что JQuery выбирает tr в центре div.

Есть ли более простой способ сделать это, не используя высоту 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

Документация по API может быть полезна: http://api.jqueryui.com/droppable/#option-tolerance Существует несколько способов кодирования вашего желаемого поведения заданными свойствами и методами.

Пример: изменение допуска на «касание». Используйте данные позиции и смещения ваших объектов, чтобы выбрать нужный элемент для выделения.

Answer 2

Я отредактировал скрипку

$(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 здесь: http://jsfiddle.net/4L3Lf/

Проблема возникла из-за того, что падение функции был уволен, как много времени, как тр было покрыто (при использовании прикосновения допуска).