偶尔，我看到一个简单的div拖放效果，我以前做过。我修改了几次，并增加了一些注释，这是通过Firefox /铬/ ie6-11完美的测试，现在我想与你分享。

第一，实现的原理和要点，最重要的三个步骤。第一步是MouseDown事件。当鼠标鼠标使用，记录鼠标的X轴和Y轴和左，这时的拖箱的顶部，并分配给真正的拖动标签，它代表拖放动作准备。第二步MouseMove事件。在这一点上，动态获得的X轴和Y轴的鼠标，那么新的左侧和顶部都是一拖再拖，并将它们拖放它们。第三步是mouseup事件，和拖放标记分配到假当鼠标弹出，和阻力拖放动作完成。

HTML代码如下所示：




标题-移动




js代码如下所示：


（函数（$）{）
美元。fn.dragdiv =功能（divwrap）{
返回this.each（函数（）{（）
divmove = $（var $本）； / /鼠标拖动区域
VaR divwrap美元= divwrap divmove.parents美元（divwrap）：divmove美元； / /移动区域
var = 0，我= 0；定义鼠标X轴Y轴。
var = 0，镝= 0；定义div，左位置
VaR下= false； / / MouseDown标记
如果（文件。attachevent）{ / / IE事件监听器。当div被拖动时，div禁止选择内容。Firefox和Chrome已经-moz用户选择：没有CSS；- WebKit用户选择：无；
为divmove { 0 }。attachevent（'onselectstart，函数（）{（）{
返回false；
}）；
}
divmove.mousedown美元（功能（事件）{）
var =事件| | window.event事件；
MX = event.clientx；
我的event.clienty；
DX = $ divwrap.offset（左）；
dy＝divwrap.offset美元（顶部）；
我= true； / /鼠标拖动开始
}）；
$（document）。Mousemove（函数（事件）{
var =事件| | window.event事件；
var x = event.clientx； / / X轴时，滑动鼠标
var y = event.clienty； / / Y轴在滑动鼠标
如果（我）{
divwrap.css美元（{左：X MX + DX，顶：y我+ dy }）； / / DIV位置动态分配
}
}）；
divmove.mouseup美元（函数（）{（）
我= false； / /鼠标拖过
}）；
}）；
}；
}（jQuery）；

$（文档）Ready（函数（）{）
$（# move1 ）（。dragdiv）； / /拖动div
$（#第二语步）。DragDiv（。divwrap / / DIV）；拖头
}）；




最后要说的事是，在你开始拖放，你必须禁止的内容的选择，否则会影响拖放效果。Firefox和Chrome可以通过CSS设置：{ -moz用户选择：无；- WebKit用户选择：无；}，即可以直接写在htmlonselectstart =返回false，但是Chrome似乎有点，所以决定不写，然后写在JS的IE浏览器的一个onselectstart事件。

这个小插件是一个简单的拖放效果，但兼容性很好，有一些知识点和技巧运用它。当然，你也可以继续使用这个插件或想法在膨胀，写一个更完美的拖放插件（如拖动，可删除）。

以上是本文的全部内容，希望大家能喜欢。