From c88972be03125c3d96e008a8d2658edd0da0daa4 Mon Sep 17 00:00:00 2001 From: codef0rmer Date: Mon, 28 Jan 2013 23:11:52 +0530 Subject: [PATCH 01/21] Setup page --- index.html | 71 +++++++++++++++++ partials/cart.html | 1 + partials/list.html | 1 + partials/mvc.html | 1 + partials/overview.html | 171 +++++++++++++++++++++++++++++++++++++++++ 5 files changed, 245 insertions(+) create mode 100644 index.html create mode 100644 partials/cart.html create mode 100644 partials/list.html create mode 100644 partials/mvc.html create mode 100644 partials/overview.html diff --git a/index.html b/index.html new file mode 100644 index 0000000..0b655a8 --- /dev/null +++ b/index.html @@ -0,0 +1,71 @@ + + + + + + Drag and Drop for AngularJS + + + + + + + + + + + + +
+
+
+ + + + + + angular-dragdrop +
+ + +
+
+
+
+
+ + + + + + + + + \ No newline at end of file diff --git a/partials/cart.html b/partials/cart.html new file mode 100644 index 0000000..1694dcf --- /dev/null +++ b/partials/cart.html @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/partials/list.html b/partials/list.html new file mode 100644 index 0000000..0c0ec21 --- /dev/null +++ b/partials/list.html @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/partials/mvc.html b/partials/mvc.html new file mode 100644 index 0000000..1e0d83b --- /dev/null +++ b/partials/mvc.html @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/partials/overview.html b/partials/overview.html new file mode 100644 index 0000000..2bfb2f7 --- /dev/null +++ b/partials/overview.html @@ -0,0 +1,171 @@ +
+ + +
+

Drag and Drop for AngularJS

+


Implementing jQueryUI Drag and Drop functionality in AngularJS is easier than ever by codef0rmer

+ + + + + +
+ + + +
+ +

Angular Draggable options

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Nametypedefaultdescription
jqyoui-draggableobjectA custom angular attribute to make any element draggable. It holds more settings such as:
        indexNumber$index of an item of a model (if it is an array) associated with it
        placeholderbooleanfalseIf true, the place will be occupied even though a dragggable is moved/dropped somewhere else
        animatebooleanfalseIf true, draggable will be animated towards droppable when dropped. If multiple is not set to true on droppable then its draggable will swap its position.
        onStartstringcallback method to be invoked (has to be defined in a controller) when dragging starts
        onStopstringcallback method to be invoked when dragging stops
        onDragstringcallback method to be invoked while the mouse is moved during the dragging
data-dragbooleantrueIf true, element can be draggable. Disabled otherwise.
data-jqyoui-optionsobjectshould hold all the valid options supported by jQueryUI Draggable
ng-modelstringAn angular model defined in a controller. Should be a JS array or object
+ +

Angular Droppable options

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Nametypedefaultdescription
jqyoui-droppableobjectA custom angular attribute to make any element droppable. It holds more settings such as:
        indexNumber$index of an item of a model (if it is an array) associated with it
        multiplebooleanfalseRequires to be true only if animate is set to true for draggable and to avoid swapping.
        stackbooleanfalseRequires if animate is set to true on draggable and if multiple draggables positioned one below the other
        onDropstringcallback method to be invoked a draggable is dropped into the droppable
        onOverstringcallback method to be invoked when an accepted draggable is dragged over the droppable
        onOutstringcallback method to be invoked when an accepted draggable is dragged out of the droppable
data-dragbooleantrueIf true, element can be droppable. Disabled otherwise.
data-jqyoui-optionsobjectshould hold all the valid options supported by jQueryUI Droppable
ng-modelstringAn angular model defined in a controller. Should be a JS array or object
+
\ No newline at end of file From 233f0ed860a48c2317a21df4d2e2854874dacdbe Mon Sep 17 00:00:00 2001 From: codef0rmer Date: Tue, 29 Jan 2013 23:11:54 +0530 Subject: [PATCH 02/21] Setup a quick demo on overview page --- assets/prettify.css | 30 +++++++++++++++++++++++++++ assets/prettify.js | 28 +++++++++++++++++++++++++ index.html | 8 ++++++- partials/overview.html | 47 +++++++++++++++++++++++++++++++++++++++++- 4 files changed, 111 insertions(+), 2 deletions(-) create mode 100755 assets/prettify.css create mode 100755 assets/prettify.js diff --git a/assets/prettify.css b/assets/prettify.css new file mode 100755 index 0000000..d437aff --- /dev/null +++ b/assets/prettify.css @@ -0,0 +1,30 @@ +.com { color: #93a1a1; } +.lit { color: #195f91; } +.pun, .opn, .clo { color: #93a1a1; } +.fun { color: #dc322f; } +.str, .atv { color: #D14; } +.kwd, .prettyprint .tag { color: #1e347b; } +.typ, .atn, .dec, .var { color: teal; } +.pln { color: #48484c; } + +.prettyprint { + padding: 8px; + background-color: #f7f7f9; + border: 1px solid #e1e1e8; +} +.prettyprint.linenums { + -webkit-box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0; + -moz-box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0; + box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0; +} + +/* Specify class=linenums on a pre to get line numbering */ +ol.linenums { + margin: 0 0 0 33px; /* IE indents via margin-left */ +} +ol.linenums li { + padding-left: 12px; + color: #bebec5; + line-height: 20px; + text-shadow: 0 1px 0 #fff; +} \ No newline at end of file diff --git a/assets/prettify.js b/assets/prettify.js new file mode 100755 index 0000000..eef5ad7 --- /dev/null +++ b/assets/prettify.js @@ -0,0 +1,28 @@ +var q=null;window.PR_SHOULD_USE_CONTINUATION=!0; +(function(){function L(a){function m(a){var f=a.charCodeAt(0);if(f!==92)return f;var b=a.charAt(1);return(f=r[b])?f:"0"<=b&&b<="7"?parseInt(a.substring(1),8):b==="u"||b==="x"?parseInt(a.substring(2),16):a.charCodeAt(1)}function e(a){if(a<32)return(a<16?"\\x0":"\\x")+a.toString(16);a=String.fromCharCode(a);if(a==="\\"||a==="-"||a==="["||a==="]")a="\\"+a;return a}function h(a){for(var f=a.substring(1,a.length-1).match(/\\u[\dA-Fa-f]{4}|\\x[\dA-Fa-f]{2}|\\[0-3][0-7]{0,2}|\\[0-7]{1,2}|\\[\S\s]|[^\\]/g),a= +[],b=[],o=f[0]==="^",c=o?1:0,i=f.length;c122||(d<65||j>90||b.push([Math.max(65,j)|32,Math.min(d,90)|32]),d<97||j>122||b.push([Math.max(97,j)&-33,Math.min(d,122)&-33]))}}b.sort(function(a,f){return a[0]-f[0]||f[1]-a[1]});f=[];j=[NaN,NaN];for(c=0;ci[0]&&(i[1]+1>i[0]&&b.push("-"),b.push(e(i[1])));b.push("]");return b.join("")}function y(a){for(var f=a.source.match(/\[(?:[^\\\]]|\\[\S\s])*]|\\u[\dA-Fa-f]{4}|\\x[\dA-Fa-f]{2}|\\\d+|\\[^\dux]|\(\?[!:=]|[()^]|[^()[\\^]+/g),b=f.length,d=[],c=0,i=0;c=2&&a==="["?f[c]=h(j):a!=="\\"&&(f[c]=j.replace(/[A-Za-z]/g,function(a){a=a.charCodeAt(0);return"["+String.fromCharCode(a&-33,a|32)+"]"}));return f.join("")}for(var t=0,s=!1,l=!1,p=0,d=a.length;p=5&&"lang-"===b.substring(0,5))&&!(o&&typeof o[1]==="string"))c=!1,b="src";c||(r[f]=b)}i=d;d+=f.length;if(c){c=o[1];var j=f.indexOf(c),k=j+c.length;o[2]&&(k=f.length-o[2].length,j=k-c.length);b=b.substring(5);B(l+i,f.substring(0,j),e,p);B(l+i+j,c,C(b,c),p);B(l+i+k,f.substring(k),e,p)}else p.push(l+i,b)}a.e=p}var h={},y;(function(){for(var e=a.concat(m), +l=[],p={},d=0,g=e.length;d=0;)h[n.charAt(k)]=r;r=r[1];n=""+r;p.hasOwnProperty(n)||(l.push(r),p[n]=q)}l.push(/[\S\s]/);y=L(l)})();var t=m.length;return e}function u(a){var m=[],e=[];a.tripleQuotedStrings?m.push(["str",/^(?:'''(?:[^'\\]|\\[\S\s]|''?(?=[^']))*(?:'''|$)|"""(?:[^"\\]|\\[\S\s]|""?(?=[^"]))*(?:"""|$)|'(?:[^'\\]|\\[\S\s])*(?:'|$)|"(?:[^"\\]|\\[\S\s])*(?:"|$))/,q,"'\""]):a.multiLineStrings?m.push(["str",/^(?:'(?:[^'\\]|\\[\S\s])*(?:'|$)|"(?:[^"\\]|\\[\S\s])*(?:"|$)|`(?:[^\\`]|\\[\S\s])*(?:`|$))/, +q,"'\"`"]):m.push(["str",/^(?:'(?:[^\n\r'\\]|\\.)*(?:'|$)|"(?:[^\n\r"\\]|\\.)*(?:"|$))/,q,"\"'"]);a.verbatimStrings&&e.push(["str",/^@"(?:[^"]|"")*(?:"|$)/,q]);var h=a.hashComments;h&&(a.cStyleComments?(h>1?m.push(["com",/^#(?:##(?:[^#]|#(?!##))*(?:###|$)|.*)/,q,"#"]):m.push(["com",/^#(?:(?:define|elif|else|endif|error|ifdef|include|ifndef|line|pragma|undef|warning)\b|[^\n\r]*)/,q,"#"]),e.push(["str",/^<(?:(?:(?:\.\.\/)*|\/?)(?:[\w-]+(?:\/[\w-]+)+)?[\w-]+\.h|[a-z]\w*)>/,q])):m.push(["com",/^#[^\n\r]*/, +q,"#"]));a.cStyleComments&&(e.push(["com",/^\/\/[^\n\r]*/,q]),e.push(["com",/^\/\*[\S\s]*?(?:\*\/|$)/,q]));a.regexLiterals&&e.push(["lang-regex",/^(?:^^\.?|[!+-]|!=|!==|#|%|%=|&|&&|&&=|&=|\(|\*|\*=|\+=|,|-=|->|\/|\/=|:|::|;|<|<<|<<=|<=|=|==|===|>|>=|>>|>>=|>>>|>>>=|[?@[^]|\^=|\^\^|\^\^=|{|\||\|=|\|\||\|\|=|~|break|case|continue|delete|do|else|finally|instanceof|return|throw|try|typeof)\s*(\/(?=[^*/])(?:[^/[\\]|\\[\S\s]|\[(?:[^\\\]]|\\[\S\s])*(?:]|$))+\/)/]);(h=a.types)&&e.push(["typ",h]);a=(""+a.keywords).replace(/^ | $/g, +"");a.length&&e.push(["kwd",RegExp("^(?:"+a.replace(/[\s,]+/g,"|")+")\\b"),q]);m.push(["pln",/^\s+/,q," \r\n\t\xa0"]);e.push(["lit",/^@[$_a-z][\w$@]*/i,q],["typ",/^(?:[@_]?[A-Z]+[a-z][\w$@]*|\w+_t\b)/,q],["pln",/^[$_a-z][\w$@]*/i,q],["lit",/^(?:0x[\da-f]+|(?:\d(?:_\d+)*\d*(?:\.\d*)?|\.\d\+)(?:e[+-]?\d+)?)[a-z]*/i,q,"0123456789"],["pln",/^\\[\S\s]?/,q],["pun",/^.[^\s\w"-$'./@\\`]*/,q]);return x(m,e)}function D(a,m){function e(a){switch(a.nodeType){case 1:if(k.test(a.className))break;if("BR"===a.nodeName)h(a), +a.parentNode&&a.parentNode.removeChild(a);else for(a=a.firstChild;a;a=a.nextSibling)e(a);break;case 3:case 4:if(p){var b=a.nodeValue,d=b.match(t);if(d){var c=b.substring(0,d.index);a.nodeValue=c;(b=b.substring(d.index+d[0].length))&&a.parentNode.insertBefore(s.createTextNode(b),a.nextSibling);h(a);c||a.parentNode.removeChild(a)}}}}function h(a){function b(a,d){var e=d?a.cloneNode(!1):a,f=a.parentNode;if(f){var f=b(f,1),g=a.nextSibling;f.appendChild(e);for(var h=g;h;h=g)g=h.nextSibling,f.appendChild(h)}return e} +for(;!a.nextSibling;)if(a=a.parentNode,!a)return;for(var a=b(a.nextSibling,0),e;(e=a.parentNode)&&e.nodeType===1;)a=e;d.push(a)}var k=/(?:^|\s)nocode(?:\s|$)/,t=/\r\n?|\n/,s=a.ownerDocument,l;a.currentStyle?l=a.currentStyle.whiteSpace:window.getComputedStyle&&(l=s.defaultView.getComputedStyle(a,q).getPropertyValue("white-space"));var p=l&&"pre"===l.substring(0,3);for(l=s.createElement("LI");a.firstChild;)l.appendChild(a.firstChild);for(var d=[l],g=0;g=0;){var h=m[e];A.hasOwnProperty(h)?window.console&&console.warn("cannot override language handler %s",h):A[h]=a}}function C(a,m){if(!a||!A.hasOwnProperty(a))a=/^\s*=o&&(h+=2);e>=c&&(a+=2)}}catch(w){"console"in window&&console.log(w&&w.stack?w.stack:w)}}var v=["break,continue,do,else,for,if,return,while"],w=[[v,"auto,case,char,const,default,double,enum,extern,float,goto,int,long,register,short,signed,sizeof,static,struct,switch,typedef,union,unsigned,void,volatile"], +"catch,class,delete,false,import,new,operator,private,protected,public,this,throw,true,try,typeof"],F=[w,"alignof,align_union,asm,axiom,bool,concept,concept_map,const_cast,constexpr,decltype,dynamic_cast,explicit,export,friend,inline,late_check,mutable,namespace,nullptr,reinterpret_cast,static_assert,static_cast,template,typeid,typename,using,virtual,where"],G=[w,"abstract,boolean,byte,extends,final,finally,implements,import,instanceof,null,native,package,strictfp,super,synchronized,throws,transient"], +H=[G,"as,base,by,checked,decimal,delegate,descending,dynamic,event,fixed,foreach,from,group,implicit,in,interface,internal,into,is,lock,object,out,override,orderby,params,partial,readonly,ref,sbyte,sealed,stackalloc,string,select,uint,ulong,unchecked,unsafe,ushort,var"],w=[w,"debugger,eval,export,function,get,null,set,undefined,var,with,Infinity,NaN"],I=[v,"and,as,assert,class,def,del,elif,except,exec,finally,from,global,import,in,is,lambda,nonlocal,not,or,pass,print,raise,try,with,yield,False,True,None"], +J=[v,"alias,and,begin,case,class,def,defined,elsif,end,ensure,false,in,module,next,nil,not,or,redo,rescue,retry,self,super,then,true,undef,unless,until,when,yield,BEGIN,END"],v=[v,"case,done,elif,esac,eval,fi,function,in,local,set,then,until"],K=/^(DIR|FILE|vector|(de|priority_)?queue|list|stack|(const_)?iterator|(multi)?(set|map)|bitset|u?(int|float)\d*)/,N=/\S/,O=u({keywords:[F,H,w,"caller,delete,die,do,dump,elsif,eval,exit,foreach,for,goto,if,import,last,local,my,next,no,our,print,package,redo,require,sub,undef,unless,until,use,wantarray,while,BEGIN,END"+ +I,J,v],hashComments:!0,cStyleComments:!0,multiLineStrings:!0,regexLiterals:!0}),A={};k(O,["default-code"]);k(x([],[["pln",/^[^]*(?:>|$)/],["com",/^<\!--[\S\s]*?(?:--\>|$)/],["lang-",/^<\?([\S\s]+?)(?:\?>|$)/],["lang-",/^<%([\S\s]+?)(?:%>|$)/],["pun",/^(?:<[%?]|[%?]>)/],["lang-",/^]*>([\S\s]+?)<\/xmp\b[^>]*>/i],["lang-js",/^]*>([\S\s]*?)(<\/script\b[^>]*>)/i],["lang-css",/^]*>([\S\s]*?)(<\/style\b[^>]*>)/i],["lang-in.tag",/^(<\/?[a-z][^<>]*>)/i]]), +["default-markup","htm","html","mxml","xhtml","xml","xsl"]);k(x([["pln",/^\s+/,q," \t\r\n"],["atv",/^(?:"[^"]*"?|'[^']*'?)/,q,"\"'"]],[["tag",/^^<\/?[a-z](?:[\w-.:]*\w)?|\/?>$/i],["atn",/^(?!style[\s=]|on)[a-z](?:[\w:-]*\w)?/i],["lang-uq.val",/^=\s*([^\s"'>]*(?:[^\s"'/>]|\/(?=\s)))/],["pun",/^[/<->]+/],["lang-js",/^on\w+\s*=\s*"([^"]+)"/i],["lang-js",/^on\w+\s*=\s*'([^']+)'/i],["lang-js",/^on\w+\s*=\s*([^\s"'>]+)/i],["lang-css",/^style\s*=\s*"([^"]+)"/i],["lang-css",/^style\s*=\s*'([^']+)'/i],["lang-css", +/^style\s*=\s*([^\s"'>]+)/i]]),["in.tag"]);k(x([],[["atv",/^[\S\s]+/]]),["uq.val"]);k(u({keywords:F,hashComments:!0,cStyleComments:!0,types:K}),["c","cc","cpp","cxx","cyc","m"]);k(u({keywords:"null,true,false"}),["json"]);k(u({keywords:H,hashComments:!0,cStyleComments:!0,verbatimStrings:!0,types:K}),["cs"]);k(u({keywords:G,cStyleComments:!0}),["java"]);k(u({keywords:v,hashComments:!0,multiLineStrings:!0}),["bsh","csh","sh"]);k(u({keywords:I,hashComments:!0,multiLineStrings:!0,tripleQuotedStrings:!0}), +["cv","py"]);k(u({keywords:"caller,delete,die,do,dump,elsif,eval,exit,foreach,for,goto,if,import,last,local,my,next,no,our,print,package,redo,require,sub,undef,unless,until,use,wantarray,while,BEGIN,END",hashComments:!0,multiLineStrings:!0,regexLiterals:!0}),["perl","pl","pm"]);k(u({keywords:J,hashComments:!0,multiLineStrings:!0,regexLiterals:!0}),["rb"]);k(u({keywords:w,cStyleComments:!0,regexLiterals:!0}),["js"]);k(u({keywords:"all,and,by,catch,class,else,extends,false,finally,for,if,in,is,isnt,loop,new,no,not,null,of,off,on,or,return,super,then,true,try,unless,until,when,while,yes", +hashComments:3,cStyleComments:!0,multilineStrings:!0,tripleQuotedStrings:!0,regexLiterals:!0}),["coffee"]);k(x([],[["str",/^[\S\s]+/]]),["regex"]);window.prettyPrintOne=function(a,m,e){var h=document.createElement("PRE");h.innerHTML=a;e&&D(h,e);E({g:m,i:e,h:h});return h.innerHTML};window.prettyPrint=function(a){function m(){for(var e=window.PR_SHOULD_USE_CONTINUATION?l.now()+250:Infinity;p=0){var k=k.match(g),f,b;if(b= +!k){b=n;for(var o=void 0,c=b.firstChild;c;c=c.nextSibling)var i=c.nodeType,o=i===1?o?b:c:i===3?N.test(c.nodeValue)?b:o:o;b=(f=o===b?void 0:o)&&"CODE"===f.tagName}b&&(k=f.className.match(g));k&&(k=k[1]);b=!1;for(o=n.parentNode;o;o=o.parentNode)if((o.tagName==="pre"||o.tagName==="code"||o.tagName==="xmp")&&o.className&&o.className.indexOf("prettyprint")>=0){b=!0;break}b||((b=(b=n.className.match(/\blinenums\b(?::(\d+))?/))?b[1]&&b[1].length?+b[1]:!0:!1)&&D(n,b),d={g:k,h:n,i:b},E(d))}}p + + \ No newline at end of file diff --git a/partials/overview.html b/partials/overview.html index 2bfb2f7..332cd60 100644 --- a/partials/overview.html +++ b/partials/overview.html @@ -21,6 +21,44 @@

Drag and Drop for AngularJS

+ +

Quick Demo

+
+
+
{{list1.title}}
+
+
+
+<div class="btn btn-primary" data-drag="true" data-jqyoui-options="{revert: 'invalid'}" ng-model="list1" jqyoui-draggable="{animate:true}" ng-hide="!list1.title">{{list1.title}}</div>
+
+
+
+ Drop below: +
+
{{list2.title}}
+
+
+
+
+<div class="thumbnail" data-drop="true" data-jqyoui-options ng-model="list2" jqyoui-droppable style='height:50px;'>
+  <div class="btn btn-success" data-drag="false" data-jqyoui-options ng-model="list2" jqyoui-draggable ng-hide="!list2.title">{{list2.title}}</div>
+</div>
+
+
+
+ List1 Model: {{list1}}
+ List2 Model: {{list2}} +
+
+
+App.controller('OverviewCtrl', function($scope) {
+  $scope.list1 = {title: 'AngularJS - Drag Me'};
+  $scope.list2 = {};
+});
+
+
+
+

Angular Draggable options

@@ -168,4 +206,11 @@

Angular Droppable options

- \ No newline at end of file + + \ No newline at end of file From 1f83522715177dcbe0af19ef138cd9fea65ce21a Mon Sep 17 00:00:00 2001 From: codef0rmer Date: Sat, 16 Mar 2013 12:06:14 +0530 Subject: [PATCH 03/21] Update module name --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index 8b877c8..a928aae 100644 --- a/index.html +++ b/index.html @@ -60,7 +60,7 @@ - + - + From 000fa5929758c964e29907f0102b833905edb487 Mon Sep 17 00:00:00 2001 From: codef0rmer Date: Sun, 10 Nov 2013 19:31:54 +0530 Subject: [PATCH 10/21] supports controllerAs syntax (with a demo) --- angular-dragdrop.min.js | 4 ++-- index.html | 4 ++++ partials/ctrl.html | 1 + 3 files changed, 7 insertions(+), 2 deletions(-) create mode 100644 partials/ctrl.html diff --git a/angular-dragdrop.min.js b/angular-dragdrop.min.js index edd86df..ca8dc82 100644 --- a/angular-dragdrop.min.js +++ b/angular-dragdrop.min.js @@ -22,8 +22,8 @@ * Implementing Drag and Drop functionality in AngularJS is easier than ever. * Demo: http://codef0rmer.github.com/angular-dragdrop/ * - * @version 1.0.3 + * @version 1.0.5 * * (c) 2013 Amit Gharat a.k.a codef0rmer - amitgharat.wordpress.com */ -var jqyoui=angular.module("ngDragDrop",[]).service("ngDragDropService",["$timeout","$parse",function($timeout,$parse){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){var i="",s="",o={},u={},a=null,f={},l={},c,h,p=null,d=t.scope(),v=e.scope();i=e.attr("ng-model");s=t.attr("ng-model");c=v.$eval(i);h=d.$eval(s);p=t.find("[jqyoui-draggable]:last");u=d.$eval(t.attr("jqyoui-droppable"))||[];o=v.$eval(e.attr("jqyoui-draggable"))||[];o.index=this.fixIndex(v,o,c);u.index=this.fixIndex(d,u,h);a=angular.isArray(c)?o.index:null;f=angular.isArray(c)?c[a]:c;if(angular.isArray(h)&&u&&u.index!==undefined){l=h[u.index]}else if(!angular.isArray(h)){l=h}else{l={}}if(o.animate===true){this.move(e,p.length>0?p:t,null,"fast",u,null);this.move(p.length>0&&!u.multiple?p:[],e.parent("[jqyoui-droppable]"),jqyoui.startXY,"fast",u,function(){$timeout(function(){e.css({position:"relative",left:"",top:""});p.css({position:"relative",left:"",top:""});this.mutateDraggable(v,u,o,i,s,l,e);this.mutateDroppable(d,u,o,s,f,a);this.callEventCallback(d,u.onDrop,n,r)}.bind(this))}.bind(this))}else{$timeout(function(){this.mutateDraggable(v,u,o,i,s,l,e);this.mutateDroppable(d,u,o,s,f,a);this.callEventCallback(d,u.onDrop,n,r)}.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){var o=e.$eval(r);e.__dragItem=i;if(angular.isArray(o)){if(t&&t.index>=0){o[t.index]=i}else{o.push(i)}if(n&&n.placeholder===true){o[o.length-1]["jqyoui_pos"]=s}}else{$parse(r+" = __dragItem")(e);if(n&&n.placeholder===true){o["jqyoui_pos"]=s}}};this.mutateDraggable=function(e,t,n,r,i,s,o){var u=angular.equals(angular.copy(s),{}),a=e.$eval(r);e.__dropItem=s;if(n&&n.placeholder){if(n.placeholder!="keep"){if(angular.isArray(a)&&n.index!==undefined){a[n.index]=s}else{$parse(r+" = __dropItem")(e)}}}else{if(angular.isArray(a)){if(u){if(n&&n.placeholder!==true&&n.placeholder!=="keep"){a.splice(n.index,1)}}else{a[n.index]=s}}else{$parse(r+" = __dropItem")(e);if(e.$parent){$parse(r+" = __dropItem")(e.$parent)}}}o.css({"z-index":"",left:"",top:""})};this.fixIndex=function(e,t,n){if(t.applyFilter&&angular.isArray(n)&&n.length>0){var r=e[t.applyFilter](),i=r[t.index],s=undefined;n.forEach(function(e,t){if(angular.equals(e,i)){s=t}});return s}return t.index}}]).directive("jqyouiDraggable",["ngDragDropService",function(e){return{require:"?jqyouiDroppable",restrict:"A",link:function(t,n,r){var i,s;var o=function(o,u){if(o){i=t.$eval(n.attr("jqyoui-draggable"))||[];n.draggable({disabled:false}).draggable(t.$eval(r.jqyouiOptions)||{}).draggable({start:function(n,r){s=angular.element(this).css("z-index");angular.element(this).css("z-index",99999);jqyoui.startXY=angular.element(this).offset();e.callEventCallback(t,i.onStart,n,r)},stop:function(n,r){angular.element(this).css("z-index",s);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)},o);o()}}}]).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(t,n){e.invokeDrop(angular.element(n.draggable),angular.element(this),t,n)}})}else{n.droppable({disabled:true})}};t.$watch(function(){return t.$eval(r.drop)},i);i()}}}]) +(function(e,t,n){"use strict";var r=t.module("ngDragDrop",[]).service("ngDragDropService",["$timeout","$parse",function(i,s){this.callEventCallback=function(e,t,n,r){function f(t){var n=t.indexOf("(")!==-1?t.indexOf("("):t.length,r=t.lastIndexOf(")")!==-1?t.lastIndexOf(")"):t.length,i=t.substring(n+1,r),o=t.match(/^[^.]+.\s*/)[0].slice(0,-1);o=e[o]&&typeof e[o].constructor==="function"?o:null;return{callback:t.substring(o&&o.length+1||0,n),args:(i&&i.split(",")||[]).map(function(t){return s(t)(e)}),constructor:o}}if(!t)return;var i=f(t),o=i.callback,u=i.constructor,a=[n,r].concat(i.args);e.$apply((e[o]||e[u][o]).apply(e,a))};this.invokeDrop=function(e,s,o,u){var a="",f="",l={},c={},h=null,p={},d={},v,m,g=null,y=s.scope(),b=e.scope();a=e.ngattr("ng-model");f=s.ngattr("ng-model");v=b.$eval(a);m=y.$eval(f);g=s.find("[jqyoui-draggable]:last");c=y.$eval(s.attr("jqyoui-droppable"))||[];l=b.$eval(e.attr("jqyoui-draggable"))||[];l.index=this.fixIndex(b,l,v);c.index=this.fixIndex(y,c,m);h=t.isArray(v)?l.index:null;p=t.isArray(v)?v[h]:v;if(t.isArray(m)&&c&&c.index!==n){d=m[c.index]}else if(!t.isArray(m)){d=m}else{d={}}if(l.animate===true){this.move(e,g.length>0?g:s,null,"fast",c,null);this.move(g.length>0&&!c.multiple?g:[],e.parent("[jqyoui-droppable]"),r.startXY,"fast",c,function(){i(function(){e.css({position:"relative",left:"",top:""});g.css({position:"relative",left:"",top:"",display:""});this.mutateDraggable(b,c,l,a,f,d,e);this.mutateDroppable(y,c,l,f,p,h);this.callEventCallback(y,c.onDrop,o,u)}.bind(this))}.bind(this))}else{i(function(){this.mutateDraggable(b,c,l,a,f,d,e);this.mutateDroppable(y,c,l,f,p,h);this.callEventCallback(y,c.onDrop,o,u)}.bind(this))}};this.move=function(t,r,i,s,o,u){if(t.length===0){if(u){e.setTimeout(function(){u()},300)}return false}var a=9999,f=t.offset(),l=r&&r.is(":visible"),c=r.hasClass("ng-hide");if(i===null&&r.length>0){if(r.attr("jqyoui-draggable")!==n&&r.ngattr("ng-model")!==n&&r.is(":visible")&&o&&o.multiple){i=r.offset();if(o.stack===false){i.left+=r.outerWidth(true)}else{i.top+=r.outerHeight(true)}}else{if(c)r.removeClass("ng-hide");i=r.css({visibility:"hidden",display:"block"}).offset();r.css({visibility:"",display:l?"block":"none"})}}t.css({position:"absolute","z-index":a}).css(f).animate(i,s,function(){if(c)r.addClass("ng-hide");if(u)u()})};this.mutateDroppable=function(e,n,r,i,o,u){var a=e.$eval(i);e.dndDragItem=o;if(t.isArray(a)){if(n&&n.index>=0){a[n.index]=o}else{a.push(o)}if(r&&r.placeholder===true){a[a.length-1]["jqyoui_pos"]=u}}else{s(i+" = dndDragItem")(e);if(r&&r.placeholder===true){a["jqyoui_pos"]=u}}};this.mutateDraggable=function(e,r,i,o,u,a,f){var l=t.equals(t.copy(a),{}),c=e.$eval(o);e.dndDropItem=a;if(i&&i.placeholder){if(i.placeholder!="keep"){if(t.isArray(c)&&i.index!==n){c[i.index]=a}else{s(o+" = dndDropItem")(e)}}}else{if(t.isArray(c)){if(l){if(i&&i.placeholder!==true&&i.placeholder!=="keep"){c.splice(i.index,1)}}else{c[i.index]=a}}else{s(o+" = dndDropItem")(e);if(e.$parent){s(o+" = dndDropItem")(e.$parent)}}}f.css({"z-index":"",left:"",top:""})};this.fixIndex=function(e,r,i){if(r.applyFilter&&t.isArray(i)&&i.length>0){var s=e[r.applyFilter](),o=s[r.index],u=n;i.forEach(function(e,n){if(t.equals(e,o)){u=n}});return u}return r.index}}]).directive("jqyouiDraggable",["ngDragDropService",function(e){return{require:"?jqyouiDroppable",restrict:"A",link:function(n,i,s){var o,u;var a=function(a,f){if(a){o=n.$eval(i.attr("jqyoui-draggable"))||[];i.draggable({disabled:false}).draggable(n.$eval(s.jqyouiOptions)||{}).draggable({start:function(i,s){u=t.element(this).css("z-index");t.element(this).css("z-index",99999);r.startXY=t.element(this).offset();e.callEventCallback(n,o.onStart,i,s)},stop:function(r,i){t.element(this).css("z-index",u);e.callEventCallback(n,o.onStop,r,i)},drag:function(t,r){e.callEventCallback(n,o.onDrag,t,r)}})}else{i.draggable({disabled:true})}};n.$watch(function(){return n.$eval(s.drag)},a);a()}}}]).directive("jqyouiDroppable",["ngDragDropService",function(e){return{restrict:"A",priority:1,link:function(n,r,i){var s=function(s,o){if(s){r.droppable({disabled:false}).droppable(n.$eval(i.jqyouiOptions)||{}).droppable({over:function(r,i){var s=n.$eval(t.element(this).attr("jqyoui-droppable"))||[];e.callEventCallback(n,s.onOver,r,i)},out:function(r,i){var s=n.$eval(t.element(this).attr("jqyoui-droppable"))||[];e.callEventCallback(n,s.onOut,r,i)},drop:function(r,s){if(t.element(s.draggable).ngattr("ng-model")&&i.ngModel){e.invokeDrop(t.element(s.draggable),t.element(this),r,s)}else{e.callEventCallback(n,(n.$eval(t.element(this).attr("jqyoui-droppable"))||[]).onDrop,r,s)}}})}else{r.droppable({disabled:true})}};n.$watch(function(){return n.$eval(i.drop)},s);s()}}}]);$.fn.ngattr=function(e,n){var r=t.element(this).get(0);return r.getAttribute(e)||r.getAttribute("data-"+e)}})(window,window.angular) diff --git a/index.html b/index.html index 940eac5..6c40ab3 100644 --- a/index.html +++ b/index.html @@ -18,6 +18,8 @@ padding-top: 60px; padding-bottom: 40px; } + + li { list-style: none; } @@ -40,6 +42,7 @@
  • Connect Frameworks
  • Shopping Cart with cloning enabled
  • filters with ngRepeat
    • +
  • ControllerAs Syntax
    • @@ -68,6 +71,7 @@ .when('/mvc', { templateUrl: 'partials/mvc.html'}) .when('/cart', { templateUrl: 'partials/cart.html'}) .when('/filter', { templateUrl: 'partials/filter.html'}) + .when('/ctrl', { templateUrl: 'partials/ctrl.html'}) .otherwise({ redirectTo: '/' }); }]); App.controller('OverviewCtrl', function($scope) { diff --git a/partials/ctrl.html b/partials/ctrl.html new file mode 100644 index 0000000..f6a39a6 --- /dev/null +++ b/partials/ctrl.html @@ -0,0 +1 @@ + \ No newline at end of file From f4c9665c23e7ce07aedbbf76f45fe49d57565b03 Mon Sep 17 00:00:00 2001 From: Adam Bar Date: Mon, 1 Sep 2014 11:47:52 +0200 Subject: [PATCH 11/21] Fixing copy-paste error on droppable disabled flag name Droppable disabled flag name is actually "drop", not "drag". --- partials/overview.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/partials/overview.html b/partials/overview.html index 66d9b8b..d0a9f61 100644 --- a/partials/overview.html +++ b/partials/overview.html @@ -199,7 +199,7 @@

    Angular Droppable options

    requires if both droppable as well as draggable share the same ngModel. - data-drag + data-drop boolean true If true, element can be droppable. Disabled otherwise. @@ -225,4 +225,4 @@

    Angular Droppable options

    window.prettyPrint && prettyPrint(); }) }(window.jQuery); - \ No newline at end of file + From 82882dbfbba344107ec62adb51eb5834fff69ef0 Mon Sep 17 00:00:00 2001 From: codef0rmer Date: Thu, 2 Oct 2014 00:20:38 +0530 Subject: [PATCH 12/21] chore(*): Use the latest version --- angular-dragdrop.min.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/angular-dragdrop.min.js b/angular-dragdrop.min.js index ca8dc82..c871973 100644 --- a/angular-dragdrop.min.js +++ b/angular-dragdrop.min.js @@ -22,8 +22,8 @@ * Implementing Drag and Drop functionality in AngularJS is easier than ever. * Demo: http://codef0rmer.github.com/angular-dragdrop/ * - * @version 1.0.5 + * @version 1.0.8 * * (c) 2013 Amit Gharat a.k.a codef0rmer - amitgharat.wordpress.com */ -(function(e,t,n){"use strict";var r=t.module("ngDragDrop",[]).service("ngDragDropService",["$timeout","$parse",function(i,s){this.callEventCallback=function(e,t,n,r){function f(t){var n=t.indexOf("(")!==-1?t.indexOf("("):t.length,r=t.lastIndexOf(")")!==-1?t.lastIndexOf(")"):t.length,i=t.substring(n+1,r),o=t.match(/^[^.]+.\s*/)[0].slice(0,-1);o=e[o]&&typeof e[o].constructor==="function"?o:null;return{callback:t.substring(o&&o.length+1||0,n),args:(i&&i.split(",")||[]).map(function(t){return s(t)(e)}),constructor:o}}if(!t)return;var i=f(t),o=i.callback,u=i.constructor,a=[n,r].concat(i.args);e.$apply((e[o]||e[u][o]).apply(e,a))};this.invokeDrop=function(e,s,o,u){var a="",f="",l={},c={},h=null,p={},d={},v,m,g=null,y=s.scope(),b=e.scope();a=e.ngattr("ng-model");f=s.ngattr("ng-model");v=b.$eval(a);m=y.$eval(f);g=s.find("[jqyoui-draggable]:last");c=y.$eval(s.attr("jqyoui-droppable"))||[];l=b.$eval(e.attr("jqyoui-draggable"))||[];l.index=this.fixIndex(b,l,v);c.index=this.fixIndex(y,c,m);h=t.isArray(v)?l.index:null;p=t.isArray(v)?v[h]:v;if(t.isArray(m)&&c&&c.index!==n){d=m[c.index]}else if(!t.isArray(m)){d=m}else{d={}}if(l.animate===true){this.move(e,g.length>0?g:s,null,"fast",c,null);this.move(g.length>0&&!c.multiple?g:[],e.parent("[jqyoui-droppable]"),r.startXY,"fast",c,function(){i(function(){e.css({position:"relative",left:"",top:""});g.css({position:"relative",left:"",top:"",display:""});this.mutateDraggable(b,c,l,a,f,d,e);this.mutateDroppable(y,c,l,f,p,h);this.callEventCallback(y,c.onDrop,o,u)}.bind(this))}.bind(this))}else{i(function(){this.mutateDraggable(b,c,l,a,f,d,e);this.mutateDroppable(y,c,l,f,p,h);this.callEventCallback(y,c.onDrop,o,u)}.bind(this))}};this.move=function(t,r,i,s,o,u){if(t.length===0){if(u){e.setTimeout(function(){u()},300)}return false}var a=9999,f=t.offset(),l=r&&r.is(":visible"),c=r.hasClass("ng-hide");if(i===null&&r.length>0){if(r.attr("jqyoui-draggable")!==n&&r.ngattr("ng-model")!==n&&r.is(":visible")&&o&&o.multiple){i=r.offset();if(o.stack===false){i.left+=r.outerWidth(true)}else{i.top+=r.outerHeight(true)}}else{if(c)r.removeClass("ng-hide");i=r.css({visibility:"hidden",display:"block"}).offset();r.css({visibility:"",display:l?"block":"none"})}}t.css({position:"absolute","z-index":a}).css(f).animate(i,s,function(){if(c)r.addClass("ng-hide");if(u)u()})};this.mutateDroppable=function(e,n,r,i,o,u){var a=e.$eval(i);e.dndDragItem=o;if(t.isArray(a)){if(n&&n.index>=0){a[n.index]=o}else{a.push(o)}if(r&&r.placeholder===true){a[a.length-1]["jqyoui_pos"]=u}}else{s(i+" = dndDragItem")(e);if(r&&r.placeholder===true){a["jqyoui_pos"]=u}}};this.mutateDraggable=function(e,r,i,o,u,a,f){var l=t.equals(t.copy(a),{}),c=e.$eval(o);e.dndDropItem=a;if(i&&i.placeholder){if(i.placeholder!="keep"){if(t.isArray(c)&&i.index!==n){c[i.index]=a}else{s(o+" = dndDropItem")(e)}}}else{if(t.isArray(c)){if(l){if(i&&i.placeholder!==true&&i.placeholder!=="keep"){c.splice(i.index,1)}}else{c[i.index]=a}}else{s(o+" = dndDropItem")(e);if(e.$parent){s(o+" = dndDropItem")(e.$parent)}}}f.css({"z-index":"",left:"",top:""})};this.fixIndex=function(e,r,i){if(r.applyFilter&&t.isArray(i)&&i.length>0){var s=e[r.applyFilter](),o=s[r.index],u=n;i.forEach(function(e,n){if(t.equals(e,o)){u=n}});return u}return r.index}}]).directive("jqyouiDraggable",["ngDragDropService",function(e){return{require:"?jqyouiDroppable",restrict:"A",link:function(n,i,s){var o,u;var a=function(a,f){if(a){o=n.$eval(i.attr("jqyoui-draggable"))||[];i.draggable({disabled:false}).draggable(n.$eval(s.jqyouiOptions)||{}).draggable({start:function(i,s){u=t.element(this).css("z-index");t.element(this).css("z-index",99999);r.startXY=t.element(this).offset();e.callEventCallback(n,o.onStart,i,s)},stop:function(r,i){t.element(this).css("z-index",u);e.callEventCallback(n,o.onStop,r,i)},drag:function(t,r){e.callEventCallback(n,o.onDrag,t,r)}})}else{i.draggable({disabled:true})}};n.$watch(function(){return n.$eval(s.drag)},a);a()}}}]).directive("jqyouiDroppable",["ngDragDropService",function(e){return{restrict:"A",priority:1,link:function(n,r,i){var s=function(s,o){if(s){r.droppable({disabled:false}).droppable(n.$eval(i.jqyouiOptions)||{}).droppable({over:function(r,i){var s=n.$eval(t.element(this).attr("jqyoui-droppable"))||[];e.callEventCallback(n,s.onOver,r,i)},out:function(r,i){var s=n.$eval(t.element(this).attr("jqyoui-droppable"))||[];e.callEventCallback(n,s.onOut,r,i)},drop:function(r,s){if(t.element(s.draggable).ngattr("ng-model")&&i.ngModel){e.invokeDrop(t.element(s.draggable),t.element(this),r,s)}else{e.callEventCallback(n,(n.$eval(t.element(this).attr("jqyoui-droppable"))||[]).onDrop,r,s)}}})}else{r.droppable({disabled:true})}};n.$watch(function(){return n.$eval(i.drop)},s);s()}}}]);$.fn.ngattr=function(e,n){var r=t.element(this).get(0);return r.getAttribute(e)||r.getAttribute("data-"+e)}})(window,window.angular) +(function(e,t,n){"use strict";var r=t.module("ngDragDrop",[]).service("ngDragDropService",["$timeout","$parse",function(i,s){this.callEventCallback=function(e,t,n,r){function f(t){var n=t.indexOf("(")!==-1?t.indexOf("("):t.length,r=t.lastIndexOf(")")!==-1?t.lastIndexOf(")"):t.length,i=t.substring(n+1,r),o=t.match(/^[^.]+.\s*/)[0].slice(0,-1);o=e[o]&&typeof e[o].constructor==="function"?o:null;return{callback:t.substring(o&&o.length+1||0,n),args:(i&&i.split(",")||[]).map(function(t){return s(t)(e)}),constructor:o}}if(!t)return;var i=f(t),o=i.callback,u=i.constructor,a=[n,r].concat(i.args);e.$apply((e[o]||e[u][o]).apply(e,a))};this.invokeDrop=function(e,s,o,u){var a="",f="",l={},c={},h=null,p={},d={},v,m,g=null,y=s.scope(),b=e.scope();a=e.ngattr("ng-model");f=s.ngattr("ng-model");v=b.$eval(a);m=y.$eval(f);g=s.find("[jqyoui-draggable]:last,[data-jqyoui-draggable]:last");c=y.$eval(s.attr("jqyoui-droppable")||s.attr("data-jqyoui-droppable"))||[];l=b.$eval(e.attr("jqyoui-draggable")||e.attr("data-jqyoui-draggable"))||[];l.index=this.fixIndex(b,l,v);c.index=this.fixIndex(y,c,m);h=t.isArray(v)?l.index:null;p=t.copy(t.isArray(v)?v[h]:v);if(t.isArray(m)&&c&&c.index!==n){d=m[c.index]}else if(!t.isArray(m)){d=m}else{d={}}d=t.copy(d);if(l.animate===true){this.move(e,g.length>0?g:s,null,"fast",c,null);this.move(g.length>0&&!c.multiple?g:[],e.parent("[jqyoui-droppable],[data-jqyoui-droppable]"),r.startXY,"fast",c,t.bind(this,function(){i(t.bind(this,function(){e.css({position:"relative",left:"",top:""});g.css({position:"relative",left:"",top:"",display:g.css("display")==="none"?"":g.css("display")});this.mutateDraggable(b,c,l,a,f,d,e);this.mutateDroppable(y,c,l,f,p,h);this.callEventCallback(y,c.onDrop,o,u)}))}))}else{i(t.bind(this,function(){this.mutateDraggable(b,c,l,a,f,d,e);this.mutateDroppable(y,c,l,f,p,h);this.callEventCallback(y,c.onDrop,o,u)}))}};this.move=function(t,r,i,s,o,u){if(t.length===0){if(u){e.setTimeout(function(){u()},300)}return false}var a=t.css("z-index"),f=t[o.containment||"offset"](),l=r&&r.is(":visible"),c=r.hasClass("ng-hide");if(i===null&&r.length>0){if((r.attr("jqyoui-draggable")||r.attr("data-jqyoui-draggable"))!==n&&r.ngattr("ng-model")!==n&&r.is(":visible")&&o&&o.multiple){i=r[o.containment||"offset"]();if(o.stack===false){i.left+=r.outerWidth(true)}else{i.top+=r.outerHeight(true)}}else{if(c)r.removeClass("ng-hide");i=r.css({visibility:"hidden",display:"block"})[o.containment||"offset"]();r.css({visibility:"",display:l?"block":"none"})}}t.css({position:"absolute","z-index":9999}).css(f).animate(i,s,function(){if(c)r.addClass("ng-hide");t.css("z-index",a);if(u)u()})};this.mutateDroppable=function(e,n,r,i,o,u){var a=e.$eval(i);e.dndDragItem=o;if(t.isArray(a)){if(n&&n.index>=0){a[n.index]=o}else{a.push(o)}if(r&&r.placeholder===true){a[a.length-1]["jqyoui_pos"]=u}}else{s(i+" = dndDragItem")(e);if(r&&r.placeholder===true){a["jqyoui_pos"]=u}}};this.mutateDraggable=function(e,r,i,o,u,a,f){var l=t.equals(a,{})||!a,c=e.$eval(o);e.dndDropItem=a;if(i&&i.placeholder){if(i.placeholder!="keep"){if(t.isArray(c)&&i.index!==n){c[i.index]=a}else{s(o+" = dndDropItem")(e)}}}else{if(t.isArray(c)){if(l){if(i&&i.placeholder!==true&&i.placeholder!=="keep"){c.splice(i.index,1)}}else{c[i.index]=a}}else{s(o+" = dndDropItem")(e);if(e.$parent){s(o+" = dndDropItem")(e.$parent)}}}f.css({"z-index":"",left:"",top:""})};this.fixIndex=function(e,r,i){if(r.applyFilter&&t.isArray(i)&&i.length>0){var s=e[r.applyFilter](),o=s[r.index],u=n;i.forEach(function(e,n){if(t.equals(e,o)){u=n}});return u}return r.index}}]).directive("jqyouiDraggable",["ngDragDropService",function(e){return{require:"?jqyouiDroppable",restrict:"A",link:function(n,i,s){var o,u,a;var f=function(f,l){if(f){o=n.$eval(i.attr("jqyoui-draggable")||i.attr("data-jqyoui-draggable"))||{};u=n.$eval(s.jqyouiOptions)||{};i.draggable({disabled:false}).draggable(u).draggable({start:function(i,s){a=t.element(u.helper?s.helper:this).css("z-index");t.element(u.helper?s.helper:this).css("z-index",9999);r.startXY=t.element(this)[o.containment||"offset"]();e.callEventCallback(n,o.onStart,i,s)},stop:function(r,i){t.element(u.helper?i.helper:this).css("z-index",a);e.callEventCallback(n,o.onStop,r,i)},drag:function(t,r){e.callEventCallback(n,o.onDrag,t,r)}})}else{i.draggable({disabled:true})}};n.$watch(function(){return n.$eval(s.drag)},f);f();i.on("$destroy",function(){i.draggable({disabled:true}).draggable("destroy")})}}}]).directive("jqyouiDroppable",["ngDragDropService",function(e){return{restrict:"A",priority:1,link:function(n,r,i){var s;var o=function(o,u){if(o){s=n.$eval(t.element(r).attr("jqyoui-droppable")||t.element(r).attr("data-jqyoui-droppable"))||{};r.droppable({disabled:false}).droppable(n.$eval(i.jqyouiOptions)||{}).droppable({over:function(t,r){e.callEventCallback(n,s.onOver,t,r)},out:function(t,r){e.callEventCallback(n,s.onOut,t,r)},drop:function(r,o){if(t.element(o.draggable).ngattr("ng-model")&&i.ngModel){e.invokeDrop(t.element(o.draggable),t.element(this),r,o)}else{e.callEventCallback(n,s.onDrop,r,o)}}})}else{r.droppable({disabled:true})}};n.$watch(function(){return n.$eval(i.drop)},o);o();r.on("$destroy",function(){r.droppable({disabled:true}).droppable("destroy")})}}}]);t.element.prototype.ngattr=function(e,n){var r=t.element(this).get(0);return r.getAttribute(e)||r.getAttribute("data-"+e)}})(window,window.angular) \ No newline at end of file From 2a3806c1d55ad6269227aa5b21b8849eaa17e86b Mon Sep 17 00:00:00 2001 From: Amit Gharat Date: Mon, 5 Jan 2015 00:34:45 +0530 Subject: [PATCH 13/21] fix(overview): Add new options --- angular-dragdrop.min.js | 2 +- partials/overview.html | 24 ++++++++++++++++++++++++ 2 files changed, 25 insertions(+), 1 deletion(-) diff --git a/angular-dragdrop.min.js b/angular-dragdrop.min.js index c871973..729cdc9 100644 --- a/angular-dragdrop.min.js +++ b/angular-dragdrop.min.js @@ -26,4 +26,4 @@ * * (c) 2013 Amit Gharat a.k.a codef0rmer - amitgharat.wordpress.com */ -(function(e,t,n){"use strict";var r=t.module("ngDragDrop",[]).service("ngDragDropService",["$timeout","$parse",function(i,s){this.callEventCallback=function(e,t,n,r){function f(t){var n=t.indexOf("(")!==-1?t.indexOf("("):t.length,r=t.lastIndexOf(")")!==-1?t.lastIndexOf(")"):t.length,i=t.substring(n+1,r),o=t.match(/^[^.]+.\s*/)[0].slice(0,-1);o=e[o]&&typeof e[o].constructor==="function"?o:null;return{callback:t.substring(o&&o.length+1||0,n),args:(i&&i.split(",")||[]).map(function(t){return s(t)(e)}),constructor:o}}if(!t)return;var i=f(t),o=i.callback,u=i.constructor,a=[n,r].concat(i.args);e.$apply((e[o]||e[u][o]).apply(e,a))};this.invokeDrop=function(e,s,o,u){var a="",f="",l={},c={},h=null,p={},d={},v,m,g=null,y=s.scope(),b=e.scope();a=e.ngattr("ng-model");f=s.ngattr("ng-model");v=b.$eval(a);m=y.$eval(f);g=s.find("[jqyoui-draggable]:last,[data-jqyoui-draggable]:last");c=y.$eval(s.attr("jqyoui-droppable")||s.attr("data-jqyoui-droppable"))||[];l=b.$eval(e.attr("jqyoui-draggable")||e.attr("data-jqyoui-draggable"))||[];l.index=this.fixIndex(b,l,v);c.index=this.fixIndex(y,c,m);h=t.isArray(v)?l.index:null;p=t.copy(t.isArray(v)?v[h]:v);if(t.isArray(m)&&c&&c.index!==n){d=m[c.index]}else if(!t.isArray(m)){d=m}else{d={}}d=t.copy(d);if(l.animate===true){this.move(e,g.length>0?g:s,null,"fast",c,null);this.move(g.length>0&&!c.multiple?g:[],e.parent("[jqyoui-droppable],[data-jqyoui-droppable]"),r.startXY,"fast",c,t.bind(this,function(){i(t.bind(this,function(){e.css({position:"relative",left:"",top:""});g.css({position:"relative",left:"",top:"",display:g.css("display")==="none"?"":g.css("display")});this.mutateDraggable(b,c,l,a,f,d,e);this.mutateDroppable(y,c,l,f,p,h);this.callEventCallback(y,c.onDrop,o,u)}))}))}else{i(t.bind(this,function(){this.mutateDraggable(b,c,l,a,f,d,e);this.mutateDroppable(y,c,l,f,p,h);this.callEventCallback(y,c.onDrop,o,u)}))}};this.move=function(t,r,i,s,o,u){if(t.length===0){if(u){e.setTimeout(function(){u()},300)}return false}var a=t.css("z-index"),f=t[o.containment||"offset"](),l=r&&r.is(":visible"),c=r.hasClass("ng-hide");if(i===null&&r.length>0){if((r.attr("jqyoui-draggable")||r.attr("data-jqyoui-draggable"))!==n&&r.ngattr("ng-model")!==n&&r.is(":visible")&&o&&o.multiple){i=r[o.containment||"offset"]();if(o.stack===false){i.left+=r.outerWidth(true)}else{i.top+=r.outerHeight(true)}}else{if(c)r.removeClass("ng-hide");i=r.css({visibility:"hidden",display:"block"})[o.containment||"offset"]();r.css({visibility:"",display:l?"block":"none"})}}t.css({position:"absolute","z-index":9999}).css(f).animate(i,s,function(){if(c)r.addClass("ng-hide");t.css("z-index",a);if(u)u()})};this.mutateDroppable=function(e,n,r,i,o,u){var a=e.$eval(i);e.dndDragItem=o;if(t.isArray(a)){if(n&&n.index>=0){a[n.index]=o}else{a.push(o)}if(r&&r.placeholder===true){a[a.length-1]["jqyoui_pos"]=u}}else{s(i+" = dndDragItem")(e);if(r&&r.placeholder===true){a["jqyoui_pos"]=u}}};this.mutateDraggable=function(e,r,i,o,u,a,f){var l=t.equals(a,{})||!a,c=e.$eval(o);e.dndDropItem=a;if(i&&i.placeholder){if(i.placeholder!="keep"){if(t.isArray(c)&&i.index!==n){c[i.index]=a}else{s(o+" = dndDropItem")(e)}}}else{if(t.isArray(c)){if(l){if(i&&i.placeholder!==true&&i.placeholder!=="keep"){c.splice(i.index,1)}}else{c[i.index]=a}}else{s(o+" = dndDropItem")(e);if(e.$parent){s(o+" = dndDropItem")(e.$parent)}}}f.css({"z-index":"",left:"",top:""})};this.fixIndex=function(e,r,i){if(r.applyFilter&&t.isArray(i)&&i.length>0){var s=e[r.applyFilter](),o=s[r.index],u=n;i.forEach(function(e,n){if(t.equals(e,o)){u=n}});return u}return r.index}}]).directive("jqyouiDraggable",["ngDragDropService",function(e){return{require:"?jqyouiDroppable",restrict:"A",link:function(n,i,s){var o,u,a;var f=function(f,l){if(f){o=n.$eval(i.attr("jqyoui-draggable")||i.attr("data-jqyoui-draggable"))||{};u=n.$eval(s.jqyouiOptions)||{};i.draggable({disabled:false}).draggable(u).draggable({start:function(i,s){a=t.element(u.helper?s.helper:this).css("z-index");t.element(u.helper?s.helper:this).css("z-index",9999);r.startXY=t.element(this)[o.containment||"offset"]();e.callEventCallback(n,o.onStart,i,s)},stop:function(r,i){t.element(u.helper?i.helper:this).css("z-index",a);e.callEventCallback(n,o.onStop,r,i)},drag:function(t,r){e.callEventCallback(n,o.onDrag,t,r)}})}else{i.draggable({disabled:true})}};n.$watch(function(){return n.$eval(s.drag)},f);f();i.on("$destroy",function(){i.draggable({disabled:true}).draggable("destroy")})}}}]).directive("jqyouiDroppable",["ngDragDropService",function(e){return{restrict:"A",priority:1,link:function(n,r,i){var s;var o=function(o,u){if(o){s=n.$eval(t.element(r).attr("jqyoui-droppable")||t.element(r).attr("data-jqyoui-droppable"))||{};r.droppable({disabled:false}).droppable(n.$eval(i.jqyouiOptions)||{}).droppable({over:function(t,r){e.callEventCallback(n,s.onOver,t,r)},out:function(t,r){e.callEventCallback(n,s.onOut,t,r)},drop:function(r,o){if(t.element(o.draggable).ngattr("ng-model")&&i.ngModel){e.invokeDrop(t.element(o.draggable),t.element(this),r,o)}else{e.callEventCallback(n,s.onDrop,r,o)}}})}else{r.droppable({disabled:true})}};n.$watch(function(){return n.$eval(i.drop)},o);o();r.on("$destroy",function(){r.droppable({disabled:true}).droppable("destroy")})}}}]);t.element.prototype.ngattr=function(e,n){var r=t.element(this).get(0);return r.getAttribute(e)||r.getAttribute("data-"+e)}})(window,window.angular) \ No newline at end of file +(function(e,t,n,r){"use strict";var i=t.module("ngDragDrop",[]).service("ngDragDropService",["$timeout","$parse",function(s,o){this.draggableScope=null;this.droppableScope=null;this.callEventCallback=function(e,t,r,i){function l(t){var r=t.indexOf("(")!==-1?t.indexOf("("):t.length,i=t.lastIndexOf(")")!==-1?t.lastIndexOf(")"):t.length,s=t.substring(r+1,i),u=t.match(/^[^.]+.\s*/)[0].slice(0,-1);u=e[u]&&typeof e[u].constructor==="function"?u:null;return{callback:t.substring(u&&u.length+1||0,r),args:n.map(s&&s.split(",")||[],function(t){return o(t)(e)}),constructor:u}}if(!t)return;var s=l(t),u=s.callback,a=s.constructor,f=[r,i].concat(s.args);e.$apply((e[u]||e[a][u]).apply(e,f))};this.invokeDrop=function(e,n,o,u){var a="",f="",l={},c={},h=null,p={},d={},v,m,g=null,y=this.droppableScope,b=this.draggableScope;a=e.ngattr("ng-model");f=n.ngattr("ng-model");v=b.$eval(a);m=y.$eval(f);g=n.find("[jqyoui-draggable]:last,[data-jqyoui-draggable]:last");c=y.$eval(n.attr("jqyoui-droppable")||n.attr("data-jqyoui-droppable"))||[];l=b.$eval(e.attr("jqyoui-draggable")||e.attr("data-jqyoui-draggable"))||[];l.index=this.fixIndex(b,l,v);c.index=this.fixIndex(y,c,m);h=t.isArray(v)?l.index:null;p=t.isArray(v)?v[h]:v;if(l.deepCopy){p=t.copy(p)}if(t.isArray(m)&&c&&c.index!==r){d=m[c.index]}else if(!t.isArray(m)){d=m}else{d={}}if(c.deepCopy){d=t.copy(d)}if(l.animate===true){this.move(e,g.length>0?g:n,null,"fast",c,null);this.move(g.length>0&&!c.multiple?g:[],e.parent("[jqyoui-droppable],[data-jqyoui-droppable]"),i.startXY,"fast",c,t.bind(this,function(){s(t.bind(this,function(){e.css({position:"relative",left:"",top:""});g.css({position:"relative",left:"",top:"",display:g.css("display")==="none"?"":g.css("display")});this.mutateDraggable(b,c,l,a,f,d,e);this.mutateDroppable(y,c,l,f,p,h);this.callEventCallback(y,c.onDrop,o,u)}))}))}else{s(t.bind(this,function(){this.mutateDraggable(b,c,l,a,f,d,e);this.mutateDroppable(y,c,l,f,p,h);this.callEventCallback(y,c.onDrop,o,u)}))}};this.move=function(t,n,i,s,o,u){if(t.length===0){if(u){e.setTimeout(function(){u()},300)}return false}var a=t.css("z-index"),f=t[o.containment||"offset"](),l=n.css("display"),c=n.hasClass("ng-hide");if(i===null&&n.length>0){if((n.attr("jqyoui-draggable")||n.attr("data-jqyoui-draggable"))!==r&&n.ngattr("ng-model")!==r&&n.is(":visible")&&o&&o.multiple){i=n[o.containment||"offset"]();if(o.stack===false){i.left+=n.outerWidth(true)}else{i.top+=n.outerHeight(true)}}else{if(c)n.removeClass("ng-hide");i=n.css({visibility:"hidden",display:"block"})[o.containment||"offset"]();n.css({visibility:"",display:l})}}t.css({position:"absolute","z-index":9999}).css(f).animate(i,s,function(){if(c)n.addClass("ng-hide");t.css("z-index",a);if(u)u()})};this.mutateDroppable=function(e,n,r,i,s,u){var a=e.$eval(i);e.dndDragItem=s;if(t.isArray(a)){if(n&&n.index>=0){a[n.index]=s}else{a.push(s)}if(r&&r.placeholder===true){a[a.length-1]["jqyoui_pos"]=u}}else{o(i+" = dndDragItem")(e);if(r&&r.placeholder===true){a["jqyoui_pos"]=u}}};this.mutateDraggable=function(e,n,i,s,u,a,f){var l=t.equals(a,{})||!a,c=e.$eval(s);e.dndDropItem=a;if(i&&i.placeholder){if(i.placeholder!="keep"){if(t.isArray(c)&&i.index!==r){c[i.index]=a}else{o(s+" = dndDropItem")(e)}}}else{if(t.isArray(c)){if(l){if(i&&i.placeholder!==true&&i.placeholder!=="keep"){c.splice(i.index,1)}}else{c[i.index]=a}}else{o(s+" = dndDropItem")(e);if(e.$parent){o(s+" = dndDropItem")(e.$parent)}}}f.css({"z-index":"",left:"",top:""})};this.fixIndex=function(e,n,i){if(n.applyFilter&&t.isArray(i)&&i.length>0){var s=e[n.applyFilter](),o=s[n.index],u=r;i.forEach(function(e,n){if(t.equals(e,o)){u=n}});return u}return n.index}}]).directive("jqyouiDraggable",["ngDragDropService",function(e){return{require:"?jqyouiDroppable",restrict:"A",link:function(n,r,s){var o,u,a;var f=function(f,l){if(f){o=n.$eval(r.attr("jqyoui-draggable")||r.attr("data-jqyoui-draggable"))||{};u=n.$eval(s.jqyouiOptions)||{};r.draggable({disabled:false}).draggable(u).draggable({start:function(r,s){e.draggableScope=n;a=t.element(u.helper?s.helper:this).css("z-index");t.element(u.helper?s.helper:this).css("z-index",9999);i.startXY=t.element(this)[o.containment||"offset"]();e.callEventCallback(n,o.onStart,r,s)},stop:function(r,i){t.element(u.helper?i.helper:this).css("z-index",a);e.callEventCallback(n,o.onStop,r,i)},drag:function(t,r){e.callEventCallback(n,o.onDrag,t,r)}})}else{r.draggable({disabled:true})}};n.$watch(function(){return n.$eval(s.drag)},f);f();r.on("$destroy",function(){r.draggable({disabled:true}).draggable("destroy")})}}}]).directive("jqyouiDroppable",["ngDragDropService",function(e){return{restrict:"A",priority:1,link:function(n,r,i){var s;var o=function(o,u){if(o){s=n.$eval(t.element(r).attr("jqyoui-droppable")||t.element(r).attr("data-jqyoui-droppable"))||{};r.droppable({disabled:false}).droppable(n.$eval(i.jqyouiOptions)||{}).droppable({over:function(t,r){e.callEventCallback(n,s.onOver,t,r)},out:function(t,r){e.callEventCallback(n,s.onOut,t,r)},drop:function(r,o){if(t.element(o.draggable).ngattr("ng-model")&&i.ngModel){e.droppableScope=n;e.invokeDrop(t.element(o.draggable),t.element(this),r,o)}else{e.callEventCallback(n,s.onDrop,r,o)}}})}else{r.droppable({disabled:true})}};n.$watch(function(){return n.$eval(i.drop)},o);o();r.on("$destroy",function(){r.droppable({disabled:true}).droppable("destroy")})}}}]);t.element.prototype.ngattr=function(e,n){var r=t.element(this).get(0);return r.getAttribute(e)||r.getAttribute("data-"+e)}})(window,window.angular,window.jQuery) \ No newline at end of file diff --git a/partials/overview.html b/partials/overview.html index d0a9f61..326506c 100644 --- a/partials/overview.html +++ b/partials/overview.html @@ -118,6 +118,18 @@

    Angular Draggable options

    applies AngularJS $filter on the list before swapping items. Only applicable, if ngRepeat has any filter (such as orderBy, limitTo) associated with it. + +         containment + string + + position/offset. Offset by default. This forces to use jQuery.position() or jQuery.offset() to calculate proper position with respect to parent element or document respectively. + + +         deepCopy + boolean (optional) + + If true, makes a deep copy of draggable that looses prototypical inheritance. + data-drag boolean @@ -198,6 +210,18 @@

    Angular Droppable options

    requires if both droppable as well as draggable share the same ngModel. + +         containment + string + + position/offset. Offset by default. This forces to use jQuery.position() or jQuery.offset() to calculate proper position with respect to parent element or document respectively. + + +         deepCopy + boolean (optional) + + If true, makes a deep copy of droppable that looses prototypical inheritance. + data-drop boolean From 4557d2bd8a134d13df766fbdf33029a3873648a4 Mon Sep 17 00:00:00 2001 From: Amit Gharat Date: Mon, 5 Jan 2015 17:33:21 +0530 Subject: [PATCH 14/21] feat(*): Added a new demo to demonstrate window.confirm vs bootstrap popup confirmation before drop --- index.html | 2 ++ partials/confirm.html | 1 + partials/overview.html | 14 ++++++++++---- 3 files changed, 13 insertions(+), 4 deletions(-) create mode 100644 partials/confirm.html diff --git a/index.html b/index.html index 6c40ab3..5a186d3 100644 --- a/index.html +++ b/index.html @@ -43,6 +43,7 @@
  • Shopping Cart with cloning enabled
  • filters with ngRepeat
  • ControllerAs Syntax
    • +
  • Confirmation before Drop
    • @@ -72,6 +73,7 @@ .when('/cart', { templateUrl: 'partials/cart.html'}) .when('/filter', { templateUrl: 'partials/filter.html'}) .when('/ctrl', { templateUrl: 'partials/ctrl.html'}) + .when('/confirm', { templateUrl: 'partials/confirm.html'}) .otherwise({ redirectTo: '/' }); }]); App.controller('OverviewCtrl', function($scope) { diff --git a/partials/confirm.html b/partials/confirm.html new file mode 100644 index 0000000..0d280c4 --- /dev/null +++ b/partials/confirm.html @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/partials/overview.html b/partials/overview.html index 326506c..e38b329 100644 --- a/partials/overview.html +++ b/partials/overview.html @@ -126,8 +126,8 @@

    Angular Draggable options

            deepCopy - boolean (optional) - + boolean + false If true, makes a deep copy of draggable that looses prototypical inheritance. @@ -218,10 +218,16 @@

    Angular Droppable options

            deepCopy - boolean (optional) - + boolean + false If true, makes a deep copy of droppable that looses prototypical inheritance. + +         beforeDrop + promise + promise + Ask for confirmation before dropping. Works with both window.confirm and custom popup. + data-drop boolean From e2b8a9f137e4b0cc2970a0a324e788681e5396bb Mon Sep 17 00:00:00 2001 From: codef0rmer Date: Sun, 6 Sep 2015 20:41:15 +0530 Subject: [PATCH 15/21] Add insertInline and direction option --- partials/overview.html | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/partials/overview.html b/partials/overview.html index e38b329..ed6cbdb 100644 --- a/partials/overview.html +++ b/partials/overview.html @@ -130,6 +130,24 @@

    Angular Draggable options

    false If true, makes a deep copy of draggable that looses prototypical inheritance. + +         beforeDrop + promise + false + Ask for confirmation before swapping. Works with both window.confirm and custom popup. + + +         insertInline + boolean + false + Make a list sortable. Same model is mandatory for draggable and droppable. + + +         direction + string + false + Property name that will be created on each scope to manage animation direction. + data-drag boolean From 41f6b50c7f478e874cdbfeda2f318310d60cc284 Mon Sep 17 00:00:00 2001 From: codef0rmer Date: Sun, 6 Sep 2015 20:42:13 +0530 Subject: [PATCH 16/21] Add sortable demo --- index.html | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index 5a186d3..7442d76 100644 --- a/index.html +++ b/index.html @@ -44,6 +44,7 @@
  • filters with ngRepeat
  • ControllerAs Syntax
  • Confirmation before Drop
    • +
  • Sortable
    • @@ -82,4 +83,4 @@ }); - \ No newline at end of file + From a22d8a2da695d52498b0d60b6bd8ada364d3b15a Mon Sep 17 00:00:00 2001 From: codef0rmer Date: Sun, 6 Sep 2015 20:44:01 +0530 Subject: [PATCH 17/21] update angular-dragdrop --- angular-dragdrop.min.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/angular-dragdrop.min.js b/angular-dragdrop.min.js index 729cdc9..20cdeb1 100644 --- a/angular-dragdrop.min.js +++ b/angular-dragdrop.min.js @@ -22,8 +22,8 @@ * Implementing Drag and Drop functionality in AngularJS is easier than ever. * Demo: http://codef0rmer.github.com/angular-dragdrop/ * - * @version 1.0.8 + * @version 1.0.12 * * (c) 2013 Amit Gharat a.k.a codef0rmer - amitgharat.wordpress.com */ -(function(e,t,n,r){"use strict";var i=t.module("ngDragDrop",[]).service("ngDragDropService",["$timeout","$parse",function(s,o){this.draggableScope=null;this.droppableScope=null;this.callEventCallback=function(e,t,r,i){function l(t){var r=t.indexOf("(")!==-1?t.indexOf("("):t.length,i=t.lastIndexOf(")")!==-1?t.lastIndexOf(")"):t.length,s=t.substring(r+1,i),u=t.match(/^[^.]+.\s*/)[0].slice(0,-1);u=e[u]&&typeof e[u].constructor==="function"?u:null;return{callback:t.substring(u&&u.length+1||0,r),args:n.map(s&&s.split(",")||[],function(t){return o(t)(e)}),constructor:u}}if(!t)return;var s=l(t),u=s.callback,a=s.constructor,f=[r,i].concat(s.args);e.$apply((e[u]||e[a][u]).apply(e,f))};this.invokeDrop=function(e,n,o,u){var a="",f="",l={},c={},h=null,p={},d={},v,m,g=null,y=this.droppableScope,b=this.draggableScope;a=e.ngattr("ng-model");f=n.ngattr("ng-model");v=b.$eval(a);m=y.$eval(f);g=n.find("[jqyoui-draggable]:last,[data-jqyoui-draggable]:last");c=y.$eval(n.attr("jqyoui-droppable")||n.attr("data-jqyoui-droppable"))||[];l=b.$eval(e.attr("jqyoui-draggable")||e.attr("data-jqyoui-draggable"))||[];l.index=this.fixIndex(b,l,v);c.index=this.fixIndex(y,c,m);h=t.isArray(v)?l.index:null;p=t.isArray(v)?v[h]:v;if(l.deepCopy){p=t.copy(p)}if(t.isArray(m)&&c&&c.index!==r){d=m[c.index]}else if(!t.isArray(m)){d=m}else{d={}}if(c.deepCopy){d=t.copy(d)}if(l.animate===true){this.move(e,g.length>0?g:n,null,"fast",c,null);this.move(g.length>0&&!c.multiple?g:[],e.parent("[jqyoui-droppable],[data-jqyoui-droppable]"),i.startXY,"fast",c,t.bind(this,function(){s(t.bind(this,function(){e.css({position:"relative",left:"",top:""});g.css({position:"relative",left:"",top:"",display:g.css("display")==="none"?"":g.css("display")});this.mutateDraggable(b,c,l,a,f,d,e);this.mutateDroppable(y,c,l,f,p,h);this.callEventCallback(y,c.onDrop,o,u)}))}))}else{s(t.bind(this,function(){this.mutateDraggable(b,c,l,a,f,d,e);this.mutateDroppable(y,c,l,f,p,h);this.callEventCallback(y,c.onDrop,o,u)}))}};this.move=function(t,n,i,s,o,u){if(t.length===0){if(u){e.setTimeout(function(){u()},300)}return false}var a=t.css("z-index"),f=t[o.containment||"offset"](),l=n.css("display"),c=n.hasClass("ng-hide");if(i===null&&n.length>0){if((n.attr("jqyoui-draggable")||n.attr("data-jqyoui-draggable"))!==r&&n.ngattr("ng-model")!==r&&n.is(":visible")&&o&&o.multiple){i=n[o.containment||"offset"]();if(o.stack===false){i.left+=n.outerWidth(true)}else{i.top+=n.outerHeight(true)}}else{if(c)n.removeClass("ng-hide");i=n.css({visibility:"hidden",display:"block"})[o.containment||"offset"]();n.css({visibility:"",display:l})}}t.css({position:"absolute","z-index":9999}).css(f).animate(i,s,function(){if(c)n.addClass("ng-hide");t.css("z-index",a);if(u)u()})};this.mutateDroppable=function(e,n,r,i,s,u){var a=e.$eval(i);e.dndDragItem=s;if(t.isArray(a)){if(n&&n.index>=0){a[n.index]=s}else{a.push(s)}if(r&&r.placeholder===true){a[a.length-1]["jqyoui_pos"]=u}}else{o(i+" = dndDragItem")(e);if(r&&r.placeholder===true){a["jqyoui_pos"]=u}}};this.mutateDraggable=function(e,n,i,s,u,a,f){var l=t.equals(a,{})||!a,c=e.$eval(s);e.dndDropItem=a;if(i&&i.placeholder){if(i.placeholder!="keep"){if(t.isArray(c)&&i.index!==r){c[i.index]=a}else{o(s+" = dndDropItem")(e)}}}else{if(t.isArray(c)){if(l){if(i&&i.placeholder!==true&&i.placeholder!=="keep"){c.splice(i.index,1)}}else{c[i.index]=a}}else{o(s+" = dndDropItem")(e);if(e.$parent){o(s+" = dndDropItem")(e.$parent)}}}f.css({"z-index":"",left:"",top:""})};this.fixIndex=function(e,n,i){if(n.applyFilter&&t.isArray(i)&&i.length>0){var s=e[n.applyFilter](),o=s[n.index],u=r;i.forEach(function(e,n){if(t.equals(e,o)){u=n}});return u}return n.index}}]).directive("jqyouiDraggable",["ngDragDropService",function(e){return{require:"?jqyouiDroppable",restrict:"A",link:function(n,r,s){var o,u,a;var f=function(f,l){if(f){o=n.$eval(r.attr("jqyoui-draggable")||r.attr("data-jqyoui-draggable"))||{};u=n.$eval(s.jqyouiOptions)||{};r.draggable({disabled:false}).draggable(u).draggable({start:function(r,s){e.draggableScope=n;a=t.element(u.helper?s.helper:this).css("z-index");t.element(u.helper?s.helper:this).css("z-index",9999);i.startXY=t.element(this)[o.containment||"offset"]();e.callEventCallback(n,o.onStart,r,s)},stop:function(r,i){t.element(u.helper?i.helper:this).css("z-index",a);e.callEventCallback(n,o.onStop,r,i)},drag:function(t,r){e.callEventCallback(n,o.onDrag,t,r)}})}else{r.draggable({disabled:true})}};n.$watch(function(){return n.$eval(s.drag)},f);f();r.on("$destroy",function(){r.draggable({disabled:true}).draggable("destroy")})}}}]).directive("jqyouiDroppable",["ngDragDropService",function(e){return{restrict:"A",priority:1,link:function(n,r,i){var s;var o=function(o,u){if(o){s=n.$eval(t.element(r).attr("jqyoui-droppable")||t.element(r).attr("data-jqyoui-droppable"))||{};r.droppable({disabled:false}).droppable(n.$eval(i.jqyouiOptions)||{}).droppable({over:function(t,r){e.callEventCallback(n,s.onOver,t,r)},out:function(t,r){e.callEventCallback(n,s.onOut,t,r)},drop:function(r,o){if(t.element(o.draggable).ngattr("ng-model")&&i.ngModel){e.droppableScope=n;e.invokeDrop(t.element(o.draggable),t.element(this),r,o)}else{e.callEventCallback(n,s.onDrop,r,o)}}})}else{r.droppable({disabled:true})}};n.$watch(function(){return n.$eval(i.drop)},o);o();r.on("$destroy",function(){r.droppable({disabled:true}).droppable("destroy")})}}}]);t.element.prototype.ngattr=function(e,n){var r=t.element(this).get(0);return r.getAttribute(e)||r.getAttribute("data-"+e)}})(window,window.angular,window.jQuery) \ No newline at end of file +!function(e,t,a,n){"use strict";var i=t.module("ngDragDrop",[]).service("ngDragDropService",["$timeout","$parse","$q",function(r,l,o){this.draggableScope=null,this.droppableScope=null,a("head").prepend(''),this.callEventCallback=function(e,t,n,i){function r(t){var n=-1!==t.indexOf("(")?t.indexOf("("):t.length,i=-1!==t.lastIndexOf(")")?t.lastIndexOf(")"):t.length,r=t.substring(n+1,i),o=-1!==t.indexOf(".")?t.substr(0,t.indexOf(".")):null;return o=e[o]&&"function"==typeof e[o].constructor?o:null,{callback:t.substring(o&&o.length+1||0,n),args:a.map(r&&r.split(",")||[],function(t){return[l(t)(e)]}),constructor:o}}if(t){var o=r(t),s=o.callback,d=o.constructor,p=[n,i].concat(o.args);return(e[s]||e[d][s]).apply(e,p)}},this.invokeDrop=function(e,l,s,d){var p,c,u,g="",f="",b={},h={},v=null,y={},x={},m=null,D=this.droppableScope,q=this.draggableScope,j=null,k=[];g=e.ngattr("ng-model"),f=l.ngattr("ng-model"),p=q.$eval(g),c=D.$eval(f),m=l.find("[jqyoui-draggable]:last,[data-jqyoui-draggable]:last"),h=D.$eval(l.attr("jqyoui-droppable")||l.attr("data-jqyoui-droppable"))||[],b=q.$eval(e.attr("jqyoui-draggable")||e.attr("data-jqyoui-draggable"))||[],b.index=this.fixIndex(q,b,p),h.index=this.fixIndex(D,h,c),v=t.isArray(p)?b.index:null,y=t.isArray(p)?p[v]:p,b.deepCopy&&(y=t.copy(y)),x=t.isArray(c)&&h&&h.index!==n?c[h.index]:t.isArray(c)?{}:c,h.deepCopy&&(x=t.copy(x)),b.beforeDrop&&k.push(this.callEventCallback(q,b.beforeDrop,s,d)),o.all(k).then(t.bind(this,function(){if(b.insertInline&&g===f){if(b.index>h.index){u=p[b.index];for(var n=b.index;n>h.index;n--)c[n]=t.copy(c[n-1]),c[n-1]={},c[n][b.direction]="left";c[h.index]=u}else{u=p[b.index];for(var n=b.index;n0?m:l,null,"fast",h,function(){j.remove()}),this.move(m.length>0&&!h.multiple?m:[],e.parent("[jqyoui-droppable],[data-jqyoui-droppable]"),i.startXY,"fast",h,t.bind(this,function(){r(t.bind(this,function(){e.css({position:"relative",left:"",top:""}).removeClass("angular-dragdrop-hide"),m.css({position:"relative",left:"",top:"",display:"none"===m.css("display")?"":m.css("display")}),this.mutateDraggable(q,h,b,g,f,x,e),this.mutateDroppable(D,h,b,f,y,v),this.callEventCallback(D,h.onDrop,s,d)}))}))):r(t.bind(this,function(){this.mutateDraggable(q,h,b,g,f,x,e),this.mutateDroppable(D,h,b,f,y,v),this.callEventCallback(D,h.onDrop,s,d)}))}))["finally"](t.bind(this,function(){this.restore(e)}))},this.move=function(t,a,i,r,l,o){if(0===t.length)return o&&e.setTimeout(function(){o()},300),!1;var s=t.css("z-index"),d=t[l.containment||"offset"](),p=a.css("display"),c=a.hasClass("ng-hide");null===i&&a.length>0&&((a.attr("jqyoui-draggable")||a.attr("data-jqyoui-draggable"))!==n&&a.ngattr("ng-model")!==n&&a.is(":visible")&&l&&l.multiple?(i=a[l.containment||"offset"](),l.stack===!1?i.left+=a.outerWidth(!0):i.top+=a.outerHeight(!0)):(c&&a.removeClass("ng-hide"),i=a.css({visibility:"hidden",display:"block"})[l.containment||"offset"](),a.css({visibility:"",display:p}))),t.css({position:"absolute","z-index":9999}).css(d).animate(i,r,function(){c&&a.addClass("ng-hide"),t.css("z-index",s),o&&o()})},this.mutateDroppable=function(e,a,n,i,r,o){var s=e.$eval(i);e.dndDragItem=r,t.isArray(s)?(a&&a.index>=0?s[a.index]=r:s.push(r),n&&n.placeholder===!0&&(s[s.length-1].jqyoui_pos=o)):(l(i+" = dndDragItem")(e),n&&n.placeholder===!0&&(s.jqyoui_pos=o))},this.mutateDraggable=function(e,a,i,r,o,s,d){var p=t.equals(s,{})||!s,c=e.$eval(r);e.dndDropItem=s,i&&i.placeholder?"keep"!=i.placeholder&&(t.isArray(c)&&i.index!==n?c[i.index]=s:l(r+" = dndDropItem")(e)):t.isArray(c)?p?i&&i.placeholder!==!0&&"keep"!==i.placeholder&&c.splice(i.index,1):c[i.index]=s:(l(r+" = dndDropItem")(e),e.$parent&&l(r+" = dndDropItem")(e.$parent)),this.restore(d)},this.restore=function(e){e.css({"z-index":"",left:"",top:""})},this.fixIndex=function(e,a,i){if(a.applyFilter&&t.isArray(i)&&i.length>0){var r=e[a.applyFilter](),l=r[a.index],o=n;return i.forEach(function(e,a){t.equals(e,l)&&(o=a)}),o}return a.index}}]).directive("jqyouiDraggable",["ngDragDropService",function(e){return{require:"?jqyouiDroppable",restrict:"A",link:function(n,r,l){var o,s,d,p,c=a(r),u=function(r){r?(o=n.$eval(c.attr("jqyoui-draggable")||c.attr("data-jqyoui-draggable"))||{},s=n.$eval(l.jqyouiOptions)||{},c.draggable({disabled:!1}).draggable(s).draggable({start:function(t,r){e.draggableScope=n,d=a(s.helper?r.helper:this).css("z-index"),a(s.helper?r.helper:this).css("z-index",9999),i.startXY=a(this)[o.containment||"offset"](),e.callEventCallback(n,o.onStart,t,r)},stop:function(t,i){a(s.helper?i.helper:this).css("z-index",d),e.callEventCallback(n,o.onStop,t,i)},drag:function(t,a){e.callEventCallback(n,o.onDrag,t,a)}})):c.draggable({disabled:!0}),p&&t.isDefined(r)&&(t.equals(l.drag,"true")||t.equals(l.drag,"false"))&&(p(),p=null)};p=n.$watch(function(){return n.$eval(l.drag)},u),u(),c.on("$destroy",function(){c.draggable({disabled:!0}).draggable("destroy")})}}}]).directive("jqyouiDroppable",["ngDragDropService","$q",function(e,n){return{restrict:"A",priority:1,link:function(i,r,l){var o,s,d=a(r),p=function(r){r?(o=i.$eval(a(d).attr("jqyoui-droppable")||a(d).attr("data-jqyoui-droppable"))||{},d.droppable({disabled:!1}).droppable(i.$eval(l.jqyouiOptions)||{}).droppable({over:function(t,a){e.callEventCallback(i,o.onOver,t,a)},out:function(t,a){e.callEventCallback(i,o.onOut,t,a)},drop:function(r,s){var d=null;d=o.beforeDrop?e.callEventCallback(i,o.beforeDrop,r,s):function(){var e=n.defer();return e.resolve(),e.promise}(),d.then(t.bind(this,function(){a(s.draggable).ngattr("ng-model")&&l.ngModel?(e.droppableScope=i,e.invokeDrop(a(s.draggable),a(this),r,s)):e.callEventCallback(i,o.onDrop,r,s)}),function(){s.draggable.css({left:"",top:""})})}})):d.droppable({disabled:!0}),s&&t.isDefined(r)&&(t.equals(l.drop,"true")||t.equals(l.drop,"false"))&&(s(),s=null)};s=i.$watch(function(){return i.$eval(l.drop)},p),p(),d.on("$destroy",function(){d.droppable({disabled:!0}).droppable("destroy")})}}}]);a.fn.ngattr=function(e){var t=this[0];return t.getAttribute(e)||t.getAttribute("data-"+e)}}(window,window.angular,window.jQuery); From d5d29b45b77d5f2c75c49c4bd18a3630d3c07cea Mon Sep 17 00:00:00 2001 From: Amit Gharat Date: Sun, 6 Sep 2015 20:58:22 +0530 Subject: [PATCH 18/21] add sortable example --- index.html | 1 + partials/sortable.html | 1 + 2 files changed, 2 insertions(+) create mode 100644 partials/sortable.html diff --git a/index.html b/index.html index 7442d76..305fa13 100644 --- a/index.html +++ b/index.html @@ -75,6 +75,7 @@ .when('/filter', { templateUrl: 'partials/filter.html'}) .when('/ctrl', { templateUrl: 'partials/ctrl.html'}) .when('/confirm', { templateUrl: 'partials/confirm.html'}) + .when('/sortable', { templateUrl: 'partials/sortable.html'}) .otherwise({ redirectTo: '/' }); }]); App.controller('OverviewCtrl', function($scope) { diff --git a/partials/sortable.html b/partials/sortable.html new file mode 100644 index 0000000..ad5c758 --- /dev/null +++ b/partials/sortable.html @@ -0,0 +1 @@ + \ No newline at end of file From fbdb4be0e6e4a4f88fe57aaaf2c4798b87abe69d Mon Sep 17 00:00:00 2001 From: codef0rmer Date: Sun, 27 Dec 2015 14:44:59 +0530 Subject: [PATCH 19/21] chore(*): update angular version to latest --- index.html | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/index.html b/index.html index 305fa13..a5351cd 100644 --- a/index.html +++ b/index.html @@ -34,9 +34,9 @@ angular-dragdrop
      -
    • Overview
      • +
    • Overview
    • - Examples + Examples
      • Multiple Lists with Animation
      • Connect Frameworks
        • @@ -62,11 +62,12 @@ - + + - - - - + + + + +