您的位置：首页 > 产品设计 > UI/UE

juery实战4：封装拖拽插件

2015-06-06 12:13 537 查看

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.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 class='tmui-box1 ' style="width:200px;height:200px;border:1px solid red;background: -moz-radial-gradient(center, #ccc 0%,#000 10% ,#f00 50%,#00f
100%);">

</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>

<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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航