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>