自己动手写插件底层篇—基于jquery移动插件实现

序言

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

 

一、预备知识

 这个系列的文章至少需要掌握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

 

五、总结

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

posted @ 2016-10-29 16:04  热衷理财的技术渣渣  阅读(1311)  评论(2编辑  收藏  举报