不断优化,重构我的代码-----拖拽jquery插件
最近学东西学的有点太散了,歇一阵子,重新完善之前的JQ插件,今天先上拖拽吧
// JavaScript Document (function($){ var defaults = { actionElement : "", //获得事件的元素,非必填项 rangeElement : window, //可拖动范围的元素 非必填 direction : "", //默认为空,表示何以任意拖动, 可选值为vertical或者horizontal magnetic : 0 //磁性吸附尺寸 非必填 } var opts = ""; //储存参数 var disX; var disY; //保存后续需要操作的元素 var dragEle,actionEle,rangeElement; //像jQuery对象下添加方法 $.fn.drag = function( options ) { opts = $.extend( defaults , options || {} ); dragEle = $( this ); rangeEle = $( opts.rangeElement ); var actionSelector; opts.actionElement != "" ? actionSelector = opts.actionElement : actionSelector = null ; dragEle.on("mousedown",actionSelector,dragFn); return $(this).each(function(){}); } //限制范围 function range ( value , maxValue , minValue) { if( value > maxValue - opts.magnetic ){ return maxValue; }else if( value < minValue + opts.magnetic ){ return minValue; } return value; } //拖拽的主体函数 function dragFn(ev){ disX = ev.clientX - dragEle.offset().left; disY = ev.clientY - dragEle.offset().top; $(document).on("mousemove",mousemove); $(document).on("mouseup",mouseup); return false; } //鼠标移动事件 function mousemove (ev) { var left = ev.clientX - disX; var top = ev.clientY - disY; left = range(left , rangeEle.width() - dragEle.width() , 0); top = range(top , rangeEle.height() - dragEle.height() , 0); switch( opts.direction ){ case "horizontal" : dragEle.css({"left" : left}); break; case "vertical" : dragEle.css({"top" : top }); break; default : dragEle.css({"left" : left,"top" : top }); break; } } //鼠标抬起移除事件 function mouseup () { $(document).off("mouseup",mouseup); $(document).off("mousemove",mousemove); } })(jQuery)
使用方法
$("#drag").drag({ actionElement : ".action", rangeElement : "#container", direction : "horizontal", magnetic : 15 });
暂时想不出来需要暴漏出来哪些参数比较有用,暂且这样,后续若有必要再修改
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。