【前端 5】拖拽
来源:互联网 发布:手机阿里云下载 编辑:程序博客网 时间:2024/06/09 18:22
简述:实现拖拽,关键的地方:鼠标抬起(mouse-up)事件、鼠标落地(mouse-down)事件、对象的拖拽事件。那么在这个过程中,需要注意的点是:获取鼠标焦点在可视窗口的具体位置(x,y),以及各个浏览器的兼容,鼠标的可拖拽范围控制等!
本行代码表示,获取所有div的ID前缀是chooseCourse的对象,并设置其属性为可拖拽。draggable方法里面有很多的属性,包括是否可复制、拖动范围控制、透明度等等,这里因为实际情况,并没有配置任何属性!
在这个过程中要点,除了上面的之外,对于准确获取到指定一个、多个对象也是一个比较关键的地方(就跟数据库查询玩儿模糊匹配似的,唉)。在这个过程中,发现框架有些封装好的,然后自己并不知道。有了框架之后,自己又完全依赖框架,是个麻烦事!
利用框架或者语言本身提供的方法,可以大大的缩减代码,提升代码质量!
一、实现要点
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>
二、总结
在这个过程中要点,除了上面的之外,对于准确获取到指定一个、多个对象也是一个比较关键的地方(就跟数据库查询玩儿模糊匹配似的,唉)。在这个过程中,发现框架有些封装好的,然后自己并不知道。有了框架之后,自己又完全依赖框架,是个麻烦事!
利用框架或者语言本身提供的方法,可以大大的缩减代码,提升代码质量!
0 0
- 【前端 5】拖拽
- 前端5
- 前端基础5
- Web前端开发-5
- 前端笔记 CSS 5
- 前端笔记 CSS 5
- 前端基础5 表单
- web前端学习(5)
- 前端面试知识点--5
- 前端问题(5)
- web前端总结5
- 2017.9.5 滴滴前端
- 前端面试题5
- 前端
- 前端
- 前端
- 前端
- 前端
- 简单介绍Eclipse的Project相关的隐藏配置文件
- Python操作Excel
- 读文章:Motion from Structure (MfS): Searching for 3D Objects in Cluttered Point Trajectories
- 【点播】七牛点播HLS 思路
- SQLi Labs Lesson16
- 【前端 5】拖拽
- 过滤器、监听器 (过滤器)
- leetcode 371 Sum of Two Integers C++
- springBoot junit Test
- 用C#开发TUXEDO客户端
- ubuntu常用命令汇总
- 数据结构实验之队列一:排队买饭
- Java集合类排序方式之一
- windows消息机制