검도 UI 드롭 이벤트 중 요소의 ID를 얻는 방법은 무엇입니까?

Question

다음 HTML을 가지고 있으며 끌어서 놓기 이벤트에 관련된 요소의 DOM 요소를 가져오고 싶습니다. 또한 디버거를 사용하여 이것을 어떻게 파악할 수 있는지 말해 줄 수 있다면 더 좋을 것입니다!

<div class="dragArea" id="choice1">proud</div> 
<div class="dragArea" id="choice2">strong</div> 
<div class="dragArea" id="choice3">merry</div> 
<div class="dragArea" id="choice4">friendly</div> 
<div class="dropArea k-header" id="gap1">Drop here</div> 
<div class="dropArea k-header" id="gap2">Drop here</div> 
<div class="dropArea k-header" id="gap3">Drop here</div> 
<div class="dropArea k-header" id="gap4">Drop here</div> 
<script>   
    $(".dragArea").kendoDraggable({ 
     group: "choicesGroup", 
     hint: function (element) { 
      return element.clone(); 
     } 
    }); 
    $(".dropArea").kendoDropTarget({ group: "choicesGroup", drop: onDrop }); 

    function onDrop(e) { 
     // How do i get the id of the elements involved in the drag and drop event? 

    } 
    </script> 

Answer 1

function onDrop(e) { 
    // Get the id of the elements involved in the drag and drop event 
     var source = $(e.draggable.element).attr('id'); 
     var target = e.dropTarget.attr('id'); 
}