jquery drop 여러 개의 삭제 가능 tds에서 div 만 사용 최고

Question

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> 

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

을 편집

}); 여기

바이올린 : http://jsfiddle.net/4L3Lf/

문제는 그럴 필요가 덮여으로 (허용 터치를 사용하는 경우) 많은 시간으로 해고 된 기능을 떨어 사실에서왔다.