最近在工作中遇到一个需求，需要将一个元素从一个位置拖动到另一个固定位置，然后执行一些交互行为。具体效果如下:看似简单的将红色定位标记拖动到蓝色位置，然后弹出一个窗口的要求，实现起来并不是那么流畅。 我首先想到的是如何通过现有的哪个插件快速处理这个问题。但是找了半天也找不到合适的原生js插件，实际使用中总会出现几个莫名其妙的问题。 所以，如果你不停下来，就自己包一个吧！一方面以后可能会遇到类似的需求，另一方面总会对自己写的东西更熟悉，以后会更好的维护和扩展。 事不宜迟，让我们用原生js一步步实现这个简单的拖放插件。 首先，“类”构建插件，当然，必须看起来像插件。 在这里，我使用ES6中的类语法sugar来封装“类”，这样当我们使用插件时，只需要创建一个新的对象。 //定义拖动插件类drag {constructor (selector，options){ } }//使用拖动插件新建拖动('。框’)；//可以拖动这个box元素。2.既然元素是拖拽插件，当然要先获取需要拖拽的元素。这里我们可以让插件用户直接传入已经获取的element对象，也可以借助CSS选择器传入来获取插件内部的元素。 可以通过类型判断来实现。代码如下:getelement(selector){ if(selector的类型= = ' string '){//传入css选择器return document . query selector(selector)；} else if(选择器类型= = = ' object '){//传入DOM对象返回选择器；} else { throw请传入正确的元素’；}}然后我们可以在构造函数中调用它:constructor (selector，options){ this . El = this . getelement(selector)；如果(！This.el) {throw '移动元素'未找到；}}第三，通过事件对象获取鼠标(或手指)位置。在解决拖拽事件之前，我们首先要知道拖拽的基本原理是什么。 拖放本质上是在元素上按下鼠标(或手指)后，移动鼠标(或手指)时元素随鼠标指针(或手指)移动，最后松开鼠标(或手指)时元素停止移动。 最关键的部分是得到鼠标(或手指)移动时鼠标(或手指)的位置，然后我们会用到事件对象。 1.PC端获取鼠标位置e.clientX //横坐标e.clientY //纵坐标2。手机端获取手指位置。这里有两个点，一个是手指移动的时候，一个是手指松开的时候。 ①手指移动时，即touchmove事件e.touches[0]。clientX //为什么横坐标是e.touches[0]。clientY //为什么纵坐标触摸[0]？因为我们只用一根手指！②释放手指时，即touchend事件e.changedTouches[0]。clientX //横坐标e.changedTouches[0]。客户//纵坐标。看到了吗？无论哪种方式，我们得到鼠标(或手指)的位置都是clientX和clientY，只是前面的对象不同。 这时为了代码的良好复用性，我们可以简单的封装前面的对象。 Eventobj (event，isend = false) {/isend表示手指松开时是否可以返回isMobile()？(isEnd？event . changed touches[0]:event . touches[0]):event；}//判断是否可以是手机，因为手机会有OntouchStart函数是mobile(){ return document . body . OntouchStart；}四。获取事件名称在整个拖动过程中，我们只使用三种事件:开始、移动和结束。 PC端和手机端分别对应一组事件名称，存储在数组中。 event name(){ if(is mobile()){ return[' touch start '，' touchmove '，' touch end ']；} else { return ['mousedown '，' mousemove '，' mouseup ']；}}}五、实现拖拽的准备工作做了这么多，就是为了实现最关键的一步:拖拽，也就是这三个事件(开始、移动、结束)的实现。 InitData(){ //父元素this . parent pos = { x:this . El . parent node . getboundingclient()的位置。left，y:this . El . parent node . getboundingclientrect()。top，w:this . El . parent node . getboundingclientrect()。width，h:this . El . parent node . getboundingclientrect()。高度，}；//移动元素this . elempos = { x:this . El . offset left，y: this.el.offsettop，w: this.el.offsetwidth，h: this.el.offsetheight，}；} bind event(){ let event name = this . event name()，status = false//初始化数据this . initdata()；//start this . El . addevent listener(event name[0]，e = >；{ status = true});//move document . addevent listener(event name[1]，e = >；{ if(status){ e = this . event obj(e)；let left = e . clientx-this . elempos . w/2-this . parent pos . x，top = e . clienty-this . elempos . h/2-this . parent pos . y；this . El . style . CSS text = ` position:absolute；left:$ { left } px；top:$ { top } px；`;} });//end document . addevent listener(event name[2]，e = >；{ e = this.eventObj(e，true)；状态=假；});}结论写到这里，已经完成了一个简单的PC和手机通用JS拖拽插件。 当然，在这个基础上，我还增加了拖拽目标和释放反弹的功能。完整的代码可以在我的Github上预览。