【前端 5】拖拽

版权声明:每天进步一点点——我也只是写着玩儿——随便转随便评 https://blog.csdn.net/u013034889/article/details/52209041
简述:实现拖拽,关键的地方:鼠标抬起(mouse-up)事件、鼠标落地(mouse-down)事件、对象的拖拽事件。那么在这个过程中,需要注意的点是:获取鼠标焦点在可视窗口的具体位置(x,y),以及各个浏览器的兼容,鼠标的可拖拽范围控制等!

一、实现要点

1.1,让指定对象可拖拽

<span style="font-family:KaiTi_GB2312;font-size:18px;">$("div[id^='chooseCourse']").draggable();</span>

本行代码表示,获取所有div的ID前缀是chooseCourse的对象,并设置其属性为可拖拽。draggable方法里面有很多的属性,包括是否可复制、拖动范围控制、透明度等等,这里因为实际情况,并没有配置任何属性!


1.2,(mouse-down)克隆当前对象,供下次拖拽

<span style="font-family:KaiTi_GB2312;font-size:18px;"> function DragObj(){
	 var flag=0
	 var x=0;
	 var y=0
 }
 var dEvt=new DragObj();
 function down(obj,cloneId){
	 dEvt.flag=1;
	 dEvt.x=obj.offsetLeft;
	 dEvt.y=obj.offsetTop;
	 //复制一个当前控件,并且放到获取的位置上
	 var sourceNode=document.getElementById(cloneId);
 	var i="a";
	var cloneNode=sourceNode.cloneNode(true);
	var newCloneId=cloneId+i;
	cloneNode.setAttribute("id",newCloneId);
	sourceNode.parentNode.appendChild(cloneNode);
	
	$("div[id='"+cloneNode.id+"']").draggable();
	
 }</span>

1.3,(mouse-up)执行鼠标抬起时的事件

在这个步骤中,需要控制拖拽范围和获取鼠标抬起时的位置:

<span style="font-family:KaiTi_GB2312;font-size:18px;"> function up(obj,event){
	 //获取当前的位置
	 //获取每一行的位置,获取每一列的位置object.offsetLeft
	 var txt=obj.innerText;
	 var id=obj.id;


	 obj.hidden=true;
	 var x=event.pageX;
	 var y=event.pageY;
	 var getNode=document.elementFromPoint(x,y);
	 
	//拖动有效范围的最左边(执行弹框)
	 var X1 = $('#Firstone').offset().top;
	 var Y1= $('#Firstone').offset().left;
	//拖动有效范围的最右边(执行弹框)
	 var X2 = $('#Seventhfive').offset().top;
	 var Y2= $('#Seventhfive').offset().left;
		
	 if(x<Y1 || x>Y2){
		 return;
	 }
	 
	 if(y<X1 || y>X2){
		 return;
	 }
}</span>

1.4,代码调用

<span style="font-family:KaiTi_GB2312;font-size:18px;">onMouseDown=down(this,id) οnmοuseup=up(this,event)</span>

二、总结


在这个过程中要点,除了上面的之外,对于准确获取到指定一个、多个对象也是一个比较关键的地方(就跟数据库查询玩儿模糊匹配似的,唉)。在这个过程中,发现框架有些封装好的,然后自己并不知道。有了框架之后,自己又完全依赖框架,是个麻烦事!
利用框架或者语言本身提供的方法,可以大大的缩减代码,提升代码质量!

展开阅读全文

没有更多推荐了,返回首页