juery实战4：封装拖拽插件

来源：互联网发布：红蜘蛛教学软件破解版编辑：程序博客网时间：2024/05/13 23:50

juery实战4：封装拖拽插件

/*
$(function(){ //$(function(){};相当于javascript中的onloading;页面加载完成的时候就执行的函数，
$(".tmui-box").tmDrag(); //根据类名找到对应的元素调用插件中封装的方法tmDrag()即可进行拖拽
}); bootcss jqueryUI easyUI dwz yUI等插件都基于javascript的封装
JS里的已经给元素做了position:abslute定位处理，拖拽元素必须作定位处理
*/
(function($){
//要做什么这里是拖拽插件drag 业务div层拖拽
//怎么实现业务业务逻辑通过鼠标拖拽产生移动
//技术要点：用到的功能函数position:absolute;涉及的事件：mousedown(鼠标按下)mousemove(鼠标移动)mouseup(鼠标松开)
//目标是什么：
//测试Bug：

//var $.fn= {};//$.fn是jquery官方插件里内部提供的一个对象。由于在juery内部这段赋值代码可不用声明
$.fn.lmjDrag= function(options){//lmjDrag自命名插件名称，这里是固定写法,options为函数间传递的参数。
  //alert(options.id+options.top);//打印测试传递进来的对象的属性能否获取到。
  //var opts=$.extend({},options);//继承参数的声明,如果参数确定是jquery对象就不用此声明。正如测试中传入的对象是jquery对象,所以可以注销这段代码。
  //var opts=$.extend({},$.fn.lmjDrag.defaults,options);
  this.each(function(){
   //opts.box=$(this);//
   //init($(this),opts);
   var opts = $.extend({},$.fn.lmjDrag.defaults,options,$.fn.lmjDrag.parseOptions($(this)));
   init(opts);//循环调用初始化方法；//将上一层传递的对象和参数向下传递给初始化方法
  });

};//这里只是调用下面的业务逻辑方法，保证插件的简洁
var zindex=3;
function init(opts){//拖拽初始化方法接受到传递的对象和参数，进行处理。
  //function init($(this),opts);
  //alert(opts.id+opts.top);

  var $box=opts.box;//获取当前操作的对象
  var x=0,y=0,left=0,top=0;//x,y是获取当前鼠标按下时所在的X，y轴坐标。left,top为当前对象的左定点距离左边和顶部的距离。
  var isDrag=false;//鼠标按下移动松开的开关，
  var $handle=opts.handle ? $box.find(opts.handle):$box;//二目运算符，相当于var $handle=null;if(opts.handle){$box=$drag.find(opts.handle);}else{$handle=$box};
  //如果传来的参数是表头handle，则拖拽的是表头，否则就是对象自己。如盒子自身。
   //$box.on("mousedown",function(e){//给传递的对象绑定事件。鼠标按下事件。e为获取事件，所有事件的顶级都为event。事件触发的事件。
   $handle.on("mousedown",function(e){
   //alert(opts.id+opts.top);//打印测试对象是否自上而下的传递到初始化方法中。
   x = e.clientX;//clientX,Y方法获取鼠标坐标
   y = e.clientY;
   left = $(this).offset().left;//var offset=$(this).offset(); left=offset.left;top=offset.top;也能这样定义，更节省内存，只用到offset()方法一次。
   top = $(this).offset().top;//offset().left,top方法获取元素距左边和上边的距离。
   //alert("x="+x+",y="+y+",left="+left+",top="+top);//以上注释的代码为获取事件触发时x，y，left,top的值
   isDrag=true;
   zindex++;
   $box.css("zIndex",zindex);//鼠标按下时，当前选中的元素的显示在最前面即置顶。
   $(document).on("mousemove",function(e){
   if(isDrag){//开关值为真，即一直处于按下状态时执行下面的代码
   var nl=e.clientX+left-x;
   var nt=e.clientY+top-y;
   if(nl<=0){nl=2};
   if(nt<=0){nt=2};//也可写成if(nt<=0)nt=2;这种简写;这两段边界的判断，当距离顶部和左边小于0时，则将位置限定住为2.

$box.css({"left":nl,"top":nt});
   }
   }).on("mouseup",function(e){//以上所有的三个e事件是不同的，互不影响。固定格式。
   isDrag=false//松开鼠标时，开关值为假，即取消按下时开关值为真时，所执行的代码块。

   });

   });
   $box.mouseover(function(){
   zindex++;
   $box.css("zIndex",zindex);//鼠标移到到当前选中的元素的显示在最前面即置顶。
   });
  //var $box=$(this);
  };//拖拽初始化方法//和插件一样采用闭包，保证内部的变量的私有化。各闭包互不影响。
/*<!--$.fn.lmjDrag.defaults={
  id:"123",//这里为默认的参数，但是传递进来的参数的优先级最高，会覆盖默认的参数。
  handle:""//代理参数，实现拖拽表头的功能用到
};

$.fn.lmjDrag.parseOptions=function(target){
  var $target=$(target);
  return{
   handle:$target.attr("handle")
  };
};-->*/

$.fn.lmjDrag.parseOptions = function(target) {
  var $target = $(target);
  return {
   handle : $target.attr("handle"),
   arrow : $target.attr("arrow")
  }
};//找到拖拽对象的方法参数的传递的方式，属性参数的优先级最高，比传递进来的和默认参数都要高。

/*默认参数*/
$.fn.lmjDrag.defaults = {
  handle : "",
  arrow:"",
}

})(jQuery);

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style type="text/css" >
*{margin:0px;padding:0px;}
.tmui-box{border:1px solid red;position:absolute;width:480px;height:240px;background:#e5e5e5;left:201px;top:201px;width:480px;height:240px;z-index:3;}
h4{padding:3px;background:#141414;color:#fff;width:475px;height:32px;line-height:32px;font-size:12px;cursor:move;display:block;text-indent:190px;}
</style>
</head>
<body>
<div class='tmui-box1 ' style="width:200px;height:200px;border:1px solid red;background: -moz-linear-gradient(top, #ccc 0%,#000 10% ,#f00 50%,#00f 100%);">

<div id="box2" class="tmui-box" handle="h4" arrow="top" >
<h4 id="box2_title" >这是标题</h4>

</div>
<div id="box2" class="tmui-box" handle="h4" arrow="top" >
<h4 id="box2_title" >这是标题</h4>

</div>
<div id="box2" class="tmui-box" handle="h4" arrow="top" >
<h4 id="box2_title" >这是标题</h4>

</div>

<div id="box2" class="tmui-box" handle="h4" arrow="top" >
<h4 id="box2_title" >这是标题</h4>

</div>
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>

<script type="text/javascript" src="lmj.js"></script>

<script type="text/javascript" >
$(function(){
  //$(".tmui-box").lmjDrag({//这里调用封装的插件lmjDrag,并且传递一个对象给插件，这里是有两个属性和属性值的对象到插件中。这是就好像只是调用了一个方法而已，虽然是个封装的插件。
  //id:"789",
  //top:"xxxx",
  //handle:"h4"
  //});
$(".tmui-box").lmjDrag({arrow:""});
});

</script>
</body>
</html>

0 0