我想在网站上添加拖放功能。我仍在学习这一点,并希望在将其添加到我的网站之前实现一个原型。
我找到了W3Schools 示例,它在他们的网站上运行良好。
我试图把这个例子移到 JSFiddle 来摆弄它。不幸的是,这个例子在那里不起作用。有谁知道问题是什么?
HTML
<body>
<p>Drag image into the rectangle:</p>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<img id="drag1" src="http://iconbug.com/data/29/128/1cc6b61217921b624db0cd6cfd6d1360.png" draggable="true" ondragstart="drag(event)" />
</body>
Javascript
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
我必须使用公共 URL 提供的图像。/
我还添加了对 img 标签的关闭。
PS:我想尽可能避免使用 JQuery。