本文主要包含h5等相关知识,HXAcr希望在学习及工作中可以帮助到您
拖放时h5的标准组成部分,拖放开始执行ondragstart调用一个函数,drag(event),它规定了被拖动的数据;设置拖动数据的数据类型和值使用setData()。ondragover事件规定在何处放置被拖放的数据;ondrop方法实现拖动数据放在哪个位置上。
实现拖放(代码有误,但是没有找出来在哪
)
<div id="box1" style="width: 400px; height: 400px; background-color: #ccc;"></div> <img src="oneself.jpg" id="img1"/> <div id="msg"></div>
下面是js文件
var box1div;
var msgdiv;
var img1;
window.onload = function(){
box1div = document.getElementById("box1");
msgdiv = document.getElementBuId("msg");
img1 = document.getElementById("img1");
// box1div.ondragenter = function(e){
// showObj(e);
// }
box1div.ondragover = function(){
e.preventDefault();
}
img1.ondragstart = function(){
e.DataTransfer.setData("imgId","img1");
}
box1div.ondrop = dropImg;
}
//封装方法
function dropImg(e){
showObj(e.DataTransfer);
e.preventDefault();
//创建节点
var img = document.getElementById(e.DataTransfer.getData("imgId"));
// box1div.appendChild(img);//一个区域拖动
e.target.appendChild(img);
}
function showObj(obj){
var s = "";
for (var k in obj) {
s+=k+":"+obj[k]+"<br/>"
}
msgdiv.innerHTML = s;
}

