Question

嗨我坚持在html5.i中制作拖放功能测试了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错误（＆＃34;语法错误：意外的令牌＆＃34;）并且您知道代码中的哪个位置错误是。特别是，在这一行：

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

如果您在线搜索，您会看到＆＃34; javascript字符串必须在下一个换行符之前终止＆＃34; （来自Andrew Dunn's answer to this question）。一旦错误得到解决：

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

你可以看到其他代码正常，正如你在JSFiddle上看到的那样（我在图片中添加了真实的网址，这样你就可以看到效果有效了。）

Answer 2

尝试使用此代码：

<!DOCTYPE HTML>
<html>
    <head>
        <script>
            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)"></div>

    <img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69">

</body>
</html>

字体：http://www.w3schools.com/html/html5_draganddrop.asp

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

2 个答案: