//调用该函数时传的参数是对象
// 如 :dragable({
// down:p, //点击的元素
// target : div, //移动的目标元素
// ranger: div, //其有定位的父元素
// moving : function(x,y){ //移动时要执行的函数
//
// },
// ending :function(){ //结束时要执行的函数
// console.log("拖拽结束");
// }
// })
function dragable(options){
var father=options.ranger||window;//设定其有定位的父元素
options.down.onmousedown=function(e){
var e=e||event;
var pos={
x:e.offsetX,
y:e.offsetY
};
document.onmousemove=function(e){
var e=e||event;
var maxleft=father.offsetWidth||window.innerWidth;
var maxtop=father.offsetHeight||window.innerHeight;
var _left=Math.max(0,Math.min(maxleft-options.target.offsetWidth,e.pageX-pos.x-getPagePosition(father).left));
var _top=Math.max(0,Math.min(maxtop-options.target.offsetHeight,e.pageY-pos.y-getPagePosition(father).top));
options.target.style.margin="0px";//如果有margin,将margin设为0
options.target.style.left=_left+"px";
options.target.style.top=_top+"px";
options.moving?options.moving(_left,_top):"";
}
}
document.onmouseup=function(){
document.onmousemove=null;
options.ending?options.ending():"";
}
}
//计算元素在页面的绝对位置
function getPagePosition(target){
var sumleft=target.offsetLeft;
var sumtop=target.offsetTop;
while(target.offsetParent != null){
sumleft+=target.offsetParent.offsetLeft;
sumtop+=target.offsetParent.offsetTop;
target=target.offsetParent;
}
return {
left:sumleft,
top:sumtop
};
}
元素拖动(外部封装函数)
最新推荐文章于 2021-03-26 10:22:44 发布