JavaScript拖拽
html拖拽的思路如下：鼠标按下 > 鼠标移动 > 鼠标弹起，只要把这三个鼠标事件添加到对应的dom元素上，作相应的处理就行了。
1、mousedown事件须加在可拖动dom上；
2、mousemove事件加在document上；
3、mouseup事件还是加在可拖动dom上；
注意：拖拽的时候要禁止选中页面文字
body{
-moz-user-select:none;
-webkit-user-select:none;
user-select:none;
-ms-user-select: none;
}
JavaScript代码如下：
var component = {};
component.Drag = (function() {
//私有方法
function drag(that) {
var oDrag = that.drag,
move = that.move,
limit = that.limit,
callBack = that.callBack,
isDrag = false;
oDrag.onmousedown = function() {
isDrag = true;
addMove(doDrag);
document.onmouseup = function() {
isDrag = false;
removeMove();
};
};
oDrag.onmouseup = function() {
isDrag = false;
removeMove();
document.onmouseup = null;
};
function doDrag(e) {
e = event || window.event;
if(!isDrag) return false;
var top = e.clientY - (move.parentNode == document.body ? 0 : oDrag.parentNode.offsetTop) - oDrag.offsetHeight/2,
left = e.clientX - (move.parentNode == document.body ? 0 : oDrag.parentNode.offsetLeft) - oDrag.offsetWidth/2;
if(limit){
var minX = limit[0],
minY = limit[1],
maxX = limit[2],
maxY = limit[3];
if(top >= maxY) {
top = maxY;
} else if(top <= minY) {
top = minY;
}
if(left >= maxX) {
left = maxX;
} else if(left <= minX) {
left = minX;
}
}
move.style.top = top + 'px';
move.style.left = left + 'px';
if(callBack) {
callBack.call(doDrag,top,left);
}
};
};
//移除事件
function removeMove() {
if(document.removeEventListener) {
document.removeEventListener('mousemove');
} else {
document.detachEvent('onmousemove');
}
}
//添加事件
function addMove(doDrag) {
if(document.addEventListener) {
document.addEventListener('mousemove',doDrag);
} else {
document.attachEvent('onmousemove',doDrag);
}
}
var O = function() {};
O.prototype.init = function(config) {
this.drag = config.drag; //必须参数：拖动对象
this.move = config.move || config.drag; //可选参数：如果可拖动对象与拖动对象是同一html标签，可以不传入move参数
this.limit = config.limit || false; //可选参数：限制拖动范围，参数为数组形式[x,y]；不传入则为不限制拖动范围
this.callBack = config.callBack || false; //可选参数：传入一个函数，用于即时针对滑块偏移量做处理
drag(this);
return this;
};
return O;
})();
html代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>拖拽</title>
</head>
<style>
*{margin:0;padding:0;}
body{
-moz-user-select:none;
-webkit-user-select:none;
user-select:none;
-ms-user-select: none;
}
div{user-select:none;}
.poa{position:absolute;}
.por{position:relative;}
.drag1{background:#ddd;border:2px solid #999;display:block;width:50px;height:50px;cursor:move;left:0;top:0;}
.drag2{width:40px;height:40px;background:#dcdcdc;display:block;left:150px;top:100px;cursor:move;}
.div1{border:5px solid gray;font:italic 42px/400px 'Microsoft Yahei';color:#ccc;height:400px;width:400px;margin-left:55px;text-align:center;position:relative;}
.showMsg{position:absolute;width:250px;height:150px;left:500px;top:300px;}
.showMsg h1{font:bold 28px/38px '';color:#555;text-indent:20px;background:#ddd;cursor:move;}
.showMsg div{background:#f4f4f4;font:22px/55px '';text-align:center;}
.div2{height:20px;width:400px;border:1px solid #ddd;background:#f4f4f4;margin:5px;position:relative;}
.drag4{display:block;width:30px;height:20px;position:absolute;left:0;right:0;cursor:move;background:gray;}
p{font:18px/30px arial;color:#555;}
p span{font-size:28px;color:#f63;padding:0 5px;}
</style>
<body>
<span class="poa drag1" id="drag1"></span>
<div class="div1">拖不出去，相信我<span class="poa drag2" id="drag2"></span></div>
<div class="showMsg" id="showMsg">
<h1 id="drag3">hello！</h1>
<div>this is a window！</div>
</div>
<br>
<div class="div2" id="div2"><span class="drag4" id="drag4"></span></div>
<p><span id="num">0</span>%</p>
<script src="component.js"></script>
<script>
var doc = document,
drag = new component.Drag(),
num = doc.getElementById('num');
//简单拖动
drag.init({
drag : doc.getElementById('drag1')
});
//范围拖动
drag.init({
drag : doc.getElementById('drag2'),
//第一对数字为左上方坐标，第二对为右下方坐标，这两个点规定了滑块可以拖动的范围
limit :[0,0,360,360]
});
//窗口拖动
drag.init({
drag : doc.getElementById('drag3'), //可拖动dom
move : doc.getElementById('showMsg') //实际偏移dom
});
//复杂应用，根据滑块偏移量作处理
drag.init({
drag : doc.getElementById('drag4'),
limit :[0,0,370,0],
//依靠这个回调函数可以在拖动的时候即时获取偏移量,便于针对偏移量即时做一些处理
callBack : function(top,left) {
num.innerHTML = parseInt(left/3.7);
}
});
</script>
</body>
</html>
