From 13a4d73b16dcf1acd87f12430d7902292a33eb9f Mon Sep 17 00:00:00 2001 From: Piotr Nalepa Date: Wed, 25 Jan 2017 16:38:30 +0100 Subject: [PATCH] Bumped version to 1.4.0 --- dragster.js | 6 ++--- dragster.min.js | 8 +++---- dragster.min.js.gz | Bin 2727 -> 2867 bytes dragster.style.css | 6 ++--- index.html | 56 +++++++++++++++++++++++++++++++++++++++++---- package.json | 2 +- 6 files changed, 63 insertions(+), 15 deletions(-) diff --git a/dragster.js b/dragster.js index 5b85ae9..f791fb3 100644 --- a/dragster.js +++ b/dragster.js @@ -1,14 +1,14 @@ /*@preserve - * Dragster - drag'n'drop library v1.3.6 + * Dragster - drag'n'drop library v1.4.0 * https://github.com/sunpietro/dragster * - * Copyright 2015-2016 Piotr Nalepa + * Copyright 2015-2017 Piotr Nalepa * http://blog.piotrnalepa.pl * * Released under the MIT license * https://github.com/sunpietro/dragster/blob/master/LICENSE * - * Date: 2016-12-12T19:00Z + * Date: 2017-01-25T16:30Z */ (function (window, document) { 'use strict'; diff --git a/dragster.min.js b/dragster.min.js index ef5051e..264b25b 100644 --- a/dragster.min.js +++ b/dragster.min.js @@ -1,13 +1,13 @@ /*@preserve - * Dragster - drag'n'drop library v1.3.6 + * Dragster - drag'n'drop library v1.4.0 * https://github.com/sunpietro/dragster * - * Copyright 2015-2016 Piotr Nalepa + * Copyright 2015-2017 Piotr Nalepa * http://blog.piotrnalepa.pl * * Released under the MIT license * https://github.com/sunpietro/dragster/blob/master/LICENSE * - * Date: 2016-12-12T19:00Z + * Date: 2017-01-25T16:30Z */ -!function(e,t){"use strict";e.Dragster=function(n){var r,o,a,s,l,i,d,c,g,u,m,p,f,h,v,E,L,y,C,w,b,D,B,T,H,N,A,S,M="dragster-",R="is-dragging",P="is-drag-over",O=M+"draggable",I=M+"drag-region",Y=M+"drop-placeholder",q=M+"temp",x=q+"-container",F=M+"is-hidden",X=M+"replacable",k=M+"region--drag-only",J="touchstart",W="touchmove",j="touchend",z="mousedown",G="mousemove",K="mouseup",Q="top",U="bottom",V="px",Z="div",$=!1,_=!0,ee=null,te=function(){},ne={elementSelector:".dragster-block",regionSelector:".dragster-region",dragHandleCssClass:$,dragOnlyRegionCssClass:k,replaceElements:$,updateRegionsHeight:_,minimumRegionHeight:60,onBeforeDragStart:te,onAfterDragStart:te,onBeforeDragMove:te,onAfterDragMove:te,onBeforeDragEnd:te,onAfterDragEnd:te,onAfterDragDrop:te,scrollWindowOnDrag:$,dragOnlyRegionsEnabled:$,cloneElements:$,wrapDraggableElements:_},re="data-placeholder-position",oe={top:$,bottom:$},ae={drag:{node:ee},drop:{node:ee},shadow:{node:ee,top:0,left:0},placeholder:{node:ee,position:ee},dropped:ee,clonedFrom:ee,clonedTo:ee},se={},le=e.innerHeight;for(r in n)n.hasOwnProperty(r)&&(ne[r]=n[r]);return D=function(){return[].slice.call(t.querySelectorAll(ne.elementSelector))},B=function(e){return ne.wrapDraggableElements===$?(console.warn("You have disabled the default behavior of wrapping the draggable elements. If you want Dragster.js to work properly you still will have to do this manually.\n\nMore info: https://github.com/sunpietro/dragster/blob/master/README.md#user-content-wrapdraggableelements---boolean"),$):void e.forEach(function(e){var t=v(),n=e.parentNode;return n.classList.contains(O)?$:(n.insertBefore(t,e),n.removeChild(e),void t.appendChild(e))})},c=D(),o=[].slice.call(t.querySelectorAll(ne.regionSelector)),ne.replaceElements&&(i=t.createElement(Z),i.classList.add(F),i.classList.add(x),t.body.appendChild(i)),a=function(e,t){var n=e.parentNode;if(n&&(!e.classList||!e.classList.contains(I)||e.classList.contains(k)))return t(e)?e:t(n)?n:a(n,t)},C=function(e){var n=[].slice.call(t.getElementsByClassName(e));n.forEach(function(e){e.parentNode.removeChild(e)})},w=function(e,n){n&&(o.forEach(function(e){e.removeEventListener(n,g.mousemove)}),t.body.removeEventListener(n,g.mousemove)),e&&e.classList.remove(R),[].slice.call(t.getElementsByClassName(O)).forEach(function(e){e.firstChild||e.parentNode.removeChild(e)}),C(Y),C(q),T()},b=function(){[].slice.call(t.getElementsByClassName(X)).forEach(function(e){e.classList.remove(X)})},v=function(){var e=t.createElement(Z);return e.classList.add(O),e},L=function(){var e=t.createElement(Z);return e.classList.add(Y),e},E=function(){var e=t.createElement(Z);return e.classList.add(q),e.classList.add(F),e.style.position="fixed",t.body.appendChild(e),e},f=function(e,t){if(e&&e.parentNode){var n=ne.wrapDraggableElements===$?e:e.nextSibling;e.parentNode.insertBefore(t,n)}},h=function(e,t){e&&e.parentNode&&e.parentNode.insertBefore(t,e)},m=function(e){return e.classList&&e.classList.contains(O)},u=function(e){return e.classList&&e.classList.contains(Y)},p=function(e){return e.classList&&e.classList.contains(ne.dragOnlyRegionCssClass)},T=function(){if(ne.updateRegionsHeight){var n=[].slice.call(t.getElementsByClassName(I));n.forEach(function(t){var n=[].slice.call(t.querySelectorAll(ne.elementSelector)),r=ne.minimumRegionHeight;n.length&&(n.forEach(function(t){var n=e.getComputedStyle(t);r+=t.offsetHeight+parseInt(n.marginTop,10)+parseInt(n.marginBottom,10)}),t.style.height=r+V)})}},g={mousedown:function(e){if(ne.dragHandleCssClass&&("string"!=typeof ne.dragHandleCssClass||!e.target.classList.contains(ne.dragHandleCssClass)))return!1;var n,r;return e.dragster=se,ne.onBeforeDragStart(e)===$||3===e.which?$:(e.preventDefault(),r=e.type===J?W:G,o.forEach(function(e){e.addEventListener(r,g.mousemove)}),t.body.addEventListener(r,g.mousemove),(d=a(e.target,m))?(n=d.getBoundingClientRect(),s=E(),s.innerHTML=d.innerHTML,s.style.width=n.width+V,s.style.height=n.height+V,l=s.getBoundingClientRect(),d.classList.add(R),se=JSON.parse(JSON.stringify(ae)),se.drag.node=d,se.shadow.node=s,e.dragster=se,void ne.onAfterDragStart(e)):$)},mousemove:function(e){if(e.dragster=se,ne.onBeforeDragMove(e)===$)return $;e.preventDefault();var n=e.changedTouches?e.changedTouches[0]:e,r=n.view?n.view.pageXOffset:0,o=n.view?n.view.pageYOffset:0,i=n.clientY+o,c=n.clientX+r,g=t.elementFromPoint(n.clientX,n.clientY),u=a(g,m),f=n.clientY,h=c-l.width/2,v=!(!u||!a(u,p)),E=g.classList.contains(I),L=g.classList.contains(k),C=g.classList.contains(Y),w=g.getElementsByClassName(O).length>0,b=g.getElementsByClassName(Y).length>0;clearTimeout(y),s.style.top=f+V,s.style.left=h+V,s.classList.remove(F),se.shadow.top=f,se.shadow.left=h,u&&u!==d&&!v?(S.removePlaceholders(),S.addPlaceholderOnTarget(u,i,o)):!E||L||w||b?E&&!L&&w&&!b?(S.removePlaceholders(),S.addPlaceholderInRegionBelowTargets(g)):E||C||S.removePlaceholders():(S.removePlaceholders(),S.addPlaceholderInRegion(g)),ne.scrollWindowOnDrag&&H(e),T(),ne.onAfterDragMove(e)},mouseup:function(e){if(e.dragster=se,ne.onBeforeDragEnd(e)===$)return $;var n,r=ne.replaceElements?X:Y,o=t.getElementsByClassName(r)[0],s=!(!d||!a(d,p)),l=e.type===J?W:G,i=ne.cloneElements&&s;return y=setTimeout(function(){w(d,l)},200),b(),d&&o?(n=a(o,m),n=n||o,d!==n&&(ne.replaceElements||i?ne.replaceElements&&!i?(e.dragster=A.replaceElements(e.dragster,n),ne.onAfterDragDrop(e)):!ne.replaceElements&&i&&(e.dragster=A.cloneElements(e.dragster,o,n),ne.onAfterDragDrop(e)):(e.dragster=A.moveElement(e.dragster,o,n),ne.onAfterDragDrop(e)),n.classList.remove(P)),w(d,l),void ne.onAfterDragEnd(e)):(w(d,l),$)}},S={addPlaceholderOnTarget:function(e,t,n){var r=e.getBoundingClientRect(),o=L(),a=r.height/2;b(),ne.replaceElements?e.classList.add(X):t-n-r.top0,B=g.getElementsByClassName(q).length>0;clearTimeout(C),s.style.top=h+Z,s.style.left=f+Z,s.classList.remove(U),se.shadow.top=h,se.shadow.left=f,v||y||D?u&&u!==i&&!E?(P.removePlaceholders(),P.addPlaceholderOnTarget(u,d,o)):!y||w||b||B?y&&!w&&b&&!B&&(P.removePlaceholders(),P.addPlaceholderInRegionBelowTargets(g)):(P.removePlaceholders(),P.addPlaceholderInRegion(g)):P.removePlaceholders(),re.scrollWindowOnDrag&&H(e),T(),re.onAfterDragMove(e)},mouseup:function(e){if(e.dragster=se,re.onBeforeDragEnd(e)===_)return _;var n,r=re.replaceElements?k:q,o=t.getElementsByClassName(r)[0],s=!(!i||!a(i,p)),l=e.type===J?W:G,d=re.cloneElements&&s;return C=setTimeout(function(){w(i,l)},200),D(),i&&o?(n=a(o,m),n=n||o,i!==n&&(re.replaceElements||d?re.replaceElements&&!d?(e.dragster=N.replaceElements(e.dragster,n),re.onAfterDragDrop(e)):!re.replaceElements&&d&&(e.dragster=N.cloneElements(e.dragster,o,n),re.onAfterDragDrop(e)):(e.dragster=N.moveElement(e.dragster,o,n),re.onAfterDragDrop(e)),n.classList.remove(O)),w(i,l),void re.onAfterDragEnd(e)):(w(i,l),_)}},P={addPlaceholderOnTarget:function(e,t,n){var r=e.getBoundingClientRect(),o=L(),a=r.height/2;D(),re.replaceElements?e.classList.add(k):t-n-r.top-MpHlZPIQ}j==)l7|D@k2o3!AJCYw5V`$p_0%$av8O?jd?z8`eoJ53A z$S>M6t;5}6Bna0UnukAsqrZ8ag<9bExXWkSWY7BDYD&bB5MgBR?hbu1ihEX{jd!D% zhCUIT?RqH{M3lIPESzzFI1<|P=HAN&e*B@G`%G}{)D1}JX7rF;FJMC}lzUWdSz(Y8 zxgY^?BjRZ>^-w-BBHGE(6-w48G$KzHNpk4zj$QTp_~@{Edf81mbX-AfDdHcE=3e9Z z%d5S8`$h8;Zteb38^p9Pd`1ld!hF=@h-i`EeqZPpBvOrZlkIDjj711E3_=Wqd+aOCKj&u}>7?WhAow-*o{uCsN6lOc+v!+io_VIvIOJ{hsVlLsFpSdek3!)xbZM{o2Q z6|PU^-g~)+d`7F~|b#|+ix zu_+SzD_tdsf2XS$Wq2nK;r9ne?=d0RScgxJ9zN*sD=NgF=y2=Q_J9zl)&xNu8V3PT zvQ)kKxByO^NA#C5q2dz1`+{*>w{mr&5A^SJNEB0rkf}@p-ni5Y$YB&625uDDw+eVh zgV}{b$~Tl|B&3m=1yLjqrR;7Zj65EP9y(fbIC?{5T-b!b*r)zD9w+b=yx#;y56FOV zB3F zbP5kQ`T?WGJ5RYAb~4}0;dtw4#Cadaa#HcZpB1iQr4L5IfPzS%-!7+mwI zMonss+~{md&rt@##mwMly>4*wnSXI8ewZyzM9ityD|&kZ`~1aG1Iag7Z$NixJ+CkPpBEfp%Vw4;GGLuyl(io6b4Un5O0ZOZta7Amy_Gldli zKM1s`{7~!>$zw>`kF>E%V^qS-`iK5QPteyG8);1{m8;T;5AT|ULBw}%uM-NAS;30ibtc8W@#>|^R%>|mf@AQx> zbDrWYtJ%>sLBUqC8G5JZpp2YgMoWRluO@hf3%H(Vyk7^sHbGcD=FL{b^pK6~tkzno zt&*PnfkBaXjVy`I=f%}hZP(^}Ub%s{sZQh=p{X4Ns;!MF0;_qO+O9!SoCVCBvMuSF zK8HkPIy#sss;BOlNGr5xrAweNuE6$2NYuIyfWd5`nbVlSS{(m=aEp?l;+!_0GJu~ z^5emTD+AThDW=9JigCA5jJ3PnDVOr!^piYUmUnUp;L2K82DZI1v}mg9dz`hF|v z?!O`ZAW5%9HL)Tw!&;D)P)8s54+OitO=48UJSHp@Zd8hT4DpihXR)@mIuV;#lst$_ zzZYPwX|4E9DRokFv4BB|Z;5Fs{MM510>)Jpw4kch5GkZ{xv?SW7ZCp()q4~u{JEo> z^Wg%nik^d(LEMTi_6L*Ub#*e_Najf$4RGln6}>dF3J4vF5vIp&T!|F-kd4Dw5bsht zH}19g4u%RF4A52yxgB(hh#Xr`nVsd=BOvbDP z5S1*c+D~Q9)hSiBKlZImnVAyHp1##1riXrlW9Bo zLXRDi>oXPXI6AV5-J5*Zb7*F~9fs|7wz}RyZ^4|ACMY>Xo-O*OFz=JVNn-f746dR%iHzh19(+s1iH z;(Ylc5n=G1%aAL;&ghlOFK7u57{*TxX-((z-h6)0o*}7ez23vG1FQ#6BzZ&=r5})h zO%v*oF+|coNU#29x1W9Xg*g@X<}Edig0!Kc9Q;sxiFgwTntREn^fmvF$BsUq11v++3?7 z?V%tmq*pFoB+RyuUL~O>%XH*;8Udi|!FPt>M59$DCvgkpoTA*yHtXDZtd1|cI0ZoV zdY^QIl~s~C$A)~X;AyelectLARc|Ei^4N4|+M+=lT;_{EU9=rjIj3!?NtWfAw(wSY zo{d-UKnBBdIL4G96HWnjIf}hAZEht`rws!+ni;bMhGu;N!w*>7i^JL$ejnDhRCmCV z?tz8L5@(z0Y+|p!kfDZKtL()V_Lbbl6S)_YVTB}QbKSw96`w^~RvLR>FzZOU`FGT+ zbWc|<$A9#4eD!iv{_j!F#rDce@tSj@&)QNHjEz${g5+_zAt1I6-@ZLjks-F-JGBXFbHh%xKE_*)D9#SB%1L zLyp&QQhcW<|2wmQ1Earry8Anu?&1(@#YVKRt7x01%+-{Cz2#kQoyE6|g?tQ$|17vbxXLEFAaxQIYZZ2wb0HqjfbJ|Gq`~C`{bFtF8k#V*z zRVP-*`9U_$`jNy=VsAE;5@-M=Vn!K_AjI(BuX`kc5W?$Zt6WCY)6?D4@1BES{ufJ@ zFgayE8NV2((jO&?Nuy;1`1v#cIglbYqOdQ0IX9+<&aci>LL4gcBNqDwJtWtU#K?(hkLxWb zj&dTeS;YK=1xCsPluwPBadCEok_{M7*rP=v4*i3PufNaFPI{Nuy`00Tub4|BK5ZR7 z!M~fs|G4e;pSX4KQ)8I&feHn;7%2PROcQ1#N`?bvc9>IW&0Aq{`+n+6LxKPw5{Mv# z00uCE6ebYE5XLZt9-PA*PGAOoIE7=lf#+}uM{o@no>>UoGU2snhDnP6qmYkGc)41) z#FR-BuDpwVePHDGBWA)`v2IB=LUByE%OE0d#gRW?V-W>(@C$(zo5Uu3^}g(zt%2am z4>|2Uqdnv^4ugOpiCbDrM&~mwpECe4XywxIXl}v_&r~8Ej1%QcWx~6BIYC)X_>`|0 z4@~&xnG=Dk48#l>{GP8e#6R*?in6_;L-_l~Gy6g*F)`t-XU1Pm_!AWsPEFYJ8i(-F zYqWtekEc-timk0--!FkP?;c%f!nnG|-+>a+HJz1~(Jcm_O~|fOhfrve0MC6MMC>F< zP9i@^+&vAv!ppzbNUM#{km-x{GRB0O#sT_ShL}8O6c+ABn1no>q>~JsL!Y)m@MAU< zl97X5lR90+5O_31i7K!);sxrjg0}{((Rw_nU~NNA(PIdd45WyncOgehU2)pkx^&Xx z82?V$O5<(HkZ6^kTPTGawghIU5^nbqCBCHM#<#_l~A z0dpB!0=ac*nT&muas>dQ(1wT&mD^rIiPIXTV7Vd}<2?|rFA_YH$a=N95g8YhV~JEf z=7b#MC9_!vm1{{OBx3*(gIOXdAguiDR4%jX6@A`CP54it{Nk zlrUyOel}vQmT0cA5*0>~F{6K)Jt74HNr#Cs@p+0$m^***zxW0EE^2ou+#ksHuX{(Q z7d>YZ{0q~H)Ts_dZP86u7bxU!wOW0Fdhxkw!=CL&LG$+f!PqLRnex2yrj`vH zogwxmp1(xLD$L8B0VRX;Fi}pPUK8ue?(Vr3N8dqFR2Gz$0)|8!sWafoIE(_M51O@d zP~Dg_3#h$Ba}T^zG(lYOS_2d$Fk9_-xyDu5X3v>0-9S8rP6nA%Xg;f}Rm5 zQFBbxMXmD8Vfd9{6IBya>s$Bv@z>bpNAc~f=+N^{JqY5%@6 z9i7#uqn%_P)jNPBC#dN{kyXU_NR6p?d4MY;aZkh~P8AET$y0H!Blpqo#c-G~m66*= z%O~s%{hvD%U*bG-BVssg+uIw*y62-ko%u5FA8RU}+Ya)Hv*DwSZg)dC`-238Uh>)!L)f6mN^g zulR!jISvP7Y7#J7B%@q^nzdmT84E>2*%9$Y_nrGY?5Zl5J2uON+)+~g1`({l^Q}T3 zFtP2f#l3)Rek^bxM|GY=A)bGY{)7T1UXT9gt?|vpIpVIq5uO=y76xkU@$7g1?Fyb7 zndcw46M4x_UO^>SVvWP*{KfUvrK5ey(w~{l!{OZWsXQi`Jsg?ToZ^8)^sj}ww%1v>w^oAw3r4iH1{CKN5d1jYE`CLb@suK10PNz`Kq0^PCETP)5Oi`in)@AiS=d zIf|(YzbZ8fGo%*bHJ`NGHuNdOHJgI+t#1hmE9}=63jqQ83fC_RRp}Rtuv<6YHNtLL zNk>(T(k6Ct746egkj{6FI?^EuvO#*|(q+Qp0n(c!^pKNx%a0=fd^_@9A~@4%T^i5a z0y*a>d(>21d-wH0=9U{i=!Da?^iU-nbe$uGHLZ{RmL(ayvSDnMhciqDlwwNnUF*@|mF-F=dsAy!$i^-> zWH7Yl4lZwK4k=F>4={PNwWVvT$ZD^Mvn9?c^$Eh=eq%vhb~f3o2iVtgSC8agPJT6# zu-)Ya!&ALidG%-=e!%=fa?3hhYAy4P8_Dmzk=(oyr&rZ#9(GIFrN;NrC0!B)UH^#s z=~dY6@b?GD#lW3v$Je>DeBsr+D-iEhcWhzmwcQ744J}GU?ogv*qqp|%X7hoAADd0N zq15t88!~mpEI{3{<<=AZ=9^7+p;WuW&B{U9gxX+#?%6a10I<@Sq h4ZE~3H7u9bOm}IJ{WyUbq~wEk=l{Myq1i+p002FhPVfK# diff --git a/dragster.style.css b/dragster.style.css index c5056d6..25e6f75 100644 --- a/dragster.style.css +++ b/dragster.style.css @@ -1,14 +1,14 @@ /* - * Dragster - drag'n'drop library v1.3.6 + * Dragster - drag'n'drop library v1.4.0 * https://github.com/sunpietro/dragster * - * Copyright 2015-2016 Piotr Nalepa + * Copyright 2015-2017 Piotr Nalepa * http://blog.piotrnalepa.pl * * Released under the MIT license * https://github.com/sunpietro/dragster/blob/master/LICENSE * - * Date: 2016-12-12T19:00Z + * Date: 2017-01-25T16:30Z */ * { box-sizing: border-box; diff --git a/index.html b/index.html index edf5b49..e3c47d1 100644 --- a/index.html +++ b/index.html @@ -76,8 +76,9 @@ -

Dragster.js Demo

-
+

Dragster.js - Basic example demo

+

The blocks below can be dragged and dropped in any region except the last one, which is a drag-only region. The elements from the last region will be copied when dropping on any droppable region.

+
1.1
@@ -105,11 +106,58 @@

Dragster Block 2.1

3.3
+

Dragster - draggable elements inside a draggable element demo

+

The example below is a bit more advanced. It shows the possibility of implementing a drag'n'drop functionality inside a draggable element.

+
+
+
1.1
+
+

Dragster Block 1.2

+ +

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

+
+
1.3
+
1.4
+
+
+
Dragster Block 2.1
+
+

2.2 Second region - independent

+
+
+
1.1
+
Dragster Block 1.2
+
1.3
+
1.4
+
+
+
Dragster Block 2.1
+
2.2
+
2.3
+
2.4
+
+
+
+
+
diff --git a/package.json b/package.json index 8e4d473..55abf1a 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "dragsterjs", - "version": "1.3.6", + "version": "1.4.0", "description": "Tiny vanilla JS plugin that enables drag'n'drop interactions to a user of your website", "main": "dragster.js", "scripts": {