封装按住鼠标拖拽松开停止。

var LY = {
//封装阻止事件冒泡方法
stopBubble : function(event){
if(event.stopPropagation){
event.stopPropagation();
}else{
event.cancelBubble = true;
}
},
//封装阻止默认事件
cancelHandler : function(event){
if(event.preventDefault){
event.preventDefault();
}else{
event.returnValue = false;
}
},
//封装为元素添加绑定事件
addEvent : function(elem , type , handle){
if(elem.addEventListener){
elem.addEventListener(type , handle ,false)
}else if(elem.attachEvent){
elem.attachEvent('on' + type , function(){
handle.call(elem);
})
}else{
elem['on' + type] = handle;
}
},
//封装鼠标点击拖拽松开停止事件
drag : function(elem){
var disX ,
dixY ;
this.addEvent(elem , 'mousedown' , function(e){
var event = e || window.event;
disX = event.pageX - parseInt(elem.style.left);
disY = event.pageY - parseInt(elem.style.top);
LY.addEvent(document , 'mousemove' , mouseMove);
LY.addEvent(document , 'mouseup' , mouseUp);
})
function mouseMove(e){
var event = e || window.event;
elem.style.left = event.pageX - disX + "px";
elem.style.top = event.pageY - disY + "px";
}
function mouseUp(e){
var event = e || window.event;
document.removeEventListener('mousemove',mouseMove,false)
document.removeEventListener('mouseup',mouseUp,false)
}
},
}

调用时直接LY.drag(elem元素)即可 。兼容各大浏览器，纯原生写法，无需引入任何库。

最后

以上就是复杂刺猬为你收集整理的封装按住鼠标拖拽松开停止。的全部内容，希望文章能够帮你解决封装按住鼠标拖拽松开停止。所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。