js鼠标拖拽事件,鼠标左键按住拖动对象

时间: 作者:admin 浏览:
//鼠标推拽事件//按住拖动对象//这里一定要传id不能传class
//	用法:BlockDrag(divId,callback(l,t))//l为对象最后的left值,t为对象最后的top值
//例子:BlockDrag("div1",function(l,t){
//			console.log(l+'|'+t)
//		})
function BlockDrag(divId,callback){
    var div=document.getElementById(divId);
    div.onmousedown=function(e){
	var e=e||event;
	var disX=e.clientX-div.offsetLeft;
	var disY=e.clientY-div.offsetTop;
	div.style.position='absolute';
	var l,t;
	document.onmousemove=function(e){
		var e=e||event;
		l=e.clientX-disX;
		t=e.clientY-disY;
		div.style.left=l+'px';
		div.style.top=t+'px';
	};
	document.onmouseup=function(){
		document.onmouseup=null;
		document.onmousemove=null;
		if(typeof callback=='function'){
		    if(l!==undefined&&t!==undefined){
			callback(l,t);
		    }
				
		}
	};
    };
}
微信公众号
微信公众号:
  • 前端全栈之路(微信群)
前端QQ交流群
前端QQ交流群:
  • 794324979
  • 734802480(已满)

更多文章

栏目文章


Copyright © 2014-2023 seozhijia.net 版权所有-粤ICP备13087626号-4