转自:http://www.muzilei.com/archives/136
如何实现拖动效果?
浏览DEMO
首先分析下拖动效果原理:
1.当鼠标在被拖动对象上按下鼠标(触发onmousedown事件,且鼠标在对象上方)
2.开始移动鼠标(触发onmousemove事件)
3.移动时更显对象的top和left值
4.鼠标放开停止拖动(触发onmouseup事件)
注意:拖动的对象必须是定位对象(即设置了position:absolute或 relative)。
也就是说拖动事件=onmousedown事件+onmousemove事件
整个过程就是处理这三个事件来模拟drag事件
现在看看我实现的源代码:
html代码:
2 |
< p class = "title" >标题(点击标题拖动)</ p > |
6 |
< p class = "title" >标题</ p > |
jquery插件代码:
2 |
$.fn.drag= function (options){ |
11 |
var opts = $.extend(defaults, options); |
17 |
//handler如果没有设置任何值,则默认为移动对象本身,否则为所设置的handler值 |
18 |
handler=opts.handler?$( this ).find(opts.handler):$( this ), |
19 |
_this=$( this ), //移动的对象 |
24 |
.mousemove( function (event){ |
25 |
// console.log(isMove); |
29 |
var eX=event.pageX,eY=event.pageY; |
32 |
_this.css({ 'left' :eX-dx, 'top' :eY-dy}); |
40 |
_this.fadeTo( 'fast' , 1); |
41 |
//console.log(isMove); |
45 |
//当按下鼠标,设置标记变量isMouseDown为true |
46 |
.mousedown( function (event){ |
48 |
//判断最后触发事件的对象是否是handler |
49 |
if ($(event.target).is(handler)){ |
52 |
$( this ).css( 'cursor' , 'move' ); |
54 |
//console.log(isMove); |
55 |
_this.fadeTo( 'fast' , opts.opacity); |
58 |
dx=event.pageX-parseInt(_this.css( "left" )); |
59 |
dy=event.pageY-parseInt(_this.css( "top" )); |
调用方法:
5 |
handler:$( '.title' ), //操作拖动的对象,此对象必须是移动对象的子元素 |
浏览DEMO
- 使用jquery实现简单的拖动效果,分享源码
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAkEAAAERCAIAAADzAOSQAAALRklEQVR4nO3dW5LaaAKEUfa/NkfMGu
- jquery 最简单的动画效果
<p style="border: 1px solid red"> 我会慢慢变大 </p> <a>dianji</a> <sc ...
- jquery简单的拖动效果
<!DOCTYPE html> <html> <meta http-equiv="Content-Type" content="text/h ...
- jquery 超简单的点赞效果
1.HTML(可以优化一下,尽量少些几个标签.....) <div id="dianz"> <b class="cz"><em&g ...
- js:简单的拖动效果
效果演示:https://jsfiddle.net/dwqs/b5ywws9f/embedded/result/ html: <div class="wrap"> &l ...
- jquery div拖动效果示例代码
div拖动效果想必大家都有见到过吧,实现的方法也是有很多的,下面为大家将介绍使用jquery是如何实现的,感兴趣的朋友不要错过 复制代码代码如下: <%@ page language=" ...
- JQuery(二)——简单动画效果
上一篇博客总结了JQuery的一些基本知识,这篇博客重点从JQuery能够制造各种各样的网页效果方面来进行总结.总结一些常见的常用的基本效果的必备方法.从隐藏显示,淡入淡出,滑动,动画等几个方面来简单 ...
- Jquery简单的placeholder效果
Jquery简单的placeholder效果 由于IE6-IE9不支持HTML5中的placeholder,所以自己依赖于Jquery简单的写了一个,供参考! 先看看效果吧!如下JSFiddle地址 ...
- 一行代码轻松实现拖动效果[JQuery]
写JS实现拖动需要一大堆不便维护的代码,实属麻烦,Google了大半天,发现了一个优秀的Jquery插件EasyDrag,只需要一行代码便可轻松在主流浏览器上 实现拖动效果. $(document ...
随机推荐
- css滚动条样式
1.横向滚动条:(abeamScroll) <div style="width:400px;height:200px;overflow-x:auto;overflow-y:hidden ...
- checkbox 选择一个checkbox,其他checkbox也会选择
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xht ...
- bzoj1485:[HNOI2009]有趣的数列
思路:首先限制数很多,逐步来考虑,限制一很容易满足,考虑限制二,也就是让奇数位和偶数位上的数递增,限制三就是让奇数位上的数小于奇数位加一对应的偶数位上的数,那么我们可以把形成序列的过程看成加数的过程, ...
- 线段树(单点更新)HDU1166、HDU1742
在上一篇博文里面,我提到了我不会线段树,现在就努力地学习啊! 今天AC一题感觉都很累,可能是状态不佳,在做HDU1166这题目时候,RE了无数次. 原因是:我的宏定义写错了,我已经不是第一犯这种错误了 ...
- 使用SqlBulkCopy批量插入多条数据进入表中
由于工作中项目需求结算一次生成一批相同批次号的数据插入一个表中,然后再通过另一页面展示出来,所以需要用到一次性插入一批数据,所以就采用了SqlBulkCopy插入一批数据 1 public stati ...
- 数据结构学习——shell排序的C语言实现
shell排序: 这个排序的命名是来自发明者的名字,和排序的方法没有字面上的联系.所以不要因为名字而感觉很难.在K&R的C程序设计语言中书中只用了几行代码很简洁的实现了这个排序算法.那就来看看 ...
- 深入了解line-height
1.定义 行高:两行文字baseline(基线)之间的距离 示意图: 2.为何line-height可以让单行文本垂直居中 其实并没有垂直居中,除非将font-size:0; 3.li ...
- SQL Server中count(*), count(col), count(1)的对比
让我们先看一下BOL里面对count(*)以及count(col)的说明: COUNT(*) 返回组中的项数.包括 NULL 值和重复项. COUNT(ALL expression) 对组中的每一行都 ...
- 青瓷qici - H5小游戏 抽奖机 3 效果设置
现在是万事俱备,只欠东风,好,我们一起动手,先来东风东. 烟花粒子效果 第一个来实现我们的烟花粒子效果,点击我们的粒子,按照下图方式配置. 注意此时我们已经加入了white.png作为粒子特效使用. ...
- string内存管理
本人从事.net开发快两年了,一直认为鄙人的C++基础还是很扎实的,并且对Windows操作系统也有一定认识(Linux系就真比较少用),刚毕业的时候,也曾经经常研究游戏破解之类的小外挂,那时候真是折 ...