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>

JScode

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窗格上设置它可以工作（需要小的调整）。

检查这个小提琴：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;
        }

带有显示ID的Html5 drap and drop问题

1 个答案: