angular-dragdrop.min.js 5.12 KB
Newer Older
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29
/**
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to
 * deal in the Software without restriction, including without limitation the
 * rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
 * sell copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in
 * all copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
 * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
 * IN THE SOFTWARE.
 */

/**
 * Implementing Drag and Drop functionality in AngularJS is easier than ever.
 * Demo: http://codef0rmer.github.com/angular-dragdrop/
 * 
 * @version 1.0.0
 *
 * (c) 2013 Amit Gharat a.k.a codef0rmer <amit.2006.it@gmail.com> - amitgharat.wordpress.com
 */
var jqyoui=angular.module("ngDragDrop",[]).service("ngDragDropService",["$timeout",function($timeout){this.callEventCallback=function(scope,callbackName,event,ui){if(!callbackName){return}var args=[event,ui];var match=callbackName.match(/^(.+)\((.+)\)$/);if(match!==null){callbackName=match[1];values=eval("["+match[0].replace(/^(.+)\(/,"").replace(/\)/,"")+"]");args.push.apply(args,values)}scope[callbackName].apply(scope,args)};this.invokeDrop=function(e,t,n,r,i){var s="",o="",u={},a={},f=null,l={},c={},h=null;s=e.attr("ng-model");o=t.attr("ng-model");h=t.find("[jqyoui-draggable]:last");a=n.$eval(t.attr("jqyoui-droppable"))||[];u=n.$eval(e.attr("jqyoui-draggable"))||[];f=angular.isArray(n[s])?u.index:null,l=angular.isArray(n[s])?n[s][f]:n[s];c=(angular.isArray(n[o])&&a&&a.index!==undefined?n[o][a.index]:!angular.isArray(n[o])?n[o]:{})||{};if(u.animate===true){this.move(e,h.length>0?h:t,null,"fast",a,null);this.move(h.length>0&&!a.multiple?h:[],e.parent("[jqyoui-droppable]"),jqyoui.startXY,"fast",a,function(){$timeout(function(){e.css({position:"relative",left:"",top:""});h.css({position:"relative",left:"",top:""});this.mutateDraggable(n,a,u,s,o,c,e);this.mutateDroppable(n,a,u,o,l,f);this.callEventCallback(n,a.onDrop,r,i)}.bind(this))}.bind(this))}else{$timeout(function(){this.mutateDraggable(n,a,u,s,o,c,e);this.mutateDroppable(n,a,u,o,l,f);this.callEventCallback(n,a.onDrop,r,i)}.bind(this))}};this.move=function(e,t,n,r,i,s){if(e.length===0){if(s){window.setTimeout(function(){s()},300)}return false}var o=9999,u=e.offset(),a=t&&t.is(":visible");if(n===null&&t.length>0){if(t.attr("jqyoui-draggable")!==undefined&&t.attr("ng-model")!==undefined&&t.is(":visible")&&i&&i.multiple){n=t.offset();if(i.stack===false){n.left+=t.outerWidth(true)}else{n.top+=t.outerHeight(true)}}else{n=t.css({visibility:"hidden",display:"block"}).offset();t.css({visibility:"",display:a?"":"none"})}}e.css({position:"absolute","z-index":o}).css(u).animate(n,r,function(){if(s)s()})};this.mutateDroppable=function(e,t,n,r,i,s){if(angular.isArray(e[r])){if(t&&t.index>=0){e[r][t.index]=i}else{e[r].push(i)}if(n&&n.placeholder===true){e[r][e[r].length-1]["jqyoui_pos"]=s}}else{e[r]=i;if(n&&n.placeholder===true){e[r]["jqyoui_pos"]=s}}};this.mutateDraggable=function(e,t,n,r,i,s,o){var u=$.isEmptyObject(s);if(n&&n.placeholder){if(n.placeholder!="keep"){if(angular.isArray(e[r])&&n.index!==undefined){e[r][n.index]=s}else{e[r]=s}}}else{if(angular.isArray(e[r])){if(u){if(n&&n.placeholder!==true&&n.placeholder!=="keep"){e[r].splice(n.index,1)}}else{e[r][n.index]=s}}else{e[r]=s;if(e.$parent)e.$parent[r]=s}}o.css({"z-index":"",left:"",top:""})}}]).directive("jqyouiDraggable",["ngDragDropService",function(e){return{require:"?jqyouiDroppable",restrict:"A",link:function(t,n,r){var i;var s=function(s,o){if(s){i=t.$eval(n.attr("jqyoui-draggable"))||[];n.draggable({disabled:false}).draggable(t.$eval(r.jqyouiOptions)||{}).draggable({start:function(n,r){$(this).css("z-index",99999);jqyoui.startXY=$(this).offset();e.callEventCallback(t,i.onStart,n,r)},stop:function(n,r){e.callEventCallback(t,i.onStop,n,r)},drag:function(n,r){e.callEventCallback(t,i.onDrag,n,r)}})}else{n.draggable({disabled:true})}};t.$watch(function(){return t.$eval(r.drag)},s);s()}}}]).directive("jqyouiDroppable",["ngDragDropService",function(e){return{restrict:"A",priority:1,link:function(t,n,r){var i=function(i,s){if(i){n.droppable({disabled:false}).droppable(t.$eval(r.jqyouiOptions)||{}).droppable({over:function(n,r){var i=t.$eval(angular.element(this).attr("jqyoui-droppable"))||[];e.callEventCallback(t,i.onOver,n,r)},out:function(n,r){var i=t.$eval(angular.element(this).attr("jqyoui-droppable"))||[];e.callEventCallback(t,i.onOut,n,r)},drop:function(n,r){e.invokeDrop(angular.element(r.draggable),angular.element(this),t,n,r)}})}else{n.droppable({disabled:true})}};t.$watch(function(){return t.$eval(r.drop)},i);i()}}}])