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()方法一章节。

回复

我来回复
  • 暂无回复内容