<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box{position:absolute; left:100px; top:100px; padding:5px; width: 300px;height: 200px;background:#f0f3f9; font-size:12px; -moz-box-shadow:2px 2px 4px #666666; -webkit-box-shadow:2px 2px 4px #666666;}
.bar{width:100%;height: 30px;background: #ccc; }
</style>
</head>
<body>
<div id="box" class="box"><div id="bar" class="bar">拖拽</div></div>
<script src="d2.js" type="text/javascript"></script>
<script type="text/javascript">
var oBox = document.getElementById("box");
var oBar = document.getElementById("bar");
startDrag("bar", oBox,true,function(left,top){
// console.log(left);
});
</script>
</body>
</html>
/**
* 纯js实现多div拖拽
* @param bar, 拖拽触柄
* @param target, 可拖动窗口
* @param inWindow, 为true时只能在屏幕范围内拖拽
* @param callback, 拖拽时执行的回调函数。包含两个参数,target的left和top
* @returns {*}
* @private
*/
var startDrag = function(bar,target,inWindow,callback){
(function(bar,target,inWindow,callback){
var D = document,
DB = document.body,
params = {
top: 0,
left: 0,
currentX: 0,
currentY: 0
};
bar = (typeof bar == "string")?D.getElementById(bar):bar;
target = (typeof target == "string")?D.getElementById(target):target;
bar.style.cursor = "move";
bindHandler(bar,"mousedown",function(e){
e.preventDefault();
if(!e){
e = window.event;
bar.onselectstart = function(){
return false;
}
}
params.top = target.offsetTop;
params.left = target.offsetLeft;
params.currentX = e.clientX;
params.currentY = e.clientY;
var stopDrag = function(){
removeHander(bar,"mousemove",beginDrag);
removeHander(bar,"mouseup",stopDrag);
};
var beginDrag = function(e){
var evt = e?e:window.event;
var nowX = e.clientX,nowY = e.clientY;
var disX = nowX - params.currentX,disY = nowY - params.currentY;
var left = parseInt(params.left) + disX,top = parseInt(params.top) + disY;
if(inWindow){
var h = window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight;
var w = window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth;
var maxTop = h - target.offsetHeight;
var maxLeft = w - target.offsetWidth;
if(left <= 0){
left = 0;
}
if(left >= maxLeft){
left = maxLeft;
}
if(top <= 0){
top = 0;
}
if(top >= maxTop){
top = maxTop;
}
}
target.style.left = left + "px";
target.style.top = top + "px";
if(typeof callback == "function"){
callback(left,top);
}
};
bindHandler(bar,"mousemove",beginDrag);
bindHandler(document,"mouseup",stopDrag);
});
function bindHandler(elem,type,hander){
if(window.addEventListener){
elem.addEventListener(type,hander,false);
}else if(window.attachEvent){
elem.attachEvent("on"+type,handler);
}
}
function removeHander(elem,type,hander){
if(window.removeEventListener){
elem.removeEventListener(type,hander);
}else if(window.detachEvent){
ele.detachEvent("on"+type,hander);
}
}
})(bar,target,inWindow,callback);
}
效果:
完整例子:http://pan.baidu.com/s/1jI2UjHG