JS拖放插件实现步骤

本文详细介绍了JS拖放插件的实现步骤，主要从以下六个步骤进行详细分析。具体内容如下：

1.js拖放插件的原理；2.根据原理最基本的效果；3.代码抽象和优化；4.扩展：有效的拖放元素；5.性能优化和总结；6.jquery插件js拖放是常见的网页效果，所以本文将从头实现一个简单的js插件。

一、js拖放插件的原理。常见的拖放操作是什么？整个过程大概有以下几个步骤：

1.用鼠标单击拖动的元素

2.按住鼠标并移动它

3.将元素拖放到某个位置，然后放开鼠标

这里的过程涉及三个dom事件：onmousedown、onmousemove和onmouseup。所以拖动的基本思想是：

1.用鼠标单击被拖动的元素以触发onmousedown

(1)将当前元素的可拖动值设置为true，表示它可以被拖动。

(2)记录当前鼠标的坐标x和y

(3)记录当前元素的坐标x和y

2.移动鼠标以触发onmousemove

(1)判断元素是否可以拖动，如果可以，进入步骤2，否则直接返回

(2)如果元素可以拖动，设置元素的坐标

元素的x坐标=鼠标移动的横向距离，元素的原始x坐标=鼠标的当前x坐标-鼠标前元素的原始x坐标

元素的Y坐标=鼠标移动的水平距离，元素的原始Y坐标=鼠标的当前Y坐标-鼠标前元素的原始Y坐标

3.释放鼠标以触发onmouseup

(1)将鼠标的可拖动状态设置为false

回到前2名。根据原理达到的最基本效果在达到基本效果之前，有几点需要说明：

1.如果一个元素想要被拖动，它的postion属性必须是相对的或绝对的

2.通过event.clientX和event.clienty获取鼠标的坐标。

3.onmousemove绑定到document元素，而不是拖动元素本身，可以解决快速拖动带来的延迟或停止移动的问题

代码如下：

var DragObj=document . GetElementByID(' test ')；drag obj . style . left=' px '；drag obj . style . top=' px '；var mouseX，mouseY，objX，objYvar拖动=falsedrag obj . onmousedown=function(event){ event=event | | window . event；拖动=真；drag obj . style . position=' relative '；mouseX=event.clientXmouseY=event.clientYobjX=ParSeint(DragObj . style . left)；objY=ParSeint(DragObj . style . top)；} document . onmousemove=function(event){ event=event | | window . event；if(拖动){ DragObj . style . left=ParSeint(event . ClientX-MouseX ObJx)' px '；drag obj . style . top=ParSeint(event . clienty-Mousey Objy)' px '；} } document . onmouseup=function(){ draging=false；}三、代码抽象和优化上面的代码要做成插件，要抽象。基本结构如下：复制代码代码如下：(函数(窗口，未定义){函数拖动(元素){}窗口。拖动=拖动；})(窗口，未定义)；

用一个自动执行的匿名函数包装代码，在内部定义Drag方法并向全世界公开，直接调用Drag并传入被拖动的元素。

首先，一些常用的方法被简单地打包：

；(函数(窗口，未定义){ var DOM={//bind event :函数(节点，事件名称，处理程序){if(节点。addeventlistener) {node。addeventlistener(事件名称，处理程序)；} else { node . attachevent(' on ' event name，handler)；}}，//获取元素getstyle:function(节点，stylename)的样式{ var realstyle=nullif(window . getcomputed style){ real style=window . getcomputed style(node，null)[style name]；} else if(node . currentstyle){ real style=node . currentstyle[style name]；}返回realStyle}，//获取设置元素set css:function (node，CSS){ for(CSS中的var key){ node }的样式。style[key]=CSS[key]；} } };窗户。拖动=拖动；})(窗口，未定义)；在拖动操作中，有两个对象：被拖动对象和鼠标对象。我们定义了以下两个对象及其相应的操作：

第一个拖动对象包含一个元素节点以及拖动前的坐标x和y:

函数DragElement(node){ this . node=node；//拖动的元素节点this . x=；//拖动此之前的x坐标. y=；//拖动前的y坐标} drag element . prototype={ constructor : drag element，init : function(){ this . setelecss({ ' left ' : DOM . getstyle(节点，' left ')，' top': dom.getStyle(节点，' top') })。setXY(node.style.left，node . style . top)；}，//设置当前坐标setxy:function (x，y) {this。x=par sent(x)| |；this . y=ParSeint(y)| |；归还这个；}，//设置元素节点setelecss : function(CSS){ DOM }的样式。setcss(这。节点，CSS)；归还这个；}}另一个对象是鼠标，主要包含X坐标和Y坐标：

函数Mouse(){ this . x=；this . y=；} mouse . prototype . setxy=function(x，y){ this . x=parseInt(x)；this . y=ParSeint(y)；}这是拖放操作中定义的两个对象。

如果一个页面可以有多个拖放元素，应该注意什么：

1.每个元素对应一个拖动对象实例

2.每页只能拖动一个元素。

为此，我们定义了一个唯一的对象来存储相关配置：

复制代码如下： var draggable config={ zindex :draggingobj3360 null，mouse : new mouse()}；

该对象有三个属性：

(1)zIndex:用于为拖动的对象分配zIndex属性。当有多个被拖动对象时，当两个被拖动对象重叠时，当前被拖动对象可能会被阻止。设置zIndex以在顶层显示它。

(2)拖动对象：用于保存被拖动的对象。这里去掉了之前用来判断是否可以拖动的变量，通过拖动obj可以得到是否可以拖动以及对应的拖动对象。

(3)鼠标：唯一的鼠标对象，用于保存当前鼠标的坐标等信息

最后，绑定onmousedown、onmouseover和onmouseout事件，并将上述代码集成如下：

；（函数（窗口，未定义){ var dom={ //绑定事件：函数（节点，事件名称，处理程序){ if(节点。addeventlistener){ node。addeventlistener(事件名称，处理程序);} else { node。attachevent(' on '事件名称，处理程序)；} }, //获取元素的样式getStyle:函数（节点，样式名){ var real style=nullif(窗口。get computed style){ real style=window。getcomputed style(节点，null)[style name]；} else if(节点。currentstyle){ real style=node。current style[样式名]；}返回realStyle}，//获取设置元素的样式setCss:函数（节点，CSS){ for(CSS中的定义变量键){ node。style[key]=CSS[key]；} } };//#地区拖拽元素类函数DragElement(节点){ this。node=node这个。x=；这个。y=；} DragElement。prototype={ constructor : DragElement，init : function(){ this。setelecss({ ' left ' : DOM。GetStyle(节点、“左”)、“顶”: dom.getStyle(节点，' top') }).setXY(node.style.left，node。风格。顶部)；}，setXY:函数(x，y){这个。x=parsent(x)| |；这个。y=ParSeint(y)| |；归还这个；}，setEleCss:函数(css) { dom.setCss(this.node，CSS)；归还这个；} } //#endregion //#region鼠标元素函数Mouse(){ this。x=；这个。y=；}鼠标。原型。setxy=函数(x，y){ this。x=ParSeint(x)；这个。y=ParSeint(y)；} //#endregion //拖拽配置var draggableConfig={ zindex :draggingObj: null，Mouse : new Mouse()}；函数拖动。ele=ele函数MouseDown(事件){ var ele=event。目标| |事件。srcelelementdraggaleconfig。老鼠。setxy(事件。clientx，活动。客户关系)；dragableconfig。draggingobj=新的拖动元素(ele)；draggableConfig.draggingObj .setXY(ele.style.left，ele.style.top).setEleCss({ ' zIndex ' : draggaleconfig。zIndex，' position ' : ' relative ' })；} ele。onselectstart=function(){//防止拖拽对象内的文字被选中返回false} dom.on(ele，‘鼠标按下’，鼠标按下)；} dom.on(文档，“鼠标移动”，函数(事件){ if(draggaleconfig。draggingObj){ var mouse=draggaleconfig。鼠标，draggingObj=draggaleconfig。draggingObj拖拉物体。setelecss({ ' left ' : parseInt(事件。clientx鼠标。x拖动对象。x)' px '，' top ' : parseInt(事件。客户鼠标。y .德拉戈布。y)'(px ' })；} }) dom.on(文档，“鼠标向上”，函数(事件){ draggableconfig。draggingobj=null})窗口。拖动=拖动；})(窗口，未定义);调用方法：拖动(文档。getelementbyid(' obj ')；

注意的一点，为了防止选中拖拽元素中的文字，通过onselectstart事件处理程序返回错误的来处理这个问题。

四、扩展：有效的拖拽元素我们常见的一些拖拽效果很有可能是这样的：

弹框的顶部是可以进行拖拽操作的，内容区域是不可拖拽的，怎么实现这样的效果呢：

首先优化拖拽元素对象如下，增加一个目标元素目标，表示被拖拽对象，在上图的登录框中，就是整个登录窗口。

被记录和设置坐标的拖拽元素就是这个目标元素，但是它并不是整个部分都是拖拽的有效部分。我们在超文本标记语言结构中为拖拽的有效区域添加类可拖动的表示有效拖拽区域：

复制代码代码如下： div id=' obj ' class=' dialog ' style='位置：相对；左： px ' div class=' header draggable '拖拽的有效元素/div div class='content '拖拽对象/div /div

然后修改拖方法如下：

函数阻力(ele){ var阻力节点=(ele。queryselector ').可拖动)| | ele)；dom.on(dragNode，‘鼠标向下’，function(event){ var drag element=Draggableconfig。拖动元素=新的拖动元素(ele)；draggaleconfig。老鼠。setxy(事件。clientx，活动。客户关系)；draggableConfig.dragElement .setXY(DragElement。目标。风格。左，dragElement.target.style.top).setTargetCss({ ' zIndex ' : draggaleconfig。zIndex，' position ' : ' relative ' })；}).on(dragNode，' mouseover '，function () { dom.setCss(this，DragGablestyle。拖拉)；}).on(dragNode，' mouseout '，function () { dom.setCss(this，DragGablestyle。默认值)；});}主要修改的是绑定鼠标放下的节点变成了包含可拖动的类的有效元素，如果不含有可拖动的，则整个元素都是有效元素。

五、性能优化和总结由于onmousemove在一直调用，会造成一些性能问题，我们可以通过设置输出来延迟绑定onmousemove事件，改进移动函数如下

函数move(event){ if(dragableconfig。拖动元素){ var mouse=dragableconfig。鼠标，拖动元素=dragableconfig。拖曳元件；拖动元素。settargets({ ' left ' : ParSeint(事件。clientx鼠标。x拖动元素。x)' px '，' top ' : parseInt(事件。客户鼠标。y拖动元素。y)'(px ' })；dom.off(文档，‘鼠标移动’，移动)；setTimeout()函数(){ DOM。on(文档，' mousemove '，move)；}, );} }总结：

整个拖拽插件的实现其实很简单，主要是要注意几点

1、实现思路：元素拖拽位置的改变就等于鼠标改变的距离，关键在于获取鼠标的变动和元素原本的坐标

2、通过setTimeout来延迟加载onmousemove事件来提供性能

六、jquery插件化简单地将其封装成jquery插件，主要是相关的数字正射影像图方法替换成jquery方法来操作

；（函数($,窗口，未定义){//#地区拖拽元素类函数DragElement(节点){ this。目标=节点；节点。onselectstart=function(){//防止拖拽对象内的文字被选中返回false} } DragElement。prototype={ constructor : DragElement，setXY: function (x，y){ this。x=Parsent(x)| |；这个。y=ParSeint(y)| |；归还这个；}，setTargetCss:函数(css) { $(this.target).CSS(CSS)；归还这个；} } //#endregion //#region鼠标元素函数Mouse(){ this。x=；这个。y=；}鼠标。原型。setxy=函数(x，y){ this。x=ParSeint(x)；这个。y=ParSeint(y)；} //#endregion //拖拽配置var draggableConfig={ zIndex:dragElement: null，Mouse : new Mouse()}；var draggableStyle={拖动： {光标： '移动' }，默认s : {光标： '默认' } } var $ document=$(document)；函数drag($ ele){ var $ drag node=$ ele。找到。可拖动的');$dragNode=$dragNode.length？$ drag node : $ ele $ drag node . on({ ' mouse down ' :函数（事件){ var drag element=drag gableconfig。拖动元素=新的拖动元素($ ele)。get())；draggaleconfig。老鼠。setxy(事件。clientx，活动。客户关系)；draggableConfig.dragElement .setXY(DragElement。目标。风格。左，dragElement.target.style.top).setTargetCss({ ' zIndex ' : draggaleconfig。zIndex，' position ' : ' relative ' })；}、“鼠标悬停”:函数(){ $(这个).CSS(DragGablestyle。拖拉)；}、“鼠标退出”:函数(){ $(这个).CSS(DragGablestyle。默认值)；} }) }函数move(event){ if(dragableconfig。拖动元素){ var mouse=dragableconfig。鼠标，拖动元素=dragableconfig。拖曳元件；拖动元素。settargets({ ' left ' : ParSeint(事件。clientx鼠标。x拖动元素。x)' px '，' top ' : parseInt(事件。客户鼠标。y拖动元素。y)'(px ' })；$document.off('mousemove '，move)；setTimeout(函数(){ $ document。on('鼠标移动'，移动)；}, );} } $ document。on({ '鼠标移动' : move，'鼠标上移' : function(){ dragableconfig。drag元素=null} });$ .fn。drag=function(选项){ drag(这个)；} })(jQuery，窗口，未定义)

以上就是本文对射流研究…拖拽插件实现步骤的详细介绍，希望对大家有所帮助。