转自: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 ...
随机推荐
- 类库探源——System.Configuration 配置信息处理
按照MSDN描述 System.Configuration 命名空间 包含处理配置信息的类型 本篇文章主要两方面的内容 1. 如何使用ConfigurationManager 读取AppSetting ...
- win7音量控制图标不见了怎么办啦?
1.打开程序管理器(ctrl+alt+delete)2.在进程那里找到"explorer.exe",然后按结束进程(此时工具栏会消失)3.然后在文件(程序管理器左上角),点击&qu ...
- redis基本数据类型【3】-List类型
列表类型采用双向链表实现的,借助列表类型redis还可以作为队列使用,一个列表类型key最多能容纳2^32-1个元素 1.向列表两端增加元素 #向左边增加元素,返回增加后列表的长度 lpush key ...
- Python GUI with Tkinter (from youtube) 在youtube上能找到很多编程视频...
Python GUI with Tkinter - 1 - Introduction以上链接是一个python tkinter视频系列的第一讲的链接.虽然英语不好,但是,程序还是看得懂的(照着做就可以 ...
- ECHO is off
执行 batch 脚本: @ECHO OFF @ECHO @ECHO !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! Alert !!!!!!!!!!!!!!!!!!!!!!! ...
- ASP.NET设计模式(一)、适配器模式、依赖注入依赖倒置、空对象模式
鸟随凤鸾,人伴贤良,得以共之,我之幸也.说的是鸟随着鸾凤可以飞的更高远,人和比自己境界高的相处,自己也会得到熏染进步. 一.概述 分享出来简单的心得,望探讨 依赖倒置 依赖注入 Adapter模式 N ...
- JavaScript符串中每个单词的首字母大写化
map() + replace() function titleCase(str) { var convertToArray = str.toLowerCase().split(" &quo ...
- tmux复制到windows剪贴板/粘贴板的坑
以下所有操作都是在windows下面用putty连接linux centos6的情景下. 一直很纳闷为什么在tmux模式下不能把复制到的文字放到系统的粘贴板里面呢?通过层层阻碍,终于找到了原因. 去掉 ...
- XStream简单使用01——xml和Ojbect互转
package org.zhb.test; /** * author : zhb * data : 2014-2-14 * use packages: * xmlpull-1.1.3.1.jar * ...
- 在Django中使用Mako模板
用了一个月后,终于忍受不了Django的模板了.主要原因是模板内不能运行原生的python语句,所以用起来总感觉被人绑住手脚,遍历个字典都要搞半天. 所以决定用第三方的模板.查了一下,django用的 ...