前端插件之拖拽

1.拖拽的插件很多,其实我们只要明白他的原理,就不难了:

之所以形成拖拽的效果,是在鼠标按下onmousedown的时候记录鼠标坐标与被拖拽div左边界,上边界的距离disX,disY,在拖动onmousemove的时候,讲拖动时鼠标的x坐标oEv.clientX-disX;得到的这个值应该是拖动情况下,div的left;同理,投票也是:

2.js代码:

var oBox=document.getElementById('box');
	var oPut=oBox.getElementsByTagName('input')[0];
	
	 oBox.οnmοusedοwn=function(ev){
		 oEv=ev || window.event;
		 var disX=oEv.clientX-oBox.offsetLeft;
		 var disY=oEv.clientY-oBox.offsetTop;
		 
		document.οnmοusemοve=function(ev){
			oEv=ev || window.event;
			//console.log(oEv.clientX,oEv.clientY)
			var w=oEv.clientX-disX;
			var h=oEv.clientY-disY;
			oBox.style.left=w+"px";
			oBox.style.top=h+"px";
			
			if(w>document.documentElement.clientWidth-oBox.offsetWidth){
				oBox.style.left=document.documentElement.clientWidth-oBox.offsetWidth+'px';
			};
			if(w<0){
				oBox.style.left="0";
			};
			if(h>document.documentElement.clientHeight-oBox.offsetHeight){
				oBox.style.top=document.documentElement.clientHeight-oBox.offsetHeight+'px';
			};
			if(h<0){
				oBox.style.top="0";
			};
		};
		 oBox.οnmοuseup=function(){
			 document.οnmοusemοve=null;
		};
	};
	//---------------------------	
	oPut.οnmοusedοwn=function(ev){
		oEv=ev || window.event;
		oEv.cancelBubble=true;
	};
2.html代码:

<div id="box">
<input type="text">
3.css代码,当然很简单

*{margin:0;padding:0;}
#box{width:200px;height:200px;background:#ccc;position:absolute;}


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值