javascript - 如何在 html 5 中创建拖放功能？

Question

嗨，我坚持在 html5 中制作拖放功能。我在 chrome 上测试了代码，当我尝试将其放在我为放置代码而制作的区域时
它显示一个停止标志作为箭头。我实际上制作了一个带边框的部分框，其中有一些文本，当我将图像放入其中时，我想更改这些文本。

这是我的js代码:

function doFirst(){
pic = document.getElementById('pic1');
pic.addEventListener("dragstart", startDrag , false);
left = document.getElementById('left1');
left.addEventListener("dragenter", function(e){e.preventDefault();}, false);
left.addEventListener("dragover", function(e){e.preventDefault();} , false);
left.addEventListener("drop", dropped , false);
}

function startDrag(e){
   var code = '<img id="pic1" src="D:\tuna\11264353_959682364063264_630153199_n.jpg" />';
   e.dataTransfer.setData('hello', code);
}

function dropped(e) {
    e.preventDefault();
    left.innerHTML = e.dataTransfer.getData('hello');
}

window.addEventListener("load", doFirst , false);

Answer 1

首先，一条建议:了解如何调试和使用现代浏览器提供的开发人员工具(特别是控制台)(如果您愿意，也可以使用 Firebug/Web 开发扩展)。

如果您检查了控制台，那么您会发现代码抛出了 JS 错误(“语法错误:意外的标记”)，并且您会知道错误在代码中的位置。特别是在这一行:

var code = '<img id="pic1"  
src="D:\tuna\11264353_959682364063264_630153199_n.jpg" />';

如果您在线搜索，您会看到“javascript 字符串必须在下一个换行符之前终止”(来自 Andrew Dunn's answer to this question )。一旦错误被修复:

var code = '<img id="pic1" src="D:\tuna\11264353_959682364063264_630153199_n.jpg" />';

你的代码的其余部分工作正常，正如你在这个 JSFiddle 上看到的那样(我在图片中添加了真实的 URL，以便您可以看到效果)。