javascript - Html5 拖放显示 id 的问题

Question

我正在尝试显示使用 html5 拖放的控件的 id。我想弄清楚我哪里做错了？这是我的fiddle

我试图确保控件即使在拖放后仍位于同一位置。

<div id="div1" 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" />
<div>
    <input type="text" id="textbox1" draggable="true">
</div>

JS代码

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

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

function drop(ev, target) {
    alert(data)
    ev.preventDefault();
    console.log(target.id, ev.target.id)
    var data = ev.dataTransfer.getData("text/html");    
}

CSS代码

#div1 {
  width: 350px;
  height: 70px;
  padding: 10px;
  border: 1px solid #aaaaaa;
}

Answer 1

你的代码很好，问题是当你在 HTML 上设置事件时 jsFiddle 。

如果您在 javascript Pane 中设置它，它就可以工作(需要进行小的调整)。

检查这个 fiddle :http://jsfiddle.net/1227vf9t/14/

HTML:

<div id="div1"></div>
<br/>
<img id="drag1" src="//placehold.it/336X69/ff0000" draggable="true" width="336" height="69" />
<div>
    <input type="text" id="textbox1" draggable="true">
</div>

JavaScript:

   var div1 = document.getElementById("div1");
    var drag1 = document.getElementById("drag1");
    var textbox1 = document.getElementById("textbox1");

    div1.addEventListener("drop",drop,false);
    div1.addEventListener("dragover",allowDrop,false);

    drag1.addEventListener("dragstart",drag,false);

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

        function drag(ev) {
            console.log("drag", ev);
            ev.dataTransfer.setData('text/html', ev.target.id);
        }

        function drop(ev) {
            console.log("drop",ev);
            ev.preventDefault();
            var data = ev.dataTransfer.getData("text/html");
            textbox1.value = data;
        }