一、前言

鼠标开始拖动元素在一个页面上拖了很多小圆点，定位，然后复制粘贴在HTML页面代码，是这样的功能，实现了很多次，不要没有jquery.fn.draggable插件，接触一些数据和其他人的思想火车，今天终于把这个拖放功能的完善，让我们在它的实施看


两。设计思路

将鼠标绑定到拖动元素以按下事件，将鼠标绑定到文档对象中，鼠标弹出。
为什么不将三个事件绑定到拖动元素，因为鼠标移动太快时不会执行鼠标移动和弹出事件处理程序。

复制代码代码如下所示：
target.bind美元（'mousedown，FN）；

$（文件）
.bind ('mousemove', FN)
。绑定（'mouseup，FN）；


三。源代码的详细信息

源代码的实现有许多值得注意的地方：

1。首先在鼠标按下事件中，单击拖动元素时，可以选择一个区域文本，而不是我们所需要的，解决方案如下：

复制代码代码如下所示：
停止 / /文本区域选择Chrome Firefox IE9
E.preventDefault（）；
火狐浏览器IE9小于| | / / IE9
window.getselection window.getselection（）RemoveAllRanges（）：document.selection.empty（）；


2、如果拖动元素图片（img标签），鼠标拖动一个小距离的图片，和一个小的提示将会出现，那就是，图片不能再拖。
这是浏览器的默认行为，因此可以停止浏览器的默认行为。

复制代码代码如下所示：
E.preventDefault（）；


三.边界问题（处理拖动范围）

代码的开头如下所示：

复制代码代码如下所示：
Y / / X，在拖动元素代表将设置左，前值，limitobj阻力面积，发现问题测试，
在拖动过程中，拖动物体不可能直接靠近边界。

如果（X = limitobj。_left x <= limitobj。_right）{
target.css美元（{左：x + 'px}）；
}
如果（y > = limitobj。_top Y <= limitobj。_bottom）{
target.css美元（{：Y + 'px}）；
}


进一步的思考：为什么上面的问题，因为变量x可能小于limitobj。_left或超过limitobj。_right，和变量y是相同的，
因此，代码需要处理如下：

复制代码代码如下所示：
如果（x＜limitobj。_left）{
x = limitobj。_left；
}
如果（x > limitobj。_right）{
x = limitobj。_right；
}
如果（y＜limitobj。_top）{
Y = limitobj。_top；
}
如果（y > limitobj。_bottom）{
Y = limitobj。_bottom；
}
target.css美元（{左：x + 'px，顶部：Y + 'px}）；


最后，问题解决了，但cloudgamer给更好的写作方式：

复制代码代码如下所示：
target.css美元（{
左：Math.max（Math.min（x，limitobj。_right），limitobj。_left）+ 'px，
上图：Math.max（Math.min（Y，limitobj。_bottom），limitobj。_top）+ 'px
}）；


完整程序源代码：

复制代码代码如下所示：
fn.extend（{美元。

*作者：博客华子奕2014 / 02 / 21
* /
拖动：函数（选项）{
VaR拖曳开始，dragmove，dragend，
boundaryelem美元，limitobj；

功能_initoptions（）{
无功空=功能（违约期权）{ }；

违约期权= { / /默认配置
BoundaryElem：'body ' / /边界的容器
}；
选项=美元。延长（违约期权，期权| | { }）；
boundaryelem美元= $（选项。boundaryelem）；

拖曳开始= options.dragstart空| |，
dragmove = options.dragmove空| |，
dragend = options.dragend空| |；
}

功能_drag（e）{
var ClientX，clienty，offsetleft，offsettop，
$目标= $（this）；

limitobj = { {
_left：0，
_top：0，
_right：（boundaryelem美元。innerwidth）| |（$（窗口），宽度（美元目标。边界的高度与宽度））-（），
_bottom：（boundaryelem美元。innerheight）| |（$（窗口），高度（$目标网页））-（）
}；

相对位置/记录位置并按下鼠标拖动元素。
e.clientx ClientX =；
clienty = e.clienty；
offsetleft = this.offsetleft；
offsettop = this.offsettop；

DragStart.apply（这个参数）；
$（document）。Bind（'mousemove '，movehandle）
。绑定（'mouseup '，uphandle）；

鼠标事件处理程序
功能movehandle（e）{
var x = e.clientx - ClientX + offsetleft；
var y = e.clienty - clienty + offsettop；

target.css美元（{
左：Math.max（Math.min（x，limitobj。_right），limitobj。_left）+ 'px，
上图：Math.max（Math.min（Y，limitobj。_bottom），limitobj。_top）+ 'px
}）；

dragmove.apply（自我观点）；
停止浏览器默认行为（在远处，一个鼠标拖动图片会出现在禁止的提示：图片不再拖动）
E.preventDefault（）；
}

鼠标上事件处理
功能uphandle（e）{
$（document）。Unbind（'mousemove '，movehandle）；
dragend.apply（自我观点）；
}
}

（_initoptions）； / /初始化配置对象

美元（这个）
CSS（{位置：'absolute}）
每个函数（）{（）
$（这）。Bind（'mousedown功能（e）{ {）
_drag.apply（E，{ }）；
停止 / /文本区域选择Chrome Firefox IE9
E.preventDefault（）；
火狐浏览器IE9小于| | / / IE9
window.getselection window.getselection（）RemoveAllRanges（）：document.selection.empty（）；
}）；
}）；
返回此；
}
}）；


实例的调用：

复制代码代码如下所示：
调用实例
（函数（）{（））
$（'。拖动元素的阻力（{）。
boundaryelem：#边界，
DragStart：函数（）{
$（这）。Html（准备拖）。Css（{在}：2）。兄弟姐妹（）。Css（{在}：1）；
}，
DragMove：函数（）{
var = $（this）。位置（）；
$（这）。Html（'dragging（+ pos.left +，+ pos.top +）；
}，
DragEnd：函数（）{
$（这）Html（拖结束）；
}
}）；
}（）；