如何在javascript中获取拖动元素的id?

时间:2014-02-22 05:46:56

标签: javascript drag

我想在放置事件处理程序中的 javascript 中获取拖动元素的ID。

div with id place5是可拖动的,drop location是另一个id为id dropArea的div。

在drop事件处理程序中如何获取div(place5)的id?

<html>
<head>

<style>
.mainArea{
      width: 500px; 
          height : 500px; 
          border-color:red; 
          border-style:solid; 
          border-width:5px;
}
</style>
<script>
    function dragEventHandler(theEvent) {
        theEvent.dataTransfer.setData("Text", theEvent.target.id);
        //Some code here.
    }
    function dropEventHandler(theEvent) {
        //how to get the id of div with id "place5" here?
    }
</script>
</head>
<body>
<div id="dropArea" class="mainArea" ondrop="dropEventHandler(event);" ondragover="event.preventDefault();>

</div>

    <div id="place5" draggable="true" ondragstart="dragEventHandler(event);">
    </div>
    </body>
    </html>

1 个答案:

答案 0 :(得分:4)

执行与拖动开始事件期间所做操作相反的操作。

所以在dragstart上你有:

function dragEventHandler(theEvent) {
    theEvent.dataTransfer.setData("Text", theEvent.target.id);
    //Some code here.
}

因此,你会得到:

function dropEventHandler(theEvent) {
    var id = theEvent.dataTransfer.getData("Text");
    //Other code here.
}