标签：
拖放（Drag和drop）是HTML5标准的组成部分。
ondragstart：调用了一个函数，drag（event），它规定了被拖动的数据
setData（）：设置被拖数据的数据类型和值。
ondragover：事件规定在何处放置被拖动的数据。
ondrop:当放置被拖放数据时，会发生drop事件
ondragstart:用户开始拖动元素时触发
ondrag:元素正在拖动时触发
ondragend:用户完成元素拖动后触发
ondragenter:当被鼠标拖动的对象进入其容器范围内时触发此事件
ondragover:当某被拖动的对象在另一对象容器范围内拖动时触发此事件
ondragleave:当被鼠标拖动的对象离开其容器范围内时触发此事件
ondrop:在一个拖动过程中，释放鼠标键时触发此事件
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>drop</title><style>.box{width: 400px;height: 400px;}#box1{float: left;background-color: #CCCCCC;}#box2{float: left;background-color: aqua;}</style><script src="app.js"></script></head><body><div id="box1" class="box"></div><div id="box2" class="box"></div><img id="img1" src="1.PNG" alt=""><div id="msg"></div></body></html>
var box1Div, msgDiv, img1, box2Dib;window.onload = function () {box1Div = document.getElementById("box1");msgDiv = document.getElementById("msg");img1 = document.getElementById("img1");box2Div = document.getElementById("box2");box1Div.ondragover = function (e) {e.preventDefault();}box2Div.ondragover = function (e) {e.preventDefault();}img1.ondragstart = function (e) {e.dataTransfer.setData("imgId","img1");}box1Div.ondrop = dropImghandler;box2Div.ondrop = dropImghandler;function dropImghandler(e) {//创建节点var img = document.getElementById(e.dataTransfer.getData("imgId"));e.target.appendChild(img);}}function showObj(obj) {var s = "";for(var k in obj){s+=k+":"+obj[k]+"<br/>";}msgDiv.innerHTML = s;}
标签：
原文地址：http://blog.csdn.net/tangxiaolang101/article/details/51319986
