js拖放插件实现步骤

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

1。js拖放插件的原理

两。基于原则的实现的基本效果

三，代码抽象和优化

四，扩展：有效的拖放元素

五，性能优化和总结

六，jQuery插件

js拖动是一种常见的Web页面效果，本文将从头开始实现一个简单的js插件。
1。js拖放插件的原理

什么是常见的拖放操作在整个过程中可能有以下步骤：

1，单击鼠标拖动的元素

2，按住鼠标，移动鼠标

3、将元素拖放到某个位置，放开鼠标。

这里的过程涉及三个DOM事件：按下鼠标，移动鼠标，和onmouseup。所以拖放的基本思想：

1、单击删除元素触发鼠标鼠标拖动和

（1）设置当前元素可以拖到true，表示它可以拖动拖动。

（2）记录当前鼠标坐标x、y

（3）记录当前元素y的坐标x

2。移动鼠标触发onmousemove

（1）确定元素是否可以被拖动，如果是在步骤2中，否则它将直接返回。

（2）如果可以拖动元素，则设置元素的坐标。

元素的x坐标=鼠标移动的横向距离+元素的原始x坐标=鼠标的x坐标-- X坐标在鼠标+元素的原始x坐标之前。

元素的y坐标=鼠标移动的横向距离+元素的原始y坐标=鼠标的y坐标--鼠标前的y坐标+元素的原始y坐标。

3，松开鼠标触发onmouseup

（1）将鼠标的拖放状态设置为false

回到顶端

两。基于原则的实现的基本效果

在达到基本效果之前，有几点需要解释。

1、元素要拖，其位置属性必须相对或绝对

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

3、鼠标移动时必然而不是拖动元素本身的文档元素，它可以解决延迟问题或停止运动的快速拖动造成的。

代码如下：

无功drabj = document.getelementbyid（测试）；
drabj.style.left =PX；
drabj.style.top =PX；

VaR mouseX，老鼠objx，objy；
var拖动= false；

drabj.onmousedown =函数（事件）{
事件=事件window.event | |；

拖动=真；
Drabj.style.position = relative;
event.clientx mouseX =；
event.clienty老鼠=；
objx = parseInt（drabj。风格。左）；
objy = parseInt（drabj。风格。顶部）；
}

document.onmousemove =函数（事件）{
事件=事件window.event | |；
如果（拖动）{

drabj.style.left = parseInt（event.clientx - mouseX + objx）+PX；
drabj.style.top = parseInt（event.clienty -鼠标+ objy）+PX；
}

}

document.onmouseup =函数（）{
拖动=假；
}
三，代码抽象和优化

上面的代码要做成一个插件，要抽象它，基本结构如下：

复制代码代码如下所示：

（函数（窗口，未定义的）{）
函数拖动（元素）{ }
窗口：拖动=拖动；

}（窗口，未定义）；
代码由自我执行的匿名函数包装，拖动方法在内部定义并暴露于全局，拖动直接被拖动到拖动的元素中。

首先，一些常用的方法被简单地封装起来：

（函数（窗口，未定义的）{）
var = {
绑定事件
：功能（节点、事件、Handler）{
如果（节点。addEventListener）{
Node.addEventListener（事件，处理程序）；
}
{其他
node.attachevent（+事件，处理程序）；
}
}，
获取样式元素
getstyle：功能（节点，为）{
无功realstyle = null；
如果（窗口。getcomputedstyle）{
realstyle = window.getcomputedstyle（节点，null）{为}；
}
如果（节点。currentstyle）{
realstyle =节点。currentstyle {为}；
}
返回realstyle；
}，
获取/设置元素的样式
setcss：功能（节点、CSS）{
对于（css中的var键）{
节点样式{键}；
}
}
}；
窗口：拖动=拖动；
}（窗口，未定义）；
在拖放操作中，有两个对象：拖动对象和鼠标对象。我们定义了以下两个对象及其相应的操作。

第一个拖放对象，它包含一个元素节点和在拖放之前的坐标x和y：

功能dragelement（节点）{
this.node =节点； / /拖动元素节点
这个。
这个。
}
dragelement.prototype = { {
构造函数：dragelement，
init：函数（）{
This.setEleCss（{
左：dom.getstyle（节点，左），
顶：dom.getstyle（节点，顶）
}）
。setxy（node.style.left，节点。风格。顶部）；
}，
设置当前坐标
setxy：功能（x，y）{
这个X = parseInt（x）| |；
这个y = parseInt（Y）| |；
返回此；
}，
设置/元素节点样式
setelecss：功能（CSS）{
Dom.setCss（this.node，CSS）；
返回此；
}
}
另一个对象是鼠标，它主要包含x坐标和y坐标：
函数鼠标（）{
这个；
这个；
}
mouse.prototype.setxy =函数（x，y）{
这个X = parseInt（x）；
这Y = parseInt（Y）；
}
这是拖放操作中定义的两个对象。

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

1。每个元素对应于拖放对象实例。

2。每个页面只有一个被拖动和拖动的元素。

为此，我们定义了用于保存相关配置的唯一对象：

复制代码代码如下所示：

无功draggableconfig = { {

ZIndex：，

Dragginbj：空，

鼠标：新的鼠标（）

}；
这个对象有三个属性：

（1）在：zIndex属性用来指定拖放对象。当有多个拖动对象，当两拖动对象重叠，这将导致当前拖动对象被封锁，并显示它的顶层设置在。

（2）dragginbj：它是用来保存对象拖动和拖放。它删除用于决定是否拖放的变量。它决定dragginbj可以拖拖到相应的拖放对象。

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

最后，在按下鼠标时，鼠标，onmouseout事件必然将下面的代码如下：
（函数（窗口，未定义的）{）
var = {
绑定事件
：功能（节点、事件、Handler）{
如果（节点。addEventListener）{
Node.addEventListener（事件，处理程序）；
}
{其他
node.attachevent（+事件，处理程序）；
}
}，
获取样式元素
getstyle：功能（节点，为）{
无功realstyle = null；
如果（窗口。getcomputedstyle）{
realstyle = window.getcomputedstyle（节点，null）{为}；
}
如果（节点。currentstyle）{
realstyle =节点。currentstyle {为}；
}
返回realstyle；
}，
获取/设置元素的样式
setcss：功能（节点、CSS）{
对于（css中的var键）{
节点样式{键}；
}
}
}；
/ / #区域拖放元素类
功能dragelement（节点）{
this.node =节点；
这个；
这个；
}
dragelement.prototype = { {
构造函数：dragelement，
init：函数（）{
This.setEleCss（{
左：dom.getstyle（节点，左），
顶：dom.getstyle（节点，顶）
}）
。setxy（node.style.left，节点。风格。顶部）；
}，
setxy：功能（x，y）{
这个X = parseInt（x）| |；
这个y = parseInt（Y）| |；
返回此；
}，
setelecss：功能（CSS）{
Dom.setCss（this.node，CSS）；
返回此；
}
}
/ / #铁心端部定点
/ / #区域鼠标元
函数鼠标（）{
这个；
这个；
}
mouse.prototype.setxy =函数（x，y）{
这个X = parseInt（x）；
这Y = parseInt（Y）；
}
/ / #铁心端部定点
拖动/配置
无功draggableconfig = { {
ZIndex：，
Dragginbj：空，
鼠标：新的鼠标（）
}；
函数拖动（元素）{
this.ele =元；
函数MouseDown（事件）{
无功电= event.target event.srcelement | |；
DraggableConfig.mouse.setXY（event.clientx，事件。clienty）；
draggableconfig.dragginbj =新dragelement（ELE）；
draggableconfig.dragginbj
。setxy（ele.style.left，ELE。风格。顶部）
setelecss（{。
在：draggableconfig zIndex + +，
位置：相对
}）；
}
ele.onselectstart =函数（）{
拖动对象内的文本防止选中
返回false；
}
Dom.on（ELE，mouseDown
}
Dom.on（文档，MouseMove
如果（draggableconfig。dragginbj）{
鼠标draggableconfig.mouse VaR，
dragginbj = draggableconfig.dragginbj；
Dragginbj.setEleCss（{
左：parseInt（event.clientx老鼠。x + dragginbj。x）+PX
顶：parseInt（event.clienty老鼠。Y + dragginbj。Y）+PX
}）；
}
}）
Dom.on（文档，MouseUp
draggableconfig.dragginbj = null；
}）
窗口：拖动=拖动；
}（窗口，未定义）；
调用方法：拖动（document.getelementbyid（对象））；

注意：为了防止文本拖放元素的onselectstart事件处理程序返回false来处理这个问题。
四，扩展：有效的拖放元素

我们的一些常见的拖放效果很可能是这样的。
炸弹盒的顶部可以拖拽，内容区域不被拖走。如何达到这种效果：

首先，优化拖放元素对象如下：添加一个目标元素目标来表示拖动对象。在上面的登录框中，整个登录窗口是。

拖放元素，记录并建立目标元素，但它不是拖整个部分和阻力的有效组成部分。我们添加到类拖动拖放的有效面积在HTML结构来表示有效的拖放区：
复制代码代码如下所示：
拖放的有效元素
拖放对象

然后拖动方法被修改如下：

函数拖动（元素）{
var = dragnode（ele.queryselector（。拖动）| | ELE）；
Dom.on（dragnode MouseDown ，
无功dragelement = draggableconfig.dragelement =新dragelement（ELE）；

DraggableConfig.mouse.setXY（event.clientx，事件。clienty）；
draggableconfig.dragelement
。setxy（dragelement.target.style.left，dragelement。目标。风格。顶部）
settargetcss（{。
在：draggableconfig zIndex + +，
位置：相对
}）；
}），（dragnode，鼠标悬停
Dom.setCss（，draggablestyle。拖动）；
}），（dragnode，mouseout
Dom.setCss（，draggablestyle。默认值）；
}）；
}

主要的修改是将鼠标拖动节点成为类含有效元素。如果没有可拖动，整个单元是一种有效的元素。
五，性能优化和总结

因为鼠标移动时打电话的时候，它可能会导致一些性能问题，我们可以延迟绑定onmousemove事件通过settimout如下改善移动功能

函数移动（事件）{
If (draggableConfig.dragElement) {
鼠标draggableconfig.mouse VaR，
dragelement = draggableconfig.dragelement；
DragElement.setTargetCss（{
左：parseInt（event.clientx老鼠。x + dragelement。x）+PX
顶：parseInt（event.clienty老鼠。Y + dragelement。Y）+PX
}）；

Dom.off（文档，MouseMove
setTimeout（）{（）函数（
Dom.on（文档，MouseMove
}）；
}
}
总结：

整个拖放插件的实现非常简单，主要要注意几点。

1，实现了这个想法：改变元素拖动位置等于鼠标的距离变化，关键是要得到鼠标的变化和元素的原始坐标。

2、延迟加载onmousemove事件通过setTimeout提供性能
六，jQuery插件

简单地将其封装到jQuery插件中，这主要是将相关的DOM方法替换为jQuery方法。

函数（$，窗口，未定义）{
/ / #区域拖放元素类
功能dragelement（节点）{

this.target =节点；

node.onselectstart =函数（）{
拖动对象内的文本防止选中
返回false；
}
}
dragelement.prototype = { {
构造函数：dragelement，
setxy：功能（x，y）{
这个X = parseInt（x）| |；
这个y = parseInt（Y）| |；
返回此；
}，
settargetcss：功能（CSS）{
$（这个目标）Css（CSS）；
返回此；
}
}
/ / #铁心端部定点

/ / #区域鼠标元
函数鼠标（）{
这个；
这个；
}
mouse.prototype.setxy =函数（x，y）{
这个X = parseInt（x）；
这Y = parseInt（Y）；
}
/ / #铁心端部定点

拖动/配置
无功draggableconfig = { {
ZIndex：，
dragelement：空，
鼠标：新的鼠标（）
}；

无功draggablestyle = { {
拖动：{
光标：移动
}，
默认值：{
游标：默认值
}
}

var =文档= $（文档）；

函数拖动（$）{
VaR dragnode美元=美元ele.find（。拖动）；
dragnode美元=美元美元美元dragnode.length > dragnode：元素；
dragnode.on美元（{
鼠标：函数（事件）{
无功dragelement = draggableconfig.dragelement =新dragelement（$ ele.get（））；

DraggableConfig.mouse.setXY（event.clientx，事件。clienty）；
draggableconfig.dragelement
。setxy（dragelement.target.style.left，dragelement。目标。风格。顶部）
settargetcss（{。
在：draggableconfig zIndex + +，
位置：相对
}）；
}，
问号：函数（）{
$（这）。Css（draggablestyle。拖动）；
}，
怪：函数（）{
$（这）。Css（draggablestyle。默认值）；
}
}）
}

函数移动（事件）{
如果（draggableconfig。dragelement）{
鼠标draggableconfig.mouse VaR，
dragelement = draggableconfig.dragelement；
DragElement.setTargetCss（{
左：parseInt（event.clientx老鼠。x + dragelement。x）+PX
顶：parseInt（event.clienty老鼠。Y + dragelement。Y）+PX
}）；

document.off美元（MouseMove
setTimeout（）{（）函数（
document.on美元（MouseMove
}）；
}
}

document.on美元（{
鼠标移动：移动，
mouseup：函数（）{
draggableconfig.dragelement = null；
}
}）；

美元。fn.drag =功能（选项）{
拖动（这个）；
}

}（jQuery，窗口，未定义）
以上是详细介绍了js拖放插件的实现步骤，希望对您有所帮助。