如何获取ondrop事件的目标id?

时间:2016-07-21 19:19:18

标签: javascript drag-and-drop

我正在尝试获取被拖动项目的目标/目标的ID。我有两个容器,所以我必须获得具有拖动元素的ID。

这是我的代码:

    <div id="div1" ondrop="drop(event, this)" ondragover="allowDrop(event)"></div>
 <div id="div2" ondrop="drop(event, this)" ondragover="allowDrop(event)"></div>
    <br/>
    <img id="drag1" src="//placehold.it/336X69/ff0000" draggable="true" ondragstart="drag(event)" width="336" height="69" />
    function allowDrop(ev) {
    ev.preventDefault();
    }

    function drag(ev) {
    ev.dataTransfer.setData('Text/html', ev.target.id);
    }

function drop(ev, target) {
    ev.preventDefault();
    console.log(target.id, ev.target.id)

    var data = ev.dataTransfer.getData("text/html");
    alert(data)
}

此代码的结果返回drag1而不是div1或div2。

我错过了什么?

1 个答案:

答案 0 :(得分:1)

ev.target.id中的

drop()是对目标项的引用。

试试这段代码:

 function allowDrop(ev) {
    ev.preventDefault();
}

function drop(ev, target) {
    ev.preventDefault();
    alert(ev.target.id)
}