jquery div层拖动效果封装
本章节分享一段代码实例，它实现了对div层的拖动功能的封装效果。
并且点击div元素能够使当前div元素位于最顶端，代码实例如下:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style>
div{
width:200px;
height:200px;
background-color:#3399cc;
box-shadow:5px 5px 20px #999999;
-webkit-user-select:none;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
(function ($) {
var myDrag = function (options) {
var isDown = false;
var offset;
var $this = $(this);
$this.css({ position: "absolute" });
$this.css({ left: $this.offset().left });
$this.css({ top: $this.offset().top });
function onMouseDown(e) {
isDown = true;
offset = { x: e.screenX, y: e.screenY };
}
function onMouseMove(e) {
if (!isDown) return;
options.onDrag && options.onDrag.call($this);
var dX = e.screenX - offset.x;
var dY = e.screenY - offset.y;
offset = { x: e.screenX, y: e.screenY };
$(this).css("left", parseInt($(this).css("left")) + dX);
$(this).css("top", parseInt($(this).css("top")) + dY);
}
function onMouseUp() {
if (!isDown) return;
isDown = false;
offset = undefined;
}
$(document).on({
mouseup: onMouseUp
});
$this.on({
mousedown: onMouseDown,
mousemove: onMouseMove
})
};
$.fn.myDrag = function (options) {
this.each(function () {
myDrag.call(this, options);
});
};
})(jQuery);
$(document).ready(function () {
var color = ["#ff00ff", "#3399cc", "#99cc33"];
var $div = $("div");
$div.each(function () {
$(this).css("backgroundColor", color[~~(Math.random() * color.length)])
});
$div.myDrag({
onDrag: function () {
this.css("z-index", 9).siblings().css("z-index", 1);
}
});
})
</script>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
上面的代码实现了我们的要求，下面介绍一下它的实现过程。
一.代码注释:
（1）.(function ($) {})(jQuery),一个匿名自治性函数，这样可以防止内部变量对外部变量的污染，这里同样也可以实现内部使用$（假如外部已经禁止使用$）.
（2）.var myDrag = function (options) {},此函数封装了拖动功能，参数下面通过使用会介绍到。
（3）.var isDown = false，声明一个变量并赋值为false，作为一个标识，用来说明鼠标是否按下，也就是div是否可以拖动。
（4）.var offset，存储作用用的，下面会介绍到。
（5）.var $this = $(this)，转换为jQuery对象并赋值给变量$this，这样可以避免每次使用都要获取的性能消耗。
（6）.$this.css({ position: "absolute" })，设置当前元素为绝对定位。
（7）.$this.css({ left: $this.offset().left })，设置元素的left属性值。
（8）.$this.css({ top: $this.offset().top })，设置元素的top属性值。
（9）.function onMouseDown(e) {
isDown = true;
offset = { x: e.screenX, y: e.screenY };
}，这个作为mousedown事件处理函数。
也就是当鼠标按下以后，isDown设置为true，也就是表示可以拖动。
offset赋值为当前鼠标指针在屏幕中的坐标。
（10）.function onMouseMove(e) {
if (!isDown) return;
options.onDrag && options.onDrag.call($this);
var dX = e.screenX - offset.x;
var dY = e.screenY - offset.y;
offset = { x: e.screenX, y: e.screenY };
$(this).css("left", parseInt($(this).css("left")) + dX);
$(this).css("top", parseInt($(this).css("top")) + dY);
}，此方法作为mousemove事件处理函数。
如果isDown不为true，也就是鼠标没有按下，那么就不能拖动，直接返回。
options.onDrag && options.onDrag.call($this)，判断是否存在onDrag，如果存在那么就调用此方法，功能是设置元素的z-index属性值，实现了当前元素处于最上层的效果。
var dX = e.screenX - offset.x，获取鼠标的指针位移。
offset = { x: e.screenX, y: e.screenY }，重新设置offset，更新坐标。
$(this).css("left", parseInt($(this).css("left")) + dX)，重新设置元素的left属性值。
（11）.function onMouseUp() {
if (!isDown) return;
isDown = false;
offset = undefined;
}作为mouseup事件处理函数。
如果isDown不等于true，也就是说本身就没有按下，直接退出。
否则将isDown设置为true，offset值清空。
（12）.$this.on({
mousedown: onMouseDown,
mousemove: onMouseMove
}),注册事件处理函数。
（13）.$.fn.myDrag = function (options) {
this.each(function () {
myDrag.call(this, options);
});
}，为jquery对象添加添加一个myDray()方法。
此方法能够为jQuery对象实例集合中的每一个元素调用一次myDrag()方法。
（14）.$(document).ready(function () {}），当文档结构完全加载完毕再去执行函数中的代码。
（15）.var color = ["#ff00ff", "#3399cc", "#99cc33"]，创建一个颜色数组。
（16）.var $div = $("div")，获取div元素集合。
（17）.$div.each(function () {
$(this).css("backgroundColor", color[~~(Math.random() * color.length)])
})，设置div元素的背景色，~~运算符可以参阅相关阅读。
（18）.$div.myDrag({
onDrag: function () {
this.css("z-index", 9).siblings().css("z-index", 1);
}
})，调用此函数，执行一些初始化操作，比如注册事件处理函数等。
二.相关阅读:
（1）.css()方法可以参阅jQuery css()一章节。
（2）.offset()方法可以参阅jQuery offset()一章节。
（3）.screenX可以参阅javascript screenX一章节。
（4）.call()可以参阅js call()一章节。
（5）.parseInt()方法可以参阅javascript parseInt()一章节。
（6）.~~运算符可以参阅javascript按位非~运算符一章节。
（7）.each()方法可以参阅jQuery each()一章节。
（8）.siblings()方法可以参阅siblings()方法一章节。