HTML5:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#div1 {width:488px;height:300px;padding:10px;border:1px solid #aaaaaa;}
</style>
</head>
<body>
<div id="div1" about="区域1" ondrop="drop(ev)" ondragover="allowDrop(ev)"></div>
<br />
<img id="pic" src="end.jpg" draggable="true" ondragstart="drag(ev)">
<script src="test6_0408.js"></script>
</body>
</html>
JavaScript:
/**
* Created by Administrator on 2015/4/8.
*/
var eg={};
eg.$=function(id){
return document.getElementById(id);
};
eg.addListener=function(target,type,handler){
if(target.addEventListener){
target.addEventListener(type,handler,false);
}else if(target.attachEvent){
target.attachEvent("on"+type,handler);
}else{
target["on"+type]=handler;
}
};
window.onload=function() {
var div1 = eg.$("div1");
var pic = eg.$("pic");
eg.addListener(pic, dragstart, function () {
eg.drag(ev);
});
eg.addListener(div1, dragover, function () {
eg.allowDrop(ev);
});
eg.addListener(div1, drop, function () {
eg.drop(ev);
});
eg.drag = function (ev) {
ev.dataTransfer.setData("Text", ev.target.id);
};
eg.allowDrop = function (ev) {
ev.preventDefault();
};
eg.drop = function (ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
};
};
HTML5拖拽,图片无法拖动到指定区域,为什么,代码如下
第1个回答 2015-04-09
首先,引入类库,你的dragstart和其它几个action都没有定义,如果类库里有,引一下