博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
JQuery拖拽插件
阅读量:7118 次
发布时间:2019-06-28

本文共 702 字,大约阅读时间需要 2 分钟。

一直以来,都对JS获取元素的位置感到非常的困惑:一会client、一会offset、一会scroll。

再加上各大浏览器之间的不兼容,唉,搞得哥晕晕乎乎的。

而很多页面效果都要用到这些位置。不得已,得练练,得记记。

下面就来说说这个基于 JQuery的简易拖拽插件吧。   

按惯例,先说说拖拽的原理,以及搞这么一个东东的步骤:

那什么是拖拽呢? 看名字就知道了:就是把一个东东拖来拽去的。 放到我们的DOM上,就是改变它的位置。

它只有两个难点:1、如何知道是在拖? 2、如何知道从哪拖,拖到哪?

其实,这也算不上难点,毕竟两者都是基础的东西,关键在于熟练。

换到js 中,我们搞一个拖拽效果,大致有如下步骤:

1、让元素捕获事件(一般情况下,无非就是mousedown、mousemove、mouseup)

2、在mousedown时,标记开始拖拽,并获取元素及鼠标的位置。

3、在mousemove时,不断的获取鼠标的新位置,并通过相应的位置算法,来重新定位元素位置。

4、在mouseup时,结束拖拽。。。然后周而复始。

这中间,个需要注意的地方:被拖拽的元素,至少需要相对或绝对定位,否则拖拽不会有效果。

OK,不多说,无代码,无真相。相应的解释都在其中了:

   
Jeremy - DragDrop Test !

 

转载自:McJeremy

转载于:https://www.cnblogs.com/ahjesus/archive/2012/03/07/2383354.html

你可能感兴趣的文章
python设计模式之单例模式
查看>>
Pandas里面dataframe 中loc和iloc函数的区别
查看>>
MySql 常用函数
查看>>
java日志框架log4j详细配置及与slf4j联合使用教程
查看>>
java ArrayList中的subList方法
查看>>
java 7 的新特性
查看>>
Android设备新型恶意软件,融合银行木马、键盘记录器和移动勒索软件等功能
查看>>
SpringBoot使用jsp
查看>>
爬取了陈奕迅新歌《我们》10万条评论数据发现:原来,有些人只适合遇见
查看>>
如何在win10系统上安装linux子系统
查看>>
Android零基础入门第68节:完善RecyclerView,添加首尾视图
查看>>
mcs-51单片机CPU的内部结构及工作原理
查看>>
深浅copy
查看>>
eclipse运行maven项目,tomcat启动报错
查看>>
kali 安装grub theme
查看>>
Ubuntu安装JDK,搭建java环境
查看>>
AFNetworking框架下的SSL服务器证书的自定义验证
查看>>
redis——哈希(hash)
查看>>
开启Restful
查看>>
区块链100讲:带你走进EOS的存储系统
查看>>