我正在使用本地拖放 html5 api 开发拖放界面。我们已将 jQuery draggable 用于其他部分，但它在这个特定部分的表现不佳，因此我们将使用原始 JavaScript。
基本上标记看起来像这样......
<li draggable="true">
<div class="esia_img esia_amex"></div>
<span class="esia_imgTitle flo">AmEx</span>
</li>
<li draggable="true">
<div class="esia_img esia_visamc"></div>
<span class="esia_imgTitle flo">VisaMC</span>
</li>
我为“dragstart”创建了一个 addEventListener 并运行以下函数
function dragStart (e) {
var t = this;
n(t).addClass('rot_15');
e.dataTransfer.effectAllowed = 'move';
}
它将我的类完美地应用于原始元素，但我似乎无法移动原始元素。浏
最佳答案
(不是真正的答案，但评论太长了)
.the image gets cloned and you drag the clone.
不太清楚你的意思。我只是将示例复制/粘贴到我链接的页面上 - 没有发生任何事情。没有任何元素的复制或克隆。也许您不确定 appendChild 的操作？示例代码只是创建一个 div，然后是一个图像。您可以将图像拖放到 div 上。这会导致 img 标签现在包含在 div 中，而不是像加载时那样重排它。我还要注意，因为他们的目标 div (div id='div1') 没有内容，所以它没有高度。您应该向 div 添加一些文本以使其可见。然后，在拖放时观察 javascript 调试器中的 html 元素。页面上只有一张图片，它只是在 DOM 树中重新定位。 :)
在这里，复制/粘贴并在调试器中观看。
<!DOCTYPE HTML>
<html>
<head>
<script type="text/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));
}
</script>
</head>
<body>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
id='Div1' - Drop Target
</div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)">
id='Div2' - Drop Target
</div>
<!--
<img id="drag1" src="img/logo.gif" draggable="true"
ondragstart="drag(event)" width="336" height="69">
-->
<h1 id='drag1' draggable='true' ondragstart='drag(event)'>Drag me</h1>
</body>
</html>
关于javascript - 拖动原始元素 HTML5 拖放，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12591114/