基于jquery 移动插件的实现
引用谢灿勇 地址 http://www.cnblogs.com/st-leslie/p/6002148.html
一个思路分析：大致上实现的思路有以下两种。
一、判断块是否被按下(mousedown)，然后在点击事件中嵌套移动事件(mousemove)，同时在里面放置一个松开的事件(mouseup)
二、跟第一种方法类似，都是分成三个事件来触发，但是不同的是：事件与事件之间没有互相嵌套，而是分成三个独立的事件，通过一个控制器（变量）来达到事件之间的交互
第一种方法是不推荐的，因为这种方法虽然直观，符合整个思考的逻辑，但是这个方法的做法相对比较复杂，而且如果有什么要改动的话也不方便。这个我们可以理解为耦合性较高。第二种方法事件逻辑简单，而且所有的事件都是分开来执行的，没有依赖关系，后期维护性较好。
以第二种方法为例我们来分析：
这里我就来讲解最为核心的计算公式的推导：
图例如下所示：
以左上角的坐标为例，假设左上角的坐标为(X0,Y0),同时我们可以计算第一次点击的位置到最终释放的位置的坐标,相对的移动距离（以X轴为例，Y轴同理）:(MousedownX1-MousedownX0),所以最终的结果相对于初始化的移动距离是：(MousedownX1-MousedownX0)+X0
其他的也没有什么好讲的，并且这个插件的思路也十分的容易实现，我相信读者都可以按照上面的分析自己实现
这里就提供我自己制作的一款拖拽插件，这款拖拽插件用法简单，而且提供了一些配置，可以在多种场景下面很方便的使用
github地址(如果觉得不错的话，请点个赞)
1、首先我们在使用的时候要引入jDrag.js文件并且确保jquery.js已经在之前被引用
2、具体使用的方法参照现在附件中的DEMO1和DEMO2
3、这款插件除了实现对点击的对象的移动功能，增加了一个功能，可以点击某个对象，但是控制其父节点移动，这个在实际业务中主要是用在如；触发弹出窗口标题，然后可以把整个 窗口拖动的效果
jDrag 插件文档
这款插件主要是为了解决日常开发上面的拖拽问题，插件的配置较为简单，也可以作为新手的插件入门案例
插件相关文章:
自己动手写插件底层篇—基于jquery移动插件实现
配置说明： drag:true, //用来指定作用的块是否可以移动
moveObject:this //默认移动的对象和点击的对象相同，但是如果是特殊情况则需要触发的对象和移动的对象不相同
上面参数的值为默认值，在使用的时候可以直接调用默认值，不需要传递参数
用法：
1. 引入jDrag.js，注意在引入的时候确保jquery.js已经加载进来
2. 初始化移动对象，例如：
$("#test").jDrag({drag:true});
上面的{drag:true}，我们也可以省略不写，但是传入其中必须为JSON数据
demo1
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>jDrag使用案例</title> | |
| </head> | |
| <body> | |
| <div style="margin-top: 100px;margin-left: 1000px;position: fixed;" class="button_group"> | |
| <button onclick="run()">运动</button> | |
| <button onclick="stop()">停止</button> | |
| </div> | |
| <div id="test" style="margin-left: 100px;background:pink;width:80px;height:80px"></div> | |
| <div id="test2" style="margin-left:200px;border:lightblue;width:150px;height:100px;"> | |
| < | |
| </div> | |
| </body> | |
| <script type="text/javascript" src="http://cdn.bootcss.com/jquery/3.1.1/jquery.js"></script> | |
| <script type="text/javascript" src="jDrag.js"></script> | |
| <script type="text/javascript"> | |
| function run(){ | |
| $("#test").jDrag({drag:true}); | |
| } | |
| function stop(){ | |
| $("#test").jDrag({drag:false}); | |
| } | |
| </script> | |
| </html> |
demo2
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Document</title> | |
| </head> | |
| <body> | |
| <div class="model" style="margin-top: 100px;margin-left: 100px;background: lightblue;width:200px;height:100px"> | |
| <div id="test" style="width:100%;height:30px;background:pink"></div> | |
| </div> | |
| </body> | |
| <script type="text/javascript" src="http://cdn.bootcss.com/jquery/3.1.1/jquery.js"></script> | |
| <script type="text/javascript" src="jDrag.js"></script> | |
| <script type="text/javascript"> | |
| $("#test").jDrag({drag:true,moveObject:".model"}) | |
| </script> | |
| </html> |
js代码如下
| $.fn.jDrag=function(options){ | |
| var default_options={ | |
| drag:true, | |
| moveObject:this | |
| }; | |
| var status=''; | |
| $(this).off(); | |
| var mouseX=0; | |
| var mouseY=0; | |
| var ElementX=0; | |
| var ElementY=0; | |
| var thisObj=document.getElementById(this); | |
| var settings=$.extend({},default_options,options); | |
| var that=settings.moveObject; | |
| if(settings.drag==false){ | |
| $(this).css("cursor","default"); | |
| }else{ | |
| $(this).css("cursor","move"); | |
| } | |
| $(this).on("mousedown",function(e){ | |
| var e=e||window.event; | |
| mouseX=e.clientX; | |
| mouseY=e.clientY; | |
| ElementX=$(this).position().left; | |
| ElementY=$(this).position().top; | |
| if(settings.drag==true){ | |
| status=true; | |
| } | |
| if(settings.drag==false){ | |
| status=false; | |
| } | |
| }); | |
| $(document).on("mousemove",function(e){ | |
| if(status==true){ | |
| var x=e.clientX-mouseX+ElementX; | |
| var y=e.clientY-mouseY+ElementY; | |
| $(that).css("margin-left",x+"px"); | |
| $(that).css("margin-top",y+"px"); | |
| } | |
| }); | |
| $(document).on("mouseup",function(e){ | |
| status=false; | |
| }) | |
| } |
基于jquery 移动插件的实现的更多相关文章
- 基于jquery fly插件实现加入购物车抛物线动画效果,jquery.fly.js
在购物网站中,加入购物车的功能是必须的功能,有的网站在用户点击加入购物车按钮时,就会出现该商品从点击出以抛物线的动画相似加入购物车,这个功能看起来非常炫,对用户体验也有一定的提高.下面介绍基于jque ...
- 基于JQuery.timer插件实现一个计时器
基于JQuery.timer插件实现一个计时器,需要的朋友可以参考下. 先去官网下载jQuery Timers插件 ,然后引用到html中.这里是1.2 version 复制代码代码如下: < ...
- 基于 jQuery Jcrop 插件的功能模块：头像剪裁
/** Jcrop version: 0.9.12 jQuery version: 1.9.0 Author: 小dee Date: 2014.10.30 */ 先看看他山之石:博客园的头像模块也是使 ...
- 基于jquery的插件turn.js学习笔记
基于jquery的插件turn.js学习笔记 简介 turn.js是一个可以实现3d书籍展示效果的jq插件,使用html5和css3来执行效果.可以很好的适应于ios和安卓等触摸设备. How it ...
- 基于jQuery日历插件制作日历
这篇文章主要介绍了基于jQuery日历插件制作日历的相关资料,需要的朋友可以参考下 来看下最终效果图吧: 是长得丑了一点,不要吐槽我-.- 首先来说说这个日历主要的制作逻辑吧: ·一个月份最多有31天 ...
- 编写基于jQuery的插件的方法
注意:jQuery中有一个extend的方法,这个方法是添加js对象字段的,下面会多次用到 1:添加全局类的方法 常用的ajax就是该类插件,下面要编写一个简单的加法和减法的基于jQuery的方法 $ ...
- 基于jquery分页插件
今天终于完成了基于jquery的分页插件的代码编写,也通过了功能测试,实现了分页功能:由于刚开始写jquery的插件,所以梳理逻辑的时间也很长,整个过程整整一周时间,今天终于搞完了,先将整个分页插件的 ...
- 基于jQuery的插件
jQuery Validation 验证框架 jQuery Form Ajax表单插件 jQuery UI插件 Easy UI
- 一款基于jQuery日历插件的开发过程
这个插件的设置选项,所有样式都设置成自定义,提供回调函数,方便在外部进行扩展 css设置是可变的 也就是说 日历的样式是定制的: /******************************** ...
随机推荐
- .Net之路（十五）图解LoadRunner压力測试
在项目编码阶段结束后,就须要进行软件測试. 成为软件开发过程中一个不可缺少的环节.而自己主动化測试也是将逐步取代人工繁杂的測试.压力測试就是软件測试对软件性能评估的一个方面,以下就简介我在使用load ...
- Altium Designer 10 | 常用库及部分元件名中英文对照表
———————————————————————————————————————————— 常用库及部分元件名中英文对照表 - - - - - - - - - - - - - - - - - - - - ...
- HDU 5407(2015多校10)-CRB and Candies(组合数最小公倍数+乘法逆元)
题目地址:pid=5407">HDU 5407 题意:CRB有n颗不同的糖果,如今他要吃掉k颗(0<=k<=n),问k取0~n的方案数的最小公倍数是多少. 思路:首先做这道 ...
- 预装WIN8改装WIN7之BIOS设置
不少预装WIN8/10的朋友觉得WIN8/10不好用,想改装WIN7,可改装之后常常出现各种问题,甚至不能启动,往往是BIOS设置不当. 本文以联想小新V2000 预装WIN8.1中文版为例,说说WI ...
- C# 播放H264裸码流
要播放H264裸码流,可以分拆为以下三个工作: 1.解码H264裸码流获取YUV数据 2.将YUV数据转换为RGB数据填充图片 3.将获取的图片进行显示 要完成工作1,我们可以直接使用海思的解码库,由 ...
- git merge rebase的区别及应用场景
前两天和同事交流发现他在日常开发中跟上游保持同步每次都是用git pull操作,而我一直习惯git fetch然后rebase,发现这两种操作后的log是有些区别的.他每次pull操作之后都会自动生成 ...
- 最小生成树之Kruskal算法和Prim算法
依据图的深度优先遍历和广度优先遍历,能够用最少的边连接全部的顶点,并且不会形成回路. 这样的连接全部顶点并且路径唯一的树型结构称为生成树或扩展树.实际中.希望产生的生成树的全部边的权值和最小,称之为最 ...
- 图像视频编码和FFmpeg(2)-----YUV格式介绍和应用
本文不讲FFmpeg,而是讲YUV图像格式.因为摄像头拍摄出来的原始图像一般都是YUV格式.在FFmpeg中,视频是通过多张YUV图像而得到. YUV图像格式是什么,这个可以看一下维基百科.这个超链接 ...
- 使用pycharm手动搭建python语言django开发环境(四) django中buffer类型与str类型的联合使用
在django中,如果用到buffer类型时,buffer的编码格式是utf-8类型.使用str()进行转为字符串类型会异常. 异常会有如下提示:'ascii' codec can't decode ...
- Python开发qq批量登陆
操作步骤: 1.打开qq软件 2.移动鼠标到qq输入处 3.在输入处,点击鼠标,输入帐号 4.模拟按下tab键,输入密码,模拟点回车登录 #coding=utf-8 import os import ...