/*! Tdrag 0.0.1 */ /** * Created by Tezml on 2016/5/26 * You can modify my source code, if you have a good idea or a problem can be encountered by e-mail: tezml@tezml.com to find me. * 如果你想在项目中使用该插件,请不要删除该注释。 */ ;(function($,window,document,undefined){ jQuery(function() { //插件制作 $.fn.Tdrag = function (opt) { var call = { scope: null,//父级 grid: null,//网格 axis:"all",//上下或者左右 pos:false,//是否记住位置 handle:null,//手柄 moveClass:"tezml",//移动时不换位加的class dragChange:false,//是否开启拖拽换位 changeMode:"point",//point & sort cbStart:function(){},//移动前的回调函数 cbMove:function(){},//移动中的回调函数 cbEnd:function(){},//移动结束时候的回调函数 cbChange:function(){},//移动结束时候的回调函数 random:false,//是否自动随机排序 randomInput:null,//点击随机排序的按钮 animation_options:{//运动时的参数 duration:800,//每次运动的时间 easing:"ease-out"//移动时的特效,ease-out、ease-in、linear }, disable:false,//禁止拖拽 disableInput:null//禁止拖拽的按钮 }; var dragfn = new Dragfn(this, opt); if (opt && $.isEmptyObject(opt) == false) { dragfn.options = $.extend(call, opt); } else { dragfn.options = call; } dragfn.firstRandom=true; var ele = dragfn.$element; dragfn.pack(ele,false); if(dragfn.options.randomInput!=null){ $(dragfn.options.randomInput).bind("click",function(){ dragfn.pack(ele,true); }) } //加载拓展jquery的函数 dragfn.loadJqueryfn() }; //依赖构造函数 var Dragfn = function (ele, opt) { this.$element = ele; this.options = opt; }; //构造函数方法 Dragfn.prototype = { init: function (obj) { var self = this; self.ele=self.$element; self.handle=$(obj);//手柄 self.options = self.options; self.disable = self.options.disable; self._start = false; self._move = false; self._end = false; self.disX = 0; self.disY = 0; self.zIndex=1000; self.moving=false; self.moves=""; //设置鼠标移上去的样式 $(obj).css('cursor','move'); $(obj).children('img').css({'width':'100%','height':'100%'}); //追加拉伸的块 $(obj).append(`
`); //父级 self.box = $.type(self.options.scope)==="string" ? self.options.scope : null; //手柄 if(self.options.handle!=null){ self.handle=$(obj).find(self.options.handle); } var parents = $(obj).parents('.design-sketch'); $(obj).children('.draw_move').on("mousedown", function (ev) { // 阻止冒泡,避免缩放时触发移动事件 ev.stopPropagation(); ev.preventDefault() var obj_child = $(this),position = obj_child.data('position'); var pos = { 'w': obj.offsetWidth, 'h': obj.offsetHeight, 'x': ev.clientX, 'y': ev.clientY }; parents.on('mousemove',function(even){ even.preventDefault(); // 设置图片的最小缩放为30*30 var w = Math.max(14, even.clientX - pos.x + pos.w); var h = Math.max(14,even.clientY - pos.y + pos.h); // 设置图片的最大宽高 w = w >= parents[0].offsetWidth-obj.offsetLeft ? parents[0].offsetWidth-obj.offsetLeft : w; h = h >= parents[0].offsetHeight-obj.offsetTop ? parents[0].offsetHeight-obj.offsetTop : h; obj.style.height = h + 'px'; obj.style.overflow = 'hidden'; //字体大小改变 obj.style.width = w + 'px'; obj.style.lineHeight = 1; self.options.cbChange(obj.style,self); }) parents.on('mouseleave',function(){ parents.unbind("mousemove"); parents.unbind("onmouseup"); }) obj_child.on('mouseup',function(){ parents.unbind("mousemove"); parents.unbind("onmouseup"); }) parents.on('mouseup',function(){ parents.unbind("mousemove"); parents.unbind("onmouseup"); }) }); //三个事件 self.handle.on("mousedown", function (ev) { self.start(ev, obj); obj.setCapture && obj.setCapture(); return false; }); $(obj).on("mousemove", function (ev) { self.move(ev, obj); }); if(self.options.dragChange) { $(obj).on("mousemove", function (ev) { self.move(ev, obj); }); $(obj).on("mouseup", function (ev) { self.end(ev, obj); }); }else{ $(document).on("mousemove", function (ev) { self.move(ev, obj); }); $(document).on("mouseup", function (ev) { self.end(ev, obj); }); } }, //jquery调取函数时候用 loadJqueryfn: function(){ var self=this; $.extend({ //返回按照index排序的回调函数 sortBox:function(obj){ var arr=[]; for (var s = 0; s < $(obj).length; s++) { arr.push($(obj).eq(s)); } for ( var i = 0; i < arr.length; i++) { for ( var j = i + 1; j < arr.length; j++) { if(Number(arr[i].attr("index")) > Number(arr[j].attr("index"))){ var temp = arr[i]; arr[i] = arr[j]; arr[j] = temp; } } } return arr }, //随机排序函数 randomfn:function(obj){ self.pack($(obj),true); }, //开启拖拽 disable_open:function(){ self.disable=false; }, //禁止拖拽 disable_cloose:function(){ self.disable=true; } }); }, toDisable: function(){ var self=this; if(self.options.disableInput!=null){ $(self.options.disableInput).bind("click",function(){ if(self.disable==true){ self.disable=false }else{ self.disable=true } }) } }, start: function (ev, obj) { var self = this; self.moved=obj; if (self.disable == true) { return false } self._start = true; $(obj).find('.draw_move').show(); $(obj).siblings().find('.draw_move').hide(); var oEvent = ev || event; self.disX = oEvent.clientX - obj.offsetLeft; self.disY = oEvent.clientY - obj.offsetTop; $(obj).css("zIndex",self.zIndex++); self.options.cbStart(); }, move: function (ev, obj) { var self = this; if (self._start != true) { return false } if(obj!=self.moved){ return false } self._move = true; var oEvent = ev || event; var l = oEvent.clientX - self.disX; var t = oEvent.clientY - self.disY; //有父级限制 if (self.box != null) { var rule = self.collTestBox(obj,self.box); if (l > rule.lmax) { l = rule.lmax; } else if (l < rule.lmin) { l = rule.lmin; } if (t > rule.tmax) { t = rule.tmax; } else if (t < rule.tmin) { t = rule.tmin; } } if(self.options.axis=="all"){ obj.style.left = self.grid(obj, l, t).left + 'px'; obj.style.top = self.grid(obj, l, t).top + 'px'; }else if(self.options.axis=="y"){ obj.style.top = self.grid(obj, l, t).top + 'px'; }else if(self.options.axis=="x"){ obj.style.left = self.grid(obj, l, t).left + 'px'; } /* if(self.options.changeWhen=="move") { if (self.options.changeMode == "sort") { self.sortDrag(obj); } else if (self.options.changeMode == "point") { self.pointmoveDrag(obj); } }else{ self.moveAddClass(obj); }*/ if(self.options.pos==true){ self.moveAddClass(obj); } self.options.cbMove(obj,self); }, end: function (ev, obj) { var self = this; if (self._start != true) { return false } if(self.options.changeMode=="sort"&&self.options.pos==true){ self.sortDrag(obj); }else if(self.options.changeMode=="point"&&self.options.pos==true){ self.pointDrag(obj); } if(self.options.pos==true){ self.animation(obj, self.aPos[$(obj).attr("index")]); } self.options.cbEnd(obj.style,self); if(self.options.handle!=null){ $(obj).find(self.options.handle).unbind("onmousemove"); $(obj).find(self.options.handle).unbind("onmouseup"); }else{ $(obj).unbind("onmousemove"); $(obj).unbind("onmouseup"); } obj.releaseCapture && obj.releaseCapture(); self._start = false; }, //算父级的宽高 collTestBox: function (obj, obj2) { var self = this; var l1 = 0; var t1 = 0; var l2 = $(obj2).innerWidth() - $(obj).outerWidth(); var t2 = $(obj2).innerHeight() - $(obj).outerHeight(); return { lmin: l1,//取的l最小值 tmin: t1,//取的t最小值 lmax: l2,//取的l最大值 tmax: t2//取的t最大值 } }, //算父级宽高时候干掉margin grid: function (obj, l, t) {//cur:[width,height] var self = this; var json = { left: l, top: t }; if ($.isArray(self.options.grid) && self.options.grid.length == 2) { var gx = self.options.grid[0]; var gy = self.options.grid[1]; json.left = Math.floor((l + gx / 2) / gx) * gx; json.top = Math.floor((t + gy / 2) / gy) * gy; return json } else if (self.options.grid == null) { return json } else { console.log("grid参数传递格式错误"); return false } }, findNearest: function(obj){ var self=this; var iMin=new Date().getTime(); var iMinIndex=-1; var ele=self.ele; for(var i=0;i