H5 drag和drop拖放
拖放是html5的标准，任何元素都能够拖放
html：
<div class="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
<img src="img/2.jpg" draggable="true" ondragstart="drag(event)" id="drag1" /> //设置元素可拖放
</div>
<div class="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
js：
function drag(ev) { //ondragstart拖动开始
ev.dataTransfer.setData("ok", ev.target.id); //设置元素属性
}
function allowDrop(ev) { //ondragover拖动结束
ev.preventDefault(); //默认不许放置，阻止默认
}
function drop(ev) { //ondrop放置
ev.preventDefault();
var data = ev.dataTransfer.getData("ok"); //加入元素
ev.target.appendChild(document.getElementById(data));
}
原生js
1、拖拽的流程动作
鼠标按下 触发onmousedown事件
鼠标移动 触发onmousemove事件
鼠标松开 触发onmouseup事件
2、注意事项：
要防止div移出可视框，要限制div移动的横纵坐标；
防止火狐的bug, 要在最后写上return false，阻止默认事件；
防止鼠标运动时移出div，所以要用document.onmousemove和document.onmouseup，不能用oDiv.onmousemove;
3、代码实现：
html：
<div id='box' style="position:relative;width:100px;height:100px;background:#ee735c;"> <!--为了设置left、top，需相对或绝对定位-->
可拖动div元素
</div>
js：
window.onload = function() {
var box = document.getElementById('box')
box.onmousedown = function(e) { //首先要获取鼠标相对于元素的位置
var disX = e.clientX - box.offsetLeft //clientX,Y鼠标相对于浏览器窗口可视区域的X，Y坐标（窗口坐标）
var disY = e.clientY - box.offsetTop //offsetLeft,top是元素相对父元素的偏移宽度
document.onmousemove = function(e) {
var l = e.clientX - disX
var t = e.clientY - disY
if(l < 0) { //防止div跑出可视框
l = 0;
} else if(l > document.documentElement.clientWidth - box.offsetWidth) {
l = document.documentElement.clientWidth - box.offsetWidth;
}
if(t < 0) {
t = 0;
} else if(t > document.documentElement.clientHeight - box.offsetHeight) {
t = document.documentElement.clientHeight - box.offsetHeight;
}
box.style.left = l + 'px';
box.style.top = t + 'px';
}
document.onmouseup = function() {
document.onmousemove = null;
document.onmouseup = null
}
return false
}
}
