序言

本章作为自己动手写插件的第一篇文章,会尽可能的详细描述一些实现的方式和预备知识的讲解,随着知识点积累的一点点深入,可能到了后期讲解也会有所跳跃。所以,希望知识点不是很扎实的读者或者是初学者,不要跳读。因为在这里即使是你已经掌握的知识,重新的阅读也会使你的记忆更加的深刻。还有作者才疏学浅,如果有什么地方讲解错的话,希望各位能够斧正。另外,博主近期发现有某些人未经本人的允许,私自引用本人的文章。更离谱的是还没有标注署名和来源,在此,特此声明,本系列教程为博主与【博客园】共同所有,如需引用请注明出处

一、预备知识

这个系列的文章至少需要掌握HTML5的一些新的特性和CSS3的新特性,同时还需要各位能够掌握基础的JS操作和jquery操作。

在以上都知识点都掌握的基础上,推荐还不是很清楚jquery插件是怎么回事的同学可以看一下我之前的一篇文章: jQuery插件编写精讲与技巧

二、思路分析

说到这一个思路分析:大致上实现的思路有以下两种。

一、判断块是否被按下(mousedown),然后在点击事件中嵌套移动事件(mousemove),同时在里面放置一个松开的事件(mouseup)

二、跟第一种方法类似,都是分成三个事件来触发,但是不同的是:事件与事件之间没有互相嵌套,而是分成三个独立的事件,通过一个控制器(变量)来达到事件之间的交互

第一种方法是不推荐的,因为这种方法虽然直观,符合整个思考的逻辑,但是这个方法的做法相对比较复杂,而且如果有什么要改动的话也不方便。这个我们可以理解为耦合性较高。第二种方法事件逻辑简单,而且所有的事件都是分开来执行的,没有依赖关系,后期维护性较好。

以第二种方法为例我们来分析:

这里我就来讲解最为核心的计算公式的推导:

图例如下所示:

以左上角的坐标为例,假设左上角的坐标为(X0,Y0),同时我们可以计算第一次点击的位置到最终释放的位置的坐标,相对的移动距离(以X轴为例,Y轴同理):(MousedownX1-MousedownX0),所以最终的结果相对于初始化的移动距离是:(MousedownX1-MousedownX0)+X0

其他的也没有什么好讲的,并且这个插件的思路也十分的容易实现,我相信读者都可以按照上面的分析自己实现

三、拖拽插件下载

这里就提供我自己制作的一款拖拽插件,这款拖拽插件用法简单,而且提供了一些配置,可以在多种场景下面很方便的使用

github地址(如果觉得不错的话,请点个赞)

四、插件用法说明

1、首先我们在使用的时候要引入jDrag.js文件并且确保jquery.js已经在之前被引用

2、具体使用的方法参照现在附件中的DEMO1和DEMO2

3、这款插件除了实现对点击的对象的移动功能,增加了一个功能,可以点击某个对象,但是控制其父节点移动,这个在实际业务中主要是用在如;触发弹出窗口标题,然后可以把整个 窗口拖动的效果

2016年12月6日

1、修复了当页面出现滚动条而导致的拖动异常的bug

五、总结

本节作为自己动手写插件系列文章的第一篇,这篇文章旨在给大家一个入门的例子来体会到学习插件制作的乐趣。同时本系列会不连续的更新。预计明年年底完成本系列的所有文章。

自己动手写插件底层篇—基于jquery移动插件实现的更多相关文章

  1. 基于jquery 移动插件的实现

    引用谢灿勇 地址  http://www.cnblogs.com/st-leslie/p/6002148.html 一个思路分析:大致上实现的思路有以下两种. 一.判断块是否被按下(mousedown ...

  2. 基于jQuery日历插件制作日历

    这篇文章主要介绍了基于jQuery日历插件制作日历的相关资料,需要的朋友可以参考下 来看下最终效果图吧: 是长得丑了一点,不要吐槽我-.- 首先来说说这个日历主要的制作逻辑吧: ·一个月份最多有31天 ...

  3. 基于JQuery.timer插件实现一个计时器

    基于JQuery.timer插件实现一个计时器,需要的朋友可以参考下.   先去官网下载jQuery Timers插件 ,然后引用到html中.这里是1.2 version 复制代码代码如下: < ...

  4. 基于 jQuery Jcrop 插件的功能模块:头像剪裁

    /** Jcrop version: 0.9.12 jQuery version: 1.9.0 Author: 小dee Date: 2014.10.30 */ 先看看他山之石:博客园的头像模块也是使 ...

  5. 基于jquery fly插件实现加入购物车抛物线动画效果,jquery.fly.js

    在购物网站中,加入购物车的功能是必须的功能,有的网站在用户点击加入购物车按钮时,就会出现该商品从点击出以抛物线的动画相似加入购物车,这个功能看起来非常炫,对用户体验也有一定的提高.下面介绍基于jque ...

  6. 移动端下拉刷新、加载更多插件dropload.js(基于jQuery/Zepto)

    移动端下拉刷新.加载更多插件dropload.js(基于jQuery/Zepto) 原文:http://www.grycheng.com/?p=1869 废话不多说,先让大家看一下案例效果: DEMO ...

  7. 基于jquery的插件turn.js学习笔记

    基于jquery的插件turn.js学习笔记 简介 turn.js是一个可以实现3d书籍展示效果的jq插件,使用html5和css3来执行效果.可以很好的适应于ios和安卓等触摸设备. How it ...

  8. 编写基于jQuery的插件的方法

    注意:jQuery中有一个extend的方法,这个方法是添加js对象字段的,下面会多次用到 1:添加全局类的方法 常用的ajax就是该类插件,下面要编写一个简单的加法和减法的基于jQuery的方法 $ ...

  9. 基于jquery分页插件

    今天终于完成了基于jquery的分页插件的代码编写,也通过了功能测试,实现了分页功能:由于刚开始写jquery的插件,所以梳理逻辑的时间也很长,整个过程整整一周时间,今天终于搞完了,先将整个分页插件的 ...

随机推荐

  1. placeholder不兼容 IE10 以下版本的解决方法

    对于密码输入框placeholder的兼容问题:HTML代码:<input type="password" id="loginPassword" plac ...

  2. CSS布局基础——BFC

    what's BFC? 第一次看到这个名词,我是拒绝的,css什么时候还有这个东西?于是迫不及待的google了一下,才发现原来它无时无刻不在我们的css当中,只不过它并不是一个属性,不需要我们平常使 ...

  3. 网页中tab标签切换分别用jquery和javascript源码实现

    //HTML布局<ul id="tabTitle"> <li class="active">HTML5</li> <l ...

  4. compileDebugJavaWithJavac

    学习笔记 compileDebugJavaWithJavac,缺少插件,在module app gradle文件最上面添加一段 apply plugin: 'me.tatarka.retrolambd ...

  5. Linux0.11内核--进程调度分析之1.初始化

    [版权所有,转载请注明出处.出处:http://www.cnblogs.com/joey-hua/p/5596746.html ] 首先看main.c里的初始化函数main函数里面有个函数是对进程调度 ...

  6. 源代码管理工具之SVN

    源代码管理工具SVN是一款非常强大的源代码管理工具,现在国内70%-90%的公司都在使用SVN来管理源代码,下面就让小编给大家着重介绍一下SVN的使用,SVN的使用主要分为下面几块. SVN的使用环境 ...

  7. CSS3-01 简介

    概述 HTML 文档由包含 HTML 标签的 HTML 元素组成,HTML 标签被用于定义文档的内容.HTML 文档内容没有额外的样式,以纯文本流的方式渲染到浏览器页面.需要借助层叠样式表(CSS)来 ...

  8. WebAPi的可视化输出模式(RabbitMQ、消息补偿相关)——所有webapi似乎都缺失的一个功能

    最近的工作我在做一个有关于消息发送和接受封装工作.大概流程是这样的,消息中间件是采用rabbitmq,为了保证消息的绝对无丢失,我们需要在发送和接受前对消息进行DB落地.在发送前我会先进行DB的插入, ...

  9. php之验证码小程序

    验证码功能(个人理解): 减轻服务器的压力(如12306的验证码功能): 防止暴力注册 个人思路:在a-z,A-Z,1-9生成n位随机的数来构成新的验证码. 关于生成验证码的几个小函数 range() ...

  10. MySQL 更新语句技巧

    一. 多表更新 1. 数据准备 mysql> mysql> select goods_id, goods_name,goods_cate from tdb_goods; +-------- ...