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%);"><!--Css3中的线性渐变兼容-moz- -o- -webkit- 内核的谷歌浏览器linear-gradient(参数1:方向或位置center left right top bottom, 颜色1 百分比, 颜色2 百分比,....)-->
<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%);"><!--Css3中的线性渐变兼容-moz- -o- -webkit- 内核的谷歌浏览器radial-gradient(参数1:方向或位置center left right top bottom, 颜色1 百分比, 颜色2 百分比,....)-->
</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="tmDrag.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> |