From 530611ba7455f5e2a5409da8af40f6bc5ee1120b Mon Sep 17 00:00:00 2001 From: dbunic Date: Thu, 6 Dec 2012 15:10:46 +0100 Subject: [PATCH] Version 5.0.1 - "shift" method now takes care about marked cells - added shift.overflow property with the allowed values: "bunch", "delete" and "source" --- changes.txt | 1 + example21/index.html | 24 ++++++--- example21/script.js | 17 +++++-- redips-drag-min.js | 110 +++++++++++++++++++++--------------------- redips-drag-source.js | 100 +++++++++++++++++++++++++++----------- 5 files changed, 156 insertions(+), 96 deletions(-) diff --git a/changes.txt b/changes.txt index 9f22236..d02d77a 100644 --- a/changes.txt +++ b/changes.txt @@ -2,6 +2,7 @@ Changes for REDIPS.drag library 5.0.1 - "shift" method now takes care about marked cells - thanks to Mark Jacobs +- added shift.overflow property with the allowed values: "bunch", "delete" and "source" - thanks to Mark Jacobs 5.0.0 - big code cleaning diff --git a/example21/index.html b/example21/index.html index 2fde696..b74ab75 100644 --- a/example21/index.html +++ b/example21/index.html @@ -49,7 +49,7 @@ - +
O
@@ -87,7 +87,7 @@
- Animation + Animation
Show confirm delete dialog @@ -96,22 +96,30 @@ Shift after options:
- Default - shift content only if DIV element is dropped to the non empty cell + Default - shift content only if DIV element is dropped to the non empty cell
- Delete - same as "default" + shift content after element is deleted + Delete - same as "default" + shift content after element is deleted
- Always - always shift table content + Always - always shift table content

Shift options:
horizontal 1 - element shift can affect more rows
- horizontal 2 - each row is treated separately
- vertical 1 - element shift can affect more columns
- vertical 2 - each column is treated separately + horizontal 2 - each row is treated separately
+ vertical 1 - element shift can affect more columns
+ vertical 2 - each column is treated separately +
+
+ + Overflow: +
+ bunch - overflowed DIV will stay in last cell (default)
+ delete - overflowed DIV will be deleted
+ source - overflowed DIV will me moved to the source TD
diff --git a/example21/script.js b/example21/script.js index 46ec92a..a89c733 100644 --- a/example21/script.js +++ b/example21/script.js @@ -6,8 +6,9 @@ var redipsInit, shiftMode, - toggleAnimation, - toggleShiftAfter, + overflow, + shiftAnimation, + shiftAfter, toggleConfirm, counter = 0; @@ -34,20 +35,26 @@ redipsInit = function () { }; -// set shift_mode +// set shift mode shiftMode = function (radio) { REDIPS.drag.shift.mode= radio.value; }; +// set overflow +overflow = function (radio) { + REDIPS.drag.shift.overflow = radio.value; +}; + + // enable / disable animation -toggleAnimation = function (chk) { +shiftAnimation = function (chk) { REDIPS.drag.animation.shift = chk.checked; }; // enable / disable shift after element is deleted -toggleShiftAfter = function (chk) { +shiftAfter = function (chk) { REDIPS.drag.shift.after = chk.value; }; diff --git a/redips-drag-min.js b/redips-drag-min.js index bff5a17..08b2a72 100644 --- a/redips-drag-min.js +++ b/redips-drag-min.js @@ -3,66 +3,66 @@ Copyright (c) 2008-2011, www.redips.net All rights reserved. Code licensed under the BSD License: http://www.redips.net/license/ http://www.redips.net/javascript/drag-and-drop-table-content/ Version 5.0.1 -Dec 5, 2012. +Dec 6, 2012. */ var REDIPS=REDIPS||{}; -REDIPS.drag=function(){var q,B,J,wa,Ja,Ka,ba,ca,ga,xa,ya,V,ha,za,R,ia,Y,Aa,C,v,N,ja,ka,la,Ba,ma,Ca,E,x,Da,da,na,oa,La,Ma,Ea,pa,Fa,qa,ea,Ga,Na,ra,Oa,o=null,F=0,G=0,sa=null,ta=null,K=0,L=0,O=0,P=0,S=0,T=0,t,Z,M=[],f=[],$,ua,p,H=[],n=[],y=null,D=null,W=0,X=0,Pa=0,Qa=0,fa=!1,Ha=!1,aa=!1,Ia=0,h=null,u=null,z=null,j=null,w=null,I=null,m=null,A=null,U=null,i=!1,l=!1,r="cell",va={div:[],cname:"only",other:"deny"},Ra={action:"deny",cname:"mark",exception:[]},k={},Sa={keyDiv:!1,keyRow:!1,sendBack:!1,drop:!1}; -J=function(){return!1};q=function(a){var b,c,d,e,g;f.length=0;e=void 0===a?y.getElementsByTagName("table"):document.querySelectorAll(a);for(b=a=0;ab.redips.offset[1]||eb.redips.offset[2]))i.parentNode.removeChild(i),H[l.id]-=1,REDIPS.drag.event.notCloned();else if(-1F-o[1]&&(i.style.left=F-(o[1]+o[3])+"px");e>G-o[2]&&(i.style.top=G-(o[0]+o[2])+"px")}ua=!0;if("cell"===r&&(7o[3]&& -do[0]&&eD[3]&&eD[0]&&0===S&&0===T&&(n.containTable||dn[1]||en[2]))R(),ha();if(REDIPS.drag.scroll.enable){K=b-(F/2>d?d-o[3]:F-d-o[1]);if(0b&&(K=b),c=N()[0],K*=dK&&0>=c||0=sa-F)&&0===S++)REDIPS.event.remove(window,"scroll",v),ja(window)}else K=0;L=b-(G/2>e?e-o[0]:G-e-o[2]);if(0b&&(L=b),c=N()[1],L*=eL&&0>=c||0=ta-G)&&0===T++)REDIPS.event.remove(window, -"scroll",v),ka(window)}else L=0;for(g=0;gc.offset[3]&&ec.offset[0]){O=b-(c.midstX>d?d-o[3]-c.offset[3]:c.offset[1]-d-o[1]);0b&&(O=b),O*=de?e-o[0]-c.offset[0]:c.offset[2]-e-o[2]);0b&&(P=b),P*=eb.redips.offset[1]||eb.redips.offset[2]))i.parentNode.removeChild(i),H[m.id]-=1,REDIPS.drag.event.notCloned();else if(-1F-p[1]&&(i.style.left=F-(p[1]+p[3])+"px");e>G-p[2]&&(i.style.top=G-(p[0]+p[2])+"px")}ua=!0;if("cell"===r&&(7p[3]&&dp[0]&&eD[3]&&eD[0]&&0===S&&0===T&&(o.containTable||do[1]||eo[2]))R(),ia();if(REDIPS.drag.scroll.enable){K=b-(F/2>d?d-p[3]:F-d-p[1]);if(0b&&(K=b),c=N()[0],K*=dK&&0>=c||0=sa-F)&&0===S++)REDIPS.event.remove(window,"scroll",v),ka(window)}else K=0;L=b-(G/2>e?e-p[0]:G-e-p[2]);if(0b&&(L=b),c=N()[1],L*=eL&&0>=c||0=ta-G)&&0===T++)REDIPS.event.remove(window, +"scroll",v),la(window)}else L=0;for(g=0;gc.offset[3]&&ec.offset[0]){O=b-(c.midstX>d?d-p[3]-c.offset[3]:c.offset[1]-d-p[1]);0b&&(O=b),O*=de?e-p[0]-c.offset[0]:c.offset[2]-e-p[2]);0b&&(P=b),P*=ef[h].sca.offset[0]?c[0]:f[h].sca.offset[0],c[1]=c[1]f[h].sca.offset[3]?c[3]:f[h].sca.offset[3]),c[3]j||0>m?a():j!==d&&(n[0]=c[j][0],n[2]=n[0]+f[h].rows[j].cells[m].offsetHeight,(g< -n[0]||g>n[2])&&a());b=f[h].rows[j].cells[m];n.containTable=0f[h].sca.offset[0]?c[0]:f[h].sca.offset[0],c[1]=c[1]f[h].sca.offset[3]?c[3]:f[h].sca.offset[3]),c[3]j||0>l?a():j!==d&&(o[0]=c[j][0],o[2]=o[0]+f[h].rows[j].cells[l].offsetHeight,(g< +o[0]||g>o[2])&&a());b=f[h].rows[j].cells[l];o.containTable=0D[3]&&cD[0])&&ha());"object"===typeof a&&(t=a);t===window?(a=N()[0],b=sa-F,c=K):(a=t.scrollLeft,b=t.scrollWidth-t.clientWidth,c=O);0c&&0D[3]&&cD[0])&&ha());"object"===typeof a&&(t=a);t===window?(a=N()[1],b=ta-G,c=L):(a=t.scrollTop,b=t.scrollHeight-t.clientHeight,c=P);0c&&0=c&&(e=e.replace("clone",""),2===d?(B(!1,a), -REDIPS.drag.event.clonedEnd2()):REDIPS.drag.event.clonedEnd1()),a.className=ra(e))};Ca=function(a){var b=!1;a.srcElement?(b=a.srcElement.nodeName,a=a.srcElement.className):(b=a.target.nodeName,a=a.target.className);switch(b){case "A":case "INPUT":case "SELECT":case "OPTION":case "TEXTAREA":b=!0;break;default:b=/\bnodrag\b/i.test(a)?!0:!1}return b};B=function(a,b){var c,d,e,g=[],f=[],s,i,h,j,k=/\bdrag\b/i,m=/\bnoautoscroll\b/i;i=REDIPS.drag.style.opacityDisabled;!0===a||"init"===a?(s=REDIPS.drag.style.borderEnabled, +b=document.documentElement.scrollTop):a=b=0;return[a,b]};ka=function(a){var b,c;b=X;c=Y;0D[3]&&cD[0])&&ia());"object"===typeof a&&(t=a);t===window?(a=N()[0],b=sa-F,c=K):(a=t.scrollLeft,b=t.scrollWidth-t.clientWidth,c=O);0c&&0D[3]&&cD[0])&&ia());"object"===typeof a&&(t=a);t===window?(a=N()[1],b=ta-G,c=L):(a=t.scrollTop,b=t.scrollHeight-t.clientHeight,c=P);0c&&0=c&&(e=e.replace("clone",""),2===d?(B(!1,a), +REDIPS.drag.event.clonedEnd2()):REDIPS.drag.event.clonedEnd1()),a.className=ra(e))};Da=function(a){var b=!1;a.srcElement?(b=a.srcElement.nodeName,a=a.srcElement.className):(b=a.target.nodeName,a=a.target.className);switch(b){case "A":case "INPUT":case "SELECT":case "OPTION":case "TEXTAREA":b=!0;break;default:b=/\bnodrag\b/i.test(a)?!0:!1}return b};B=function(a,b){var c,d,e,g=[],f=[],s,i,h,j,k=/\bdrag\b/i,l=/\bnoautoscroll\b/i;i=REDIPS.drag.style.opacityDisabled;!0===a||"init"===a?(s=REDIPS.drag.style.borderEnabled, h="move",j=!0):(s=REDIPS.drag.style.borderDisabled,h="auto",j=!1);void 0===b?g=y.getElementsByTagName("div"):"string"===typeof b?g=document.querySelectorAll(b):g[0]=b;for(d=c=0;cc[l]?(c[l]=d,c[n]--):c[l]>d&&(c[l]=0,c[n]++),e=i[c[0]+"-"+c[1]],void 0!==e&&(j=e),void 0!==h&&(k=h),void 0!==e&&void 0!== -k||void 0!==j&&void 0!==h)e=-1===j.className.indexOf(REDIPS.drag.mark.cname)?0:1,h=-1===k.className.indexOf(REDIPS.drag.mark.cname)?0:1,1===e?0===h&&(m=k):(0===e&&1===h&&(k=m),REDIPS.drag.animation.shift?da(j,k,"animation"):da(j,k))}};La=function(a){var b=[],c,d={},e,g,f,i,h,j,k,l;i=a.rows;for(h=0;hc&&(c=a)}return c};Ea=function(a,b){var c=(b.k1-b.k2*a)*(b.k1-b.k2*a),d,a=a+REDIPS.drag.animation.step*(4-3*c)*b.direction;d=b.m*a+b.b;"horizontal"===b.type?(b.obj.style.left= -a+"px",b.obj.style.top=d+"px"):(b.obj.style.left=d+"px",b.obj.style.top=a+"px");ab.last&&0>b.direction?setTimeout(function(){Ea(a,b)},REDIPS.drag.animation.pause*c):(ya(b.obj),b.obj.redips.animated=!1,"cell"===b.mode?(!0===b.overwrite&&na(b.targetCell),b.targetCell.appendChild(b.obj),V(b.obj)):Ga(pa(b.target[0]),b.target[1],b.obj),"function"===typeof b.callback&&b.callback(b.obj))};Fa=function(a){var b,c,d;b=[];b=c=d=-1;if(void 0===a)b=hf[h].rows.length-1&&(i=f[h].rows.length-1),b.targetCell=f[h].rows[i].cells[a],"cell"===b.mode?(h=C(b.targetCell),i=h[1]-h[3],a=h[2]-h[0],e=h[3]+(i-e)/2,g=h[0]+(a-g)/2):(h=C(f[h].rows[i]),e=h[3],g=h[0]),h=e-c,a=g-d,b.obj.style.position="fixed",Math.abs(h)>Math.abs(a)?(b.type="horizontal",b.m=a/h,b.b=d-b.m*c,b.k1=(c+e)/(c-e),b.k2=2/(c-e),c> -e&&(b.direction=-1),h=c,b.last=e):(b.type="vertical",b.m=h/a,b.b=c-b.m*d,b.k1=(d+g)/(d-g),b.k2=2/(d-g),d>g&&(b.direction=-1),h=d,b.last=g),b.obj.redips.animated=!0,Ea(h,b),[b.obj,b.objOld]},shiftCells:oa,deleteObject:function(a){"object"===typeof a&&"DIV"===a.nodeName?a.parentNode.removeChild(a):"string"===typeof a&&(a=document.getElementById(a))&&a.parentNode.removeChild(a)},getPosition:Fa,rowOpacity:qa,rowEmpty:function(a,b,c){a=document.getElementById(a).rows[b];void 0===c&&(c=REDIPS.drag.style.rowEmptyColor); -void 0===a.redips&&(a.redips={});a.redips.empty_row=!0;qa(a,"empty",c)},getScrollPosition:N,getStyle:E,findParent:x,findCell:Da,event:{changed:function(){},clicked:function(){},cloned:function(){},clonedDropped:function(){},clonedEnd1:function(){},clonedEnd2:function(){},dblClicked:function(){},deleted:function(){},dropped:function(){},droppedBefore:function(){},finish:function(){},moved:function(){},notCloned:function(){},notMoved:function(){},relocated:function(){},rowChanged:function(){},rowClicked:function(){}, -rowCloned:function(){},rowDeleted:function(){},rowDropped:function(){},rowDroppedBefore:function(){},rowDroppedSource:function(){},rowMoved:function(){},rowNotCloned:function(){},rowNotMoved:function(){},rowUndeleted:function(){},switched:function(){},undeleted:function(){}}}}(); -REDIPS.event||(REDIPS.event=function(){return{add:function(q,B,J){q.addEventListener?q.addEventListener(B,J,!1):q.attachEvent?q.attachEvent("on"+B,J):q["on"+B]=J},remove:function(q,B,J){q.removeEventListener?q.removeEventListener(B,J,!1):q.detachEvent?q.detachEvent("on"+B,J):q["on"+B]=null}}}()); \ No newline at end of file +h,g[c].redips.enabled=j;else if("init"===a&&(e=E(g[c],"overflow"),"visible"!==e)){REDIPS.event.add(g[c],"scroll",v);e=E(g[c],"position");f=C(g[c],e,!1);e=l.test(g[c].className)?!1:!0;M[d]={div:g[c],offset:f,midstX:(f[1]+f[3])/2,midstY:(f[0]+f[2])/2,autoscroll:e};f=g[c].getElementsByTagName("table");for(e=0;ec[n]?(c[n]=e,c[d]--):c[n]>e&&(c[n]=0,c[d]++),h=i[c[0]+"-"+ +c[1]],void 0!==h&&(l=h),void 0!==j&&(m=j),void 0!==h&&void 0!==m||void 0!==l&&void 0!==j)(h=-1===l.className.indexOf(REDIPS.drag.mark.cname)?0:1,j=-1===m.className.indexOf(REDIPS.drag.mark.cname)?0:1,o&&0===j&&("delete"===REDIPS.drag.shift.overflow?ea(m):"source"===REDIPS.drag.shift.overflow&&(REDIPS.drag.animation.shift?W(m,k.source,"animation"):W(m,k.source)),o=!1),1===h)?0===j&&(p=m):(0===h&&1===j&&(m=p),REDIPS.drag.animation.shift?W(l,m,"animation"):W(l,m))}};La=function(a){var b=[],c,d={},e, +g,f,i,h,j,k,l;i=a.rows;for(h=0;hc&&(c=a)}return c};Fa=function(a,b){var c=(b.k1-b.k2*a)*(b.k1-b.k2*a),d,a=a+REDIPS.drag.animation.step*(4-3*c)*b.direction;d=b.m*a+b.b;"horizontal"===b.type?(b.obj.style.left=a+"px",b.obj.style.top=d+"px"):(b.obj.style.left=d+"px",b.obj.style.top=a+"px");ab.last&&0>b.direction?setTimeout(function(){Fa(a,b)},REDIPS.drag.animation.pause*c):(za(b.obj),b.obj.redips.animated=!1,"cell"===b.mode?(!0===b.overwrite&&ea(b.targetCell), +b.targetCell.appendChild(b.obj),V(b.obj)):Ha(pa(b.target[0]),b.target[1],b.obj),"function"===typeof b.callback&&b.callback(b.obj))};Ga=function(a){var b,c,d;b=[];b=c=d=-1;if(void 0===a)b=hf[h].rows.length-1&&(i=f[h].rows.length-1),b.targetCell=f[h].rows[i].cells[a],"cell"=== +b.mode?(h=C(b.targetCell),i=h[1]-h[3],a=h[2]-h[0],e=h[3]+(i-e)/2,g=h[0]+(a-g)/2):(h=C(f[h].rows[i]),e=h[3],g=h[0]),h=e-c,a=g-d,b.obj.style.position="fixed",Math.abs(h)>Math.abs(a)?(b.type="horizontal",b.m=a/h,b.b=d-b.m*c,b.k1=(c+e)/(c-e),b.k2=2/(c-e),c>e&&(b.direction=-1),h=c,b.last=e):(b.type="vertical",b.m=h/a,b.b=c-b.m*d,b.k1=(d+g)/(d-g),b.k2=2/(d-g),d>g&&(b.direction=-1),h=d,b.last=g),b.obj.redips.animated=!0,Fa(h,b),[b.obj,b.objOld]},shiftCells:oa,deleteObject:function(a){"object"===typeof a&& +"DIV"===a.nodeName?a.parentNode.removeChild(a):"string"===typeof a&&(a=document.getElementById(a))&&a.parentNode.removeChild(a)},getPosition:Ga,rowOpacity:qa,rowEmpty:function(a,b,c){a=document.getElementById(a).rows[b];void 0===c&&(c=REDIPS.drag.style.rowEmptyColor);void 0===a.redips&&(a.redips={});a.redips.empty_row=!0;qa(a,"empty",c)},getScrollPosition:N,getStyle:E,findParent:x,findCell:Ea,event:{changed:function(){},clicked:function(){},cloned:function(){},clonedDropped:function(){},clonedEnd1:function(){}, +clonedEnd2:function(){},dblClicked:function(){},deleted:function(){},dropped:function(){},droppedBefore:function(){},finish:function(){},moved:function(){},notCloned:function(){},notMoved:function(){},relocated:function(){},rowChanged:function(){},rowClicked:function(){},rowCloned:function(){},rowDeleted:function(){},rowDropped:function(){},rowDroppedBefore:function(){},rowDroppedSource:function(){},rowMoved:function(){},rowNotCloned:function(){},rowNotMoved:function(){},rowUndeleted:function(){}, +switched:function(){},undeleted:function(){}}}}();REDIPS.event||(REDIPS.event=function(){return{add:function(q,B,J){q.addEventListener?q.addEventListener(B,J,!1):q.attachEvent?q.attachEvent("on"+B,J):q["on"+B]=J},remove:function(q,B,J){q.removeEventListener?q.removeEventListener(B,J,!1):q.detachEvent?q.detachEvent("on"+B,J):q["on"+B]=null}}}()); \ No newline at end of file diff --git a/redips-drag-source.js b/redips-drag-source.js index 90819b5..619394c 100644 --- a/redips-drag-source.js +++ b/redips-drag-source.js @@ -3,7 +3,7 @@ Copyright (c) 2008-2011, www.redips.net All rights reserved. Code licensed under the BSD License: http://www.redips.net/license/ http://www.redips.net/javascript/drag-and-drop-table-content/ Version 5.0.1 -Dec 5, 2012. +Dec 6, 2012. */ /*jslint white: true, browser: true, undef: true, nomen: true, eqeqeq: true, plusplus: false, bitwise: true, regexp: true, strict: true, newcap: true, immed: true, maxerr: 14 */ @@ -34,7 +34,7 @@ var REDIPS = REDIPS || {}; * Drag and drop table rows * Drag and Drop table content * JavaScript drag and drop plus content shift - * @version 5.0.0 + * @version 5.0.1 */ REDIPS.drag = (function () { // methods @@ -100,7 +100,7 @@ REDIPS.drag = (function () { flag: {x: 0, y: 0}},// flags are needed to prevent multiple calls of autoScrollX and autoScrollY from onmousemove event handler scroll_object, // scroll_object bgstyle_old, // (object) old td styles (background color and border styles) - scrollContainer = [], // scrollable container areas (contains autoscroll areas, reference to the container and scroll direction) + scrollContainer = [], // scrollable container areas (contains autoscroll areas, reference to the container and scroll direction) tables = [], // table offsets and row offsets (initialized in onload event) sortIdx, // sort index needed for sorting tables in tableTop() moved, // (boolean) true if element is moved @@ -116,7 +116,7 @@ REDIPS.drag = (function () { flag: false}, // threshold flag shiftKey = false, // (boolean) true if shift key is pressed (set in handler_mousedown) clone_class = false, // (boolean) true if clicked element contains clone in class name (set in handler_mousedown) - an_counter = 0, // (integer) counter of animated elements to be shifted before table should be enabled + animationCounter = [], // (array) counter of animated elements to be shifted before table should be enabled // selected, previous and source table, row and cell (private parameters too) table = null, @@ -162,8 +162,10 @@ REDIPS.drag = (function () { animation = {pause : 20, // (object) animation pause (integer), step (integer) and shift (boolean) step: 2, shift: false}, - shift = {mode : 'horizontal1', // (object) contains shift modes (horizontal1, horizontal2, vertical1, vertical2) and how to shift elements (always, if DIV element is dropped to the empty cell as well or if DIV element is deleted) - after : 'default'}, + // (object) + shift = {mode : 'horizontal1', // shift modes (horizontal1, horizontal2, vertical1, vertical2) + after : 'default', // how to shift elements (always, if DIV element is dropped to the empty cell as well or if DIV element is deleted) + overflow : 'bunch'}, // what to do with overflowed DIV (bunch, delete, source) clone = {keyDiv : false, // (boolean) if true, elements could be cloned with pressed SHIFT key keyRow : false, // (boolean) if true, rows could be cloned with pressed SHIFT key sendBack : false, // (boolean) if true, then cloned element can be returned to its source @@ -356,6 +358,8 @@ REDIPS.drag = (function () { tables[j].redips.nestedLevel = level; // set original table index (needed for sorting "tables" array to the original order in saveContent() function) tables[j].redips.idx = j; + // define animationCounter per table + animationCounter[j] = 0; // prepare td nodeList of current table tdNodeList = tables[j].getElementsByTagName('td'); // loop through nodeList and search for rowspaned cells @@ -3088,6 +3092,7 @@ REDIPS.drag = (function () { relocate = function (from, to, mode) { var i, j, // loop variables tbl2, // target table + idx2, // target table index cn, // number of child nodes div, // DIV element (needed in for loop) move; // move object (private function) @@ -3100,16 +3105,17 @@ REDIPS.drag = (function () { obj: el, target: target, callback: function (div) { - var tbl; - // decrease animated counter - an_counter--; - // after last element is shifted, enable table - if (an_counter === 0) { + var tbl, idx; + // set reference to the table and table index + tbl = REDIPS.drag.findParent('TABLE', div); + idx = tbl.redips.idx; + // decrease animation counter per table + animationCounter[idx]--; + // after last element is placed the table then table should be enabled + if (animationCounter[idx] === 0) { // call event handler after relocation is finished REDIPS.drag.event.relocated(); - // set reference to the table - tbl = REDIPS.drag.findParent('TABLE', div); - // enable DIV elements for dragging + // enable target table REDIPS.drag.enableTable(true, tbl); } } @@ -3127,21 +3133,22 @@ REDIPS.drag = (function () { cn = from.childNodes.length; // if mode is "animation" if (mode === 'animation') { - // if child nodes exists + // if child nodes exist if (cn > 0) { - // define target table reference + // define target table reference and target table index tbl2 = findParent('TABLE', to); + idx2 = tbl2.redips.idx; // disable target table REDIPS.drag.enableTable(false, tbl2); - } - // loop through all child nodes in table cell - for (i = 0; i < cn; i++) { - // relocate (with animation) only DIV elements - if (from.childNodes[i].nodeType === 1 && from.childNodes[i].nodeName === 'DIV') { - // increase animated counter (counter is initially set to 0) - an_counter++; - // move DIV element to the target cell - move(from.childNodes[i], to); + // loop through all child nodes in table cell + for (i = 0; i < cn; i++) { + // relocate (with animation) only DIV elements + if (from.childNodes[i].nodeType === 1 && from.childNodes[i].nodeName === 'DIV') { + // increase animated counter (counter is initially set to 0) + animationCounter[idx2]++; + // move DIV element to the target cell + move(from.childNodes[i], to); + } } } } @@ -3225,7 +3232,8 @@ REDIPS.drag = (function () { t1, t2, // temporary source and target cell needed for relocate c1, c2, // source and target cell needed for relocate m1, m2, // set flags if source or target cell contains "mark" class name - p2, // remember last possible cell when marked cell occures + overflow, // (boolean) overflow flag + p2, // remember last possible cell when marked cell occures soption, // shift option read from public parameter rows, // row number cols, // column number (column number is defined from first row) @@ -3285,13 +3293,17 @@ REDIPS.drag = (function () { x = 1; y = 0; } + // set overflow flag to true + overflow = true; // // loop // - // while loop - goes from source to target position + // while loop - goes from source to target position (backward) + // imagine row with 5 cells, relocation will go like this: 3->4, 2->3, 1->2 and 0->1 while (pos[0] !== pos2[0] || pos[1] !== pos2[1]) { // define target cell t2 = cl[pos[0] + '-' + pos[1]]; + // increase indexes for row and column to define source cell // increment row index pos[x] += d; // if row is highest row @@ -3319,6 +3331,27 @@ REDIPS.drag = (function () { // set "mark" flags if source or target cell contains "mark" class name m1 = c1.className.indexOf(REDIPS.drag.mark.cname) === -1 ? 0 : 1; m2 = c2.className.indexOf(REDIPS.drag.mark.cname) === -1 ? 0 : 1; + // detect overflow (actually this is detection of first allowed cell) + if (overflow) { + // if cell is not marked + if (m2 === 0) { + if (REDIPS.drag.shift.overflow === 'delete') { + emptyCell(c2); + } + // relocate overflowed content + else if (REDIPS.drag.shift.overflow === 'source') { + // with animation + if (REDIPS.drag.animation.shift) { + relocate(c2, td.source, 'animation'); + } + // or without animation + else { + relocate(c2, td.source); + } + } + overflow = false; + } + } // if source cell is forbidden then skip shifting if (m1 === 1) { // if target cell isn't foribdden then remember this location @@ -4201,10 +4234,11 @@ REDIPS.drag = (function () { */ animation : animation, /** - * This object has two properties: shift.after (defines when to shift table content) and shift.mode (how to shift table content). + * Object contains several properties: "shift.after", "shift.mode" and "shift.overflow". *
    *
  • {String} shift.after - how to shift table content after DIV element is dropped
    • *
  • {String} shift.mode - shift modes (horizontal / vertical)
    • + *
  • {String} shift.overflow - defines how to behave when DIV element falls off the end
    • *
* * shift.after option has the following values: "default", "delete" and "always" (this property will have effect only if dropMode is set to "shift"). Default value is "default". @@ -4221,9 +4255,19 @@ REDIPS.drag = (function () { *
  • vertical1 - vertical shift (element shift can affect more columns)
    • *
  • vertical2 - vertical shift (each column is treated separately)
    • * + * + * shift.overflow defines how to behave when DIV element falls off the end. Possible actions are: "bunch", "delete" and "source". Default value is "bunch". + *
      + *
    • bunch - overflowed DIV will stay in last cell
      • + *
    • delete - overflowed DIV will be deleted
      • + *
    • source - overflowed DIV will be moved to the source TD
      • + *
    * @example * // DIV elements will be shifted vertically (each column is treated separately) * REDIPS.drag.shift.mode = 'vertical2'; + * + * // delete overflowed DIV element + * REDIPS.drag.shift.overflow = 'delete'; * @type Object * @see dropMode * @see shiftCells