zoukankan      html  css  js  c++  java
  • 【前端 5】拖拽

    简述:实现拖拽,关键的地方:鼠标抬起(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) onmouseup=up(this,event)</span>

    二、总结


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

  • 相关阅读:
    win10 uwp 弹起键盘不隐藏界面元素
    win10 uwp 存放网络图片到本地
    win10 uwp 存放网络图片到本地
    sublime Text 正则替换
    sublime Text 正则替换
    win10 uwp 绘图 Line 控件使用
    win10 uwp 绘图 Line 控件使用
    AJAX 是什么?
    什么是 PHP SimpleXML?
    PHP XML DOM:DOM 是什么?
  • 原文地址:https://www.cnblogs.com/hhx626/p/6010303.html
Copyright © 2011-2022 走看看