Question

我想在网站上添加拖放功能。我还在学习这个，并希望在将其添加到我的网站之前实现原型。

我找到了W3Schools example，它在网站上运行良好。

我试图将这个例子移到JSFiddle来摆弄它。不幸的是，这个例子不起作用there。有谁知道这是什么问题？

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));
}

我必须使用公共网址提供的图片。我还在img标签中添加了一个结束/。

P.S。：我想尽可能避免使用JQuery。

Answer 1

更改其工作的小提琴选项中的无包装体HERE

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));
}

Answer 2

这是一个javascript包含问题。

在框架和扩展程序中，尝试将第二个下拉菜单设置为No wrap - in <head>

为我工作。

W3School拖放示例在JSFiddle中不起作用

2 个答案: