本文主要包含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; }