您的位置：首页 > Web前端 > HTML5

HTML5拖放功能

2016-01-25 16:17 501 查看

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title></title>

<script type="text/javascript">

var box1div, msgDiv, img1, box2div;

window.onload = function () {

box1div = document.getElementById("box1");

box2div = document.getElementById("box2");

msgDiv = document.getElementById("msg");

img1 = document.getElementById("img1");

// 拖拽

// box1div.ondragenter = function (e) {

// showobj(e);

// }

box1div.ondragover = function (e) {

//组织系统默认操作

e.preventDefault();

}

box1div.ondrop = dropimghandler;//放下的操作

box2div.ondragover = function (e) {//拖拽操作

//组织系统默认操作

e.preventDefault();

}

box2div.ondrop = dropimghandler;

img1.ondragstart = function (e) {//启动

e.dataTransfer.setData("imgId", "img1");

}

}

function dropimghandler(e) {//放的功能

showobj(e.dataTransfer);

e.preventDefault();

var img = document.getElementById(e.dataTransfer.getData("imgId"));

// box1div.appendChild(img);添加到boxdiv种

e.target.appendChild(img);//目标div添加内容

}

function showobj(obj) {

var s = "";

for (var k in obj) {

s += k + ":" + obj[k] + "<br/>";

}

msgDiv.innerHTML=s;

}

</script>

<style type="text/css">

.box{ width:400px; height:400px;}

#box1{ background:#cccccc; float:left;}

#box2{ background:#0000ff; float:left;}

</style>

</head>

<body>

<form id="form1" runat="server">

<div id="box1" class="box">

</div>

<div id="box2" class="box">

</div>

<img id="img1" src="images/1.jpg" />

<div id="msg"></div>

</form>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航