Permalink
Browse files

Version 4.6.2

  • Loading branch information...
1 parent 5e4a364 commit 1f555cb09e21807896570fff55fa957a100efc32 @dbunic committed Dec 8, 2011
View
8 changes.txt
@@ -1,5 +1,13 @@
Changes for REDIPS.drag library
+4.6.2
+- added shift_option public property
+- added 4 shift modes: horizontal1, horizontal2, vertical1 and vertical2
+- extended find_cell method with values "first", "firstInColumn", "firstInRow", "last", "lastInColumn", "lastInRow"
+- added public property hover_border (in "row" mode borderTop or borderBottom will be show where whether row will be dropped above or below current row)
+- REDIPS.drag.hover_color is no longer used
+- working on examples (improving)
+
4.6.1
- fixed bug with moving table row between two tables (added get_table_index)
* in line 3080 -> row_drop(get_table_index(p.target[0]), p.target[1], p.obj);
View
2 example02/script.js
@@ -14,7 +14,7 @@ redips_init = function () {
// initialization
rd.init();
// set hover color
- rd.hover_color = '#9BB3DA';
+ rd.hover.color_td = '#9BB3DA';
// define green elements for green cells
rd.mark.exception.green = 'green_cell';
rd.mark.exception.greenc0 = 'green_cell';
View
6 example03/ajax/script.js
@@ -20,9 +20,9 @@ redips_init = function () {
request = initXMLHttpClient();
// REDIPS.drag initialization
rd.init();
- rd.drop_option = 'single'; // dragged elements can be placed to the empty cells only
- rd.hover_color = '#9BB3DA'; // set hover color
- rd.trash_ask = false; // do not ask on delete
+ rd.drop_option = 'single'; // dragged elements can be placed to the empty cells only
+ rd.hover.color_td = '#9BB3DA'; // set hover color
+ rd.trash_ask = false; // do not ask on delete
// save - after element is dropped
rd.myhandler_dropped = function () {
// get element position (method returns array with current and source positions - tableIndex, rowIndex and cellIndex)
View
8 example03/script.js
@@ -19,10 +19,10 @@ redips_init = function () {
var rd = REDIPS.drag; // reference to the REDIPS.drag object
// initialization
rd.init();
- rd.drop_option = 'single'; // dragged elements can be placed to the empty cells only
- rd.hover_color = '#9BB3DA'; // set hover color
- rd.trash_ask = false; // do not ask on delete
- rd.clone_shiftKey = true; // elements could be cloned with pressed SHIFT key
+ rd.drop_option = 'single'; // dragged elements can be placed to the empty cells only
+ rd.hover.color_td = '#9BB3DA'; // set hover color
+ rd.trash_ask = false; // do not ask on delete
+ rd.clone_shiftKey = true; // elements could be cloned with pressed SHIFT key
// prepare node list of DIV elements in table2
div_nl = document.getElementById('table2').getElementsByTagName('div');
// show / hide report buttons (needed for dynamic version - with index.php)
View
2 example05/index.html
@@ -287,7 +287,7 @@
<div id="redips_clone"></div>
<!-- message -->
<div id="message">
- Clone element with SHIFT key
+ Elements can be cloned with SHIFT key
<br/>
Left container has <b>noautoscroll</b> option
</div>
View
25 example05/script.js
@@ -4,11 +4,12 @@
/* enable strict mode */
"use strict";
-// define redips_init variable
-var redips_init;
+// define redips_init and random color generator
+var redipsInit,
+ rndColor;
// redips initialization
-redips_init = function () {
+redipsInit = function () {
// reference to the REDIPS.drag lib
var rd = REDIPS.drag;
// initialization
@@ -17,12 +18,26 @@ redips_init = function () {
rd.drop_option = 'single';
// elements could be cloned with pressed SHIFT key
rd.clone_shiftKey = true;
+ // every change of current TD will have different background color
+ rd.myhandler_changed = function () {
+ rd.hover.color_td = rndColor();
+ };
};
+// random color generator - http://www.redips.net/javascript/random-color-generator/
+function rndColor() {
+ var hex = '0123456789ABCDEF'.split(''),
+ color = '#', i;
+ for (i = 0; i < 6 ; i++) {
+ color = color + hex[Math.floor(Math.random() * 16)];
+ }
+ return color;
+}
+
// add onload event listener
if (window.addEventListener) {
- window.addEventListener('load', redips_init, false);
+ window.addEventListener('load', redipsInit, false);
}
else if (window.attachEvent) {
- window.attachEvent('onload', redips_init);
+ window.attachEvent('onload', redipsInit);
}
View
3 example05/style.css
@@ -75,6 +75,9 @@ body{
width: 82px;
height: 35px;
line-height: 35px;
+ /* round corners */
+ border-radius: 4px; /* Opera, Chrome */
+ -moz-border-radius: 4px; /* FF */
}
View
2 example07/script1.js
@@ -14,7 +14,7 @@ redips_init = function () {
// initialization
rd.init();
// set hover color
- rd.hover_color = '#9BB3DA';
+ rd.hover.color_td = '#9BB3DA';
// single element per cell
rd.drop_option = 'single';
// define A and B source elements for the last row only (element ID and class name of the last row)
View
2 example11/script.js
@@ -16,7 +16,7 @@ redips_init = function () {
// initialization
rd.init();
// set hover color
- rd.hover_color = '#FFE885';
+ rd.hover.color_td = '#FFE885';
// DIV elements can be dropped to the empty cells only
rd.drop_option = 'single';
// do not ask on delete
View
5 example13/index.html
@@ -195,7 +195,12 @@
</tr>
</tbody>
</table>
+ <!-- message -->
+ <div class="message">
+ Elements can be cloned with SHIFT key (press SHIFT key and drag element)
+ </div>
</div>
+ <br/>
</center>
</body>
</html>
View
2 example13/script.js
@@ -51,7 +51,7 @@ set_hover_color = function (cell) {
break;
}
// set hover color
- rd.hover_color = color;
+ rd.hover.color_td = color;
};
View
6 example13/style.css
@@ -63,6 +63,12 @@ div#drag td {
}
+/* */
+.message {
+ color: grey;
+ font-size: 14px;
+}
+
/* circle */
.circle {
/* round corners */
View
13 example15/script.js
@@ -14,24 +14,23 @@ redips_init = function () {
msg;
// initialization
rd.init();
+ // set hover color for TD and TR
+ rd.hover.color_td = '#FFCFAE';
+ rd.hover.color_tr = '#9BB3DA';
+ // set hover border for current TD and TR
+ rd.hover.border_td = '2px solid #32568E';
+ rd.hover.border_tr = '2px solid #32568E';
// row was clicked - event handler
rd.myhandler_row_clicked = function () {
// set current element (this is clicked TR)
var el = rd.obj;
- // set hover color for "row" mode
- rd.hover_color = '#9BB3DA';
// find parent table
el = rd.find_parent('TABLE', el);
// every table has only one SPAN element to display messages
msg = el.getElementsByTagName('span')[0];
// display message
msg.innerHTML = 'Clicked';
};
- // element clicked - event handler
- rd.myhandler_clicked = function () {
- // set hover color for "cell" mode
- rd.hover_color = '#FFCFAE';
- };
// row was moved - event handler
rd.myhandler_row_moved = function () {
// set opacity for moved row
View
23 example15/style.css
@@ -21,7 +21,8 @@ body {
/* set border-collapse */
div#drag table {
- border-collapse: collapse;
+/* border-collapse: collapse; */
+ border-spacing: 0px;
width: 580px;
}
/* define margin below first table */
@@ -31,15 +32,23 @@ div#drag table {
/* set table row height */
div#drag table tr {
- height: 32px;
+ height: 40px;
}
-/* table cells */
+
+/*
+ http://stackoverflow.com/questions/4096390/table-border-color-in-css-with-border-collapse
+
+ if collapsing borders have the same style and width, but differ in color,
+ then from most to least preferred: cell, row, row group, column, column group, table.
+
+ if ... come from same type of element, such as two rows... then color is taken from
+ borders that are the topmost and the leftmost.
+
+ wider border wins over narrower ones / double wins over solid, then dashed, dotted, ridge, outset, groove, inset
+*/
div#drag td {
- /* IE8 BUG - applying alpha filter on TD will overwrite TD border - thank you MicroSoft for tearing my hair :P */
- /* I also tried with outline and that was fine, but Opera11 place high zIndex to outline grid and that looks wierd */
- /* so, I paint TR to white with JavaScript and applying aplha filter to table content (DIV elements) */
- border: 1px solid white;
+ border: 2px groove white;
}
/* table titles */
View
6 example16/script.js
@@ -71,10 +71,10 @@ redips_init = function () {
}
// set hover color for original DIV elements and for cloned DIV elements
if (rd.obj.className.indexOf('clnd') === -1) {
- rd.hover_color = hover1;
+ rd.hover.color_td = hover1;
}
else {
- rd.hover_color = hover2;
+ rd.hover.color_td = hover2;
}
};
// event handler called before DIV element is dropped to the table
@@ -129,7 +129,7 @@ redips_init = function () {
rd.obj.className += ' clnd';
}
// set hover color for cloned elements
- rd.hover_color = hover2;
+ rd.hover.color_td = hover2;
};
};
View
11 example17/script.js
@@ -30,16 +30,11 @@ redips_init = function () {
rd.init('drag2');
// elements can be dropped only to the empty table cells
rd.drop_option = 'single';
+ // set hover color for TD and TR
+ rd.hover.color_td = '#FFCFAE';
+ rd.hover.color_tr = '#9BB3DA';
// save locations of all DIV elements to the "loc" object (it should go after initialization)
start_positions();
- // row was clicked - set hover color for "row" mode
- rd.myhandler_row_clicked = function () {
- rd.hover_color = '#9BB3DA';
- };
- // element was clicked - set hover color for "cell" mode
- rd.myhandler_clicked = function () {
- rd.hover_color = '#FFCFAE';
- };
// row was moved - event handler
rd.myhandler_row_moved = function () {
// set opacity for moved row (rd.obj is reference of cloned row - mini table)
View
8 example19/script.js
@@ -9,12 +9,12 @@ var redips_init;
// redips initialization
redips_init = function () {
- // reference to the REDIPS.drag lib
+ // set REDIPS.drag reference
var rd = REDIPS.drag;
- // set hover color
- rd.hover_color = '#DDD';
- // initialization
+ // lib initialization
rd.init();
+ // set hover color for TR
+ rd.hover.color_tr = '#ddd';
// define color for empty row
rd.row_empty_color = '#eee';
// row was clicked - enable / disable tables
View
8 example20/script.js
@@ -13,23 +13,21 @@ redips_init = function () {
msg = document.getElementById('msg');
// initialization
rd.init();
+ // set hover colors for TD and TR
+ rd.hover.color_td = '#FFCFAE';
+ rd.hover.color_tr = '#9BB3DA';
// don't ask on element delete but ask for row delete
rd.trash_ask = false;
rd.trash_ask_row = true;
// enable clone element and row with shift key
rd.clone_shiftKey = rd.clone_shiftKey_row = true;
// mark row in second table as empty
rd.row_empty('tbl2', 1);
- // element clicked (set hover color for "cell" mode)
- rd.myhandler_clicked = function () {
- rd.hover_color = '#FFCFAE';
- };
//
// row event handlers
//
// row clicked (display message and set hover color for "row" mode)
rd.myhandler_row_clicked = function () {
- rd.hover_color = '#9BB3DA';
msg.innerHTML = 'Clicked';
};
// row row_dropped
View
53 example21/index.html
@@ -9,7 +9,7 @@
var redips_url = '/javascript/drag-and-drop-content-shift/';
</script>
<script type="text/javascript" src="../header.js"></script>
- <script type="text/javascript" src="../redips-drag.js"></script>
+ <script type="text/javascript" src="../redips-drag-min.js"></script>
<script type="text/javascript" src="script.js"></script>
<title>Example 21: Shift table content</title>
</head>
@@ -44,26 +44,26 @@
<td><div class="drag">L</div></td>
</tr>
<tr>
- <td><div class="drag">Q</div></td>
- <td><div class="drag">R</div></td>
- <td><div class="drag">S</div></td>
- <td><div class="drag">T</div></td>
- <td><div class="drag">U</div></td>
<td><div class="drag">M</div></td>
- </tr>
- <tr>
- <td></td>
- <td></td>
+ <td><div class="drag">N</div></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
+ <td><div class="drag">O</div></td>
+ <td><div class="drag">P</div></td>
<td></td>
<td></td>
<td></td>
<td></td>
+ </tr>
+ <tr>
+ <td><div class="drag">Q</div></td>
+ <td><div class="drag">R</div></td>
+ <td></td>
+ <td></td>
<td></td>
<td></td>
</tr>
@@ -84,19 +84,26 @@
</tr>
</tbody>
</table>
- <!-- shift modes -->
- <input type="radio" name ="shift_mode" onclick="shift_option(this)" title="Horizontal1" value="horizontal1" checked="true"/><span>Horizontal 1</span><br/>
- <input type="radio" name ="shift_mode" onclick="shift_option(this)" title="Horizontal1" value="horizontal2"/><span>Horizontal 2</span><br/>
- <input type="radio" name ="shift_mode" onclick="shift_option(this)" title="Horizontal1" value="vertical1"/><span>Vertical 1</span><br/>
- <input type="radio" name ="shift_mode" onclick="shift_option(this)" title="Horizontal1" value="vertical2"/><span>Vertical 2</span><br/><br/>
- <!-- animation checkbox -->
- <input type="checkbox" class="checkbox" onclick="toggle_animation(this)" title="Enable / disable animation" checked=""/><span>Animation</span>
- <br/>
- <!-- shift after element is deleted checkbox -->
- <input type="checkbox" class="checkbox" onclick="toggle_shift_after(this)" title="Enable / disable content shifting after element is deleted" checked=""/><span>Shift content (after element is deleted)</span>
- <br/>
- <!-- confirm before delete object -->
- <input type="checkbox" class="checkbox" onclick="toggle_confirm(this)" title="Delete confirmation"/><span class="message_line">Delete confirmation</span>
+
+ <div class="mycontrols">
+ <!-- animation checkbox -->
+ <input type="checkbox" class="checkbox" onclick="toggle_animation(this)" title="Enable / disable animation" checked=""/>Animation
+ <br/>
+ <!-- shift after element is deleted checkbox -->
+ <input type="checkbox" class="checkbox" onclick="toggle_shift_after(this)" title="Enable / disable content shifting after element is deleted" checked=""/>Shift content (after element is deleted)
+ <br/>
+ <!-- confirm before delete object -->
+ <input type="checkbox" class="checkbox" onclick="toggle_confirm(this)" title="Show confirm delete dialog"/>Show confirm delete dialog
+ <br/>
+ <br/>
+ <!-- shift modes -->
+ <span class="text">Shift options:</span>
+ <br/>
+ <input type="radio" name ="shift_mode" onclick="shift_option(this)" title="Horizontal1" value="horizontal1" checked="true"/>horizontal 1 - element shift can affect more rows<br/>
+ <input type="radio" name ="shift_mode" onclick="shift_option(this)" title="Horizontal1" value="horizontal2"/>horizontal 2 - each row is treated separately<br/>
+ <input type="radio" name ="shift_mode" onclick="shift_option(this)" title="Horizontal1" value="vertical1"/>vertical 1 - element shift can affect more columns<br/>
+ <input type="radio" name ="shift_mode" onclick="shift_option(this)" title="Horizontal1" value="vertical2"/>vertical 2 - each column is treated separately
+ </div>
</div>
</body>
</html>
View
14 example21/style.css
@@ -58,4 +58,16 @@ div#drag td{
.trash {
color: white;
background-color: SteelBlue;
-}
+}
+
+/* space between radio/checkbox and text */
+div#drag input {
+ margin-right: 10px;
+}
+
+/* text style */
+.mycontrols {
+ margin: 5px;
+ color: grey;
+ font-size: 16px;
+}
View
56 index.html
@@ -15,9 +15,11 @@
// initialization
rd.init();
// set hover color
- rd.hover_color = '#E7C7B2';
+ rd.hover.color_td = '#E7C7B2';
// set drop option to 'shift'
rd.drop_option = 'shift';
+ // set shift mode to vertical2
+ rd.shift_option = 'vertical2';
// enable animation on shifted elements
rd.animation_shift = true;
// set animation loop pause
@@ -34,7 +36,7 @@
<body>
<center>
<h1><a href="http://www.redips.net/javascript/drag-and-drop-table-content/">www.redips.net</a></h1>
- <h2>Drag and drop table content/rows with JavaScript - Version 4.6.1</h2>
+ <h2>Drag and drop table content/rows with JavaScript - Version 4.6.2</h2>
</center>
<!-- tables inside this DIV could have draggable content -->
<div id="drag">
@@ -45,46 +47,49 @@
<col width="240"/>
<col width="240"/>
</colgroup>
+ <!-- message line -->
<tr>
- <td><div id="link1" class="drag t1">Example 00<br/><a href="example00/">Minimal steps</a></div></td>
- <td><div id="link1" class="drag t1">Example 01<br/><a href="example01/">Three tables</a></div></td>
- <td><div id="link1" class="drag t1">Example 02<br/><a href="example02/">Green and orange elements</a></div></td>
+ <th colspan="3" id="message" class="mark" title="Message line">Message line</th>
</tr>
+ <!-- table data -->
<tr>
- <td><div id="link1" class="drag t1">Example 03<br/><a href="example03/index.php">School timetable</a> (<a href="example03/index_static.html">static</a>)</div></td>
- <td><div id="link1" class="drag t1">Example 04<br/><a href="example04/">Tic Tac Toe</a></div></td>
- <td><div id="link1" class="drag t1">Example 05<br/><a href="example05/">Scrollable DIV containers</a></div></td>
- </tr>
- <tr>
- <td><div id="link1" class="drag t1">Example 06<br/><a href="example06/">Scrollable and fixed containers</a></div></td>
- <td><div id="link1" class="drag t1">Example 07<br/><a href="example07/index1.html">A B C D</a> / <a href="example07/index2.html">E F</a></div></td>
+ <td><div id="link1" class="drag t1">Example 00<br/><a href="example00/">Minimal steps</a></div></td>
<td><div id="link1" class="drag t1">Example 08<br/><a href="example08/">Tables in separated containers</a></div></td>
+ <td><div id="link1" class="drag t1">Example 16<br/><a href="example16/">AJAX, hover, sticky, dragging</a></div></td>
</tr>
<tr>
+ <td><div id="link1" class="drag t1">Example 01<br/><a href="example01/">Three tables</a></div></td>
<td><div id="link1" class="drag t1">Example 09<br/><a href="example09/">Single and shift mode</a></div></td>
- <td><div id="link1" class="drag t1">Example 10<br/><a href="example10/">Sticky tables</a></div></td>
- <td><div id="link1" class="drag t1">Example 11<br/><a href="example11/">Drag handle on titlebar</a></div></td>
+ <td><div id="link1" class="drag t1">Example 17<br/><a href="example17/">Move object (animation)</a></div></td>
</tr>
<tr>
- <td><div id="link1" class="drag t1">Example 12<br/><a href="example12/">Select and move more elements</a></div></td>
- <td><div id="link1" class="drag t1">Example 13<br/><a href="example13/">Nested tables</a></div></td>
- <td><div id="link1" class="drag t1">Example 14<br/><a href="example14/">Sort elements in long table</a></div></td>
+ <td><div id="link1" class="drag t1">Example 02<br/><a href="example02/">Green and orange elements</a></div></td>
+ <td><div id="link1" class="drag t1">Example 10<br/><a href="example10/">Sticky tables</a></div></td>
+ <td><div id="link1" class="drag t1">Example 18<br/><a href="example18/">Simple element animation</a> / <a href="example18/index1.html">row</a></div></td>
</tr>
<tr>
-
- <td><div id="link1" class="drag t1">Example 15<br/><a href="example15/">Drag and drop table rows</a></div></td>
- <td><div id="link1" class="drag t1">Example 16<br/><a href="example16/">AJAX, hover, sticky, dragging</a></div></td>
- <td><div id="link1" class="drag t1">Example 17<br/><a href="example17/">Move object (animation)</a></div></td>
-
+ <td><div id="link1" class="drag t1">Example 03<br/><a href="example03/index.php">School timetable</a> (<a href="example03/index_static.html">static</a>)</div></td>
+ <td><div id="link1" class="drag t1">Example 11<br/><a href="example11/">Drag handle on titlebar</a></div></td>
+ <td><div id="link1" class="drag t1">Example 19<br/><a href="example19/">Groups and table rows</a></div></td>
</tr>
<tr>
- <td><div id="link1" class="drag t1">Example 18<br/><a href="example18/">Simple element animation</a> / <a href="example18/index1.html">row</a></div></td>
- <td><div id="link1" class="drag t1">Example 19<br/><a href="example19/">Groups and table rows</a></div></td>
+ <td><div id="link1" class="drag t1">Example 04<br/><a href="example04/">Tic Tac Toe</a></div></td>
+ <td><div id="link1" class="drag t1">Example 12<br/><a href="example12/">Select and move more elements</a></div></td>
<td><div id="link1" class="drag t1">Example 20<br/><a href="example20/">Clone and delete table rows</a></div></td>
</tr>
<tr>
+ <td><div id="link1" class="drag t1">Example 05<br/><a href="example05/">Scrollable DIV containers</a></div></td>
+ <td><div id="link1" class="drag t1">Example 13<br/><a href="example13/">Nested tables</a></div></td>
<td><div id="link1" class="drag t1">Example 21<br/><a href="example21/">Shift table content</a></div></td>
+ </tr>
+ <tr>
+ <td><div id="link1" class="drag t1">Example 06<br/><a href="example06/">Scrollable and fixed containers</a></div></td>
+ <td><div id="link1" class="drag t1">Example 14<br/><a href="example14/">Sort elements in long table</a></div></td>
<td></td>
+ </tr>
+ <tr>
+ <td><div id="link1" class="drag t1">Example 07<br/><a href="example07/index1.html">A B C D</a> / <a href="example07/index2.html">E F</a></div></td>
+ <td><div id="link1" class="drag t1">Example 15<br/><a href="example15/">Drag and drop table rows</a></div></td>
<td></td>
</tr>
<tr>
@@ -102,9 +107,6 @@
<td></td>
<td></td>
</tr>
- <tr>
- <td colspan="3" id="message" class="mark" title="Message line">Message line</td>
- </tr>
</table>
</div>
</body>
View
3 readme.md
@@ -1,4 +1,4 @@
-REDIPS.drag 4.6.1
+REDIPS.drag 4.6.2
============
## What's REDIPS.drag?
@@ -14,6 +14,7 @@ REDIPS.drag is a JavaScript drag and drop library focused on dragging table cont
* dragging table content/row
* dropping modes: multiple, single, switch, switching, overwrite and shift
+* 4 shift modes (horizontal1, horizontal2, vertical1 and vertical2)
* using custom event handlers
* autoscroll
* content cloning
View
56 redips-drag-min.js
@@ -2,10 +2,10 @@
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 4.6.1
-Nov 20, 2011.
+Version 4.6.2
+Dec 5, 2011.
*/
-"use strict";var REDIPS=REDIPS||{};REDIPS.drag=(function(){var init,init_tables,enable_drag,enable_table,img_onmousemove,handler_onmousedown,handler_ondblclick,table_top,handler_onmouseup,handler_onmousemove,element_drop,element_deleted,cell_changed,handler_onresize,set_trc,set_position,set_bgcolor,get_bgcolor,box_offset,calculate_cells,getScrollPosition,autoscrollX,autoscrollY,clone_div,copy_properties,clone_limit,elementControl,get_style,find_parent,find_cell,save_content,relocate,empty_cell,shift_cells,move_object,animation,get_table_index,get_position,row_opacity,row_empty,row_clone,row_drop,form_elements,normalize,has_childs,obj_margin=null,window_width=0,window_height=0,scroll_width=null,scroll_height=null,edge={page:{x:0,y:0},div:{x:0,y:0},flag:{x:0,y:0}},scroll_object,bgcolor_old,scrollable_container=[],tables=[],sort_idx,moved,cloned,cloned_id=[],currentCell=[],div_drag=null,div_box=null,pointer={x:0,y:0},shift_key=false,clone_class=false,table=null,table_old=null,table_source=null,row=null,row_old=null,row_source=null,cell=null,cell_old=null,cell_source=null,obj=false,obj_old=false,mode='cell',hover_color='#E7AB83',bound=25,speed=20,only={div:[],cname:'only',other:'deny'},mark={action:'deny',cname:'mark',exception:[]},border='solid',border_disabled='dotted',opacity_disabled,trash_cname='trash',trash_ask=true,trash_ask_row=true,drop_option='multiple',delete_cloned=true,delete_shifted=false,source_cell=null,current_cell=null,previous_cell=null,target_cell=null,animation_pause=20,animation_step=2,animation_shift=false,shift_after=true,an_counter=0,clone_shiftKey=false,clone_shiftKey_row=false,row_empty_color='White';init=function(dc){var self=this,i,imgs,redips_clone;if(dc===undefined){dc='drag';}
+"use strict";var REDIPS=REDIPS||{};REDIPS.drag=(function(){var init,init_tables,enable_drag,enable_table,img_onmousemove,handler_onmousedown,handler_ondblclick,table_top,handler_onmouseup,handler_onmousemove,element_drop,element_deleted,cell_changed,handler_onresize,set_trc,set_position,setTdStyle,getTdStyle,box_offset,calculate_cells,getScrollPosition,autoscrollX,autoscrollY,clone_div,copy_properties,clone_limit,elementControl,get_style,find_parent,find_cell,save_content,relocate,empty_cell,shift_cells,move_object,animation,get_table_index,get_position,row_opacity,row_empty,row_clone,row_drop,form_elements,normalize,has_childs,obj_margin=null,window_width=0,window_height=0,scroll_width=null,scroll_height=null,edge={page:{x:0,y:0},div:{x:0,y:0},flag:{x:0,y:0}},scroll_object,bgstyle_old,scrollable_container=[],tables=[],sort_idx,moved,cloned,cloned_id=[],currentCell=[],div_drag=null,div_box=null,pointer={x:0,y:0},shift_key=false,clone_class=false,table=null,table_old=null,table_source=null,row=null,row_old=null,row_source=null,cell=null,cell_old=null,cell_source=null,obj=false,obj_old=false,mode='cell',hover={color_td:'#E7AB83',color_tr:'#E7AB83'},bound=25,speed=20,only={div:[],cname:'only',other:'deny'},mark={action:'deny',cname:'mark',exception:[]},border='solid',border_disabled='dotted',opacity_disabled,trash_cname='trash',trash_ask=true,trash_ask_row=true,drop_option='multiple',shift_option='horizontal1',delete_cloned=true,delete_shifted=false,source_cell=null,current_cell=null,previous_cell=null,target_cell=null,animation_pause=20,animation_step=2,animation_shift=false,shift_after=true,an_counter=0,clone_shiftKey=false,clone_shiftKey_row=false,row_empty_color='White';init=function(dc){var self=this,i,imgs,redips_clone;if(dc===undefined){dc='drag';}
div_drag=document.getElementById(dc);if(!document.getElementById('redips_clone')){redips_clone=document.createElement('div');redips_clone.id='redips_clone';redips_clone.style.width=redips_clone.style.height='1px';div_drag.appendChild(redips_clone);}
enable_drag('init');init_tables();handler_onresize();REDIPS.event.add(window,'resize',handler_onresize);imgs=div_drag.getElementsByTagName('img');for(i=0;i<imgs.length;i++){REDIPS.event.add(imgs[i],'mousemove',img_onmousemove);REDIPS.event.add(imgs[i],'touchmove',img_onmousemove);}
REDIPS.event.add(window,'scroll',calculate_cells);};img_onmousemove=function(){return false;};init_tables=function(){var i,j,k,element,level,group_idx,tables_nodeList,nested_tables,td,rowspan;tables_nodeList=div_drag.getElementsByTagName('table');for(i=0,j=0;i<tables_nodeList.length;i++){if(tables_nodeList[i].parentNode.id==='redips_clone'||tables_nodeList[i].className.indexOf('nolayout')>-1){continue;}
@@ -31,7 +31,7 @@ table=row=cell=null;set_trc();table_source=table_old=table;row_source=row_old=ro
else{REDIPS.drag.myhandler_row_clicked(current_cell);}
if(table===null||row===null||cell===null){set_trc();table_source=table_old=table;row_source=row_old=row;cell_source=cell_old=cell;if(table===null||row===null||cell===null){return true;}}
moved=cloned=false;REDIPS.event.add(document,'mousemove',handler_onmousemove);REDIPS.event.add(document,'mouseup',handler_onmouseup);REDIPS.event.add(document,'touchmove',handler_onmousemove);REDIPS.event.add(document,'touchend',handler_onmouseup);if(obj.setCapture){obj.setCapture();}
-if(table!==null&&row!==null&&cell!==null){bgcolor_old=get_bgcolor(table,row,cell);}
+if(table!==null&&row!==null&&cell!==null){bgstyle_old=getTdStyle(table,row,cell);}
position=get_style(tables[table_source],'position');if(position!=='fixed'){position=get_style(tables[table_source].parentNode,'position');}
offset=box_offset(obj,position);obj_margin=[Y-offset[0],offset[1]-X,offset[2]-Y,X-offset[3]];div_drag.onselectstart=function(e){evt=e||window.event;if(!elementControl(evt)){if(evt.shiftKey){document.selection.clear();}
return false;}};return false;};handler_ondblclick=function(e){REDIPS.drag.myhandler_dblclicked();};table_top=function(obj){var e,i,tmp,group;e=find_parent('TABLE',obj.parentNode);group=e.redips.nestedGroup;for(i=0;i<tables.length;i++){if(tables[i].redips.nestedGroup===group){tables[i].redips.sort=sort_idx*100+tables[i].redips.nestedLevel;}}
@@ -58,9 +58,9 @@ if(tr.getElementsByTagName('table').length>0){init_tables();}};form_elements=fun
break;}}}};handler_onmouseup=function(e){var evt=e||window.event,target_table,r_table,r_row,mt_tr,X,Y,i,target_elements,target_elements_length;X=evt.clientX;Y=evt.clientY;edge.flag.x=edge.flag.y=0;if(obj.releaseCapture){obj.releaseCapture();}
REDIPS.event.remove(document,'mousemove',handler_onmousemove);REDIPS.event.remove(document,'touchmove',handler_onmousemove);REDIPS.event.remove(document,'mouseup',handler_onmouseup);REDIPS.event.remove(document,'touchend',handler_onmouseup);div_drag.onselectstart=null;obj.style.left=0;obj.style.top=0;obj.style.zIndex=-1;obj.style.position='static';scroll_width=document.documentElement.scrollWidth;scroll_height=document.documentElement.scrollHeight;edge.flag.x=edge.flag.y=0;if(cloned&&mode==='cell'&&(table===null||row===null||cell===null)){obj.parentNode.removeChild(obj);cloned_id[obj_old.id]-=1;REDIPS.drag.myhandler_notcloned();}
else if(table===null||row===null||cell===null){REDIPS.drag.myhandler_notmoved();}
-else{if(table<tables.length){target_table=tables[table];REDIPS.drag.target_cell=target_cell=target_table.rows[row].cells[cell];set_bgcolor(table,row,cell,bgcolor_old);r_table=table;r_row=row;}
-else if(table_old===null||row_old===null||cell_old===null){target_table=tables[table_source];REDIPS.drag.target_cell=target_cell=target_table.rows[row_source].cells[cell_source];set_bgcolor(table_source,row_source,cell_source,bgcolor_old);r_table=table_source;r_row=row_source;}
-else{target_table=tables[table_old];REDIPS.drag.target_cell=target_cell=target_table.rows[row_old].cells[cell_old];set_bgcolor(table_old,row_old,cell_old,bgcolor_old);r_table=table_old;r_row=row_old;}
+else{if(table<tables.length){target_table=tables[table];REDIPS.drag.target_cell=target_cell=target_table.rows[row].cells[cell];setTdStyle(table,row,cell,bgstyle_old);r_table=table;r_row=row;}
+else if(table_old===null||row_old===null||cell_old===null){target_table=tables[table_source];REDIPS.drag.target_cell=target_cell=target_table.rows[row_source].cells[cell_source];setTdStyle(table_source,row_source,cell_source,bgstyle_old);r_table=table_source;r_row=row_source;}
+else{target_table=tables[table_old];REDIPS.drag.target_cell=target_cell=target_table.rows[row_old].cells[cell_old];setTdStyle(table_old,row_old,cell_old,bgstyle_old);r_table=table_old;r_row=row_old;}
if(mode==='row'){if(!moved){REDIPS.drag.myhandler_row_notmoved();}
else{if(table_source===r_table&&row_source===r_row){mt_tr=obj.getElementsByTagName('tr')[0];obj_old.style.backgroundColor=mt_tr.style.backgroundColor;for(i=0;i<mt_tr.cells.length;i++){obj_old.cells[i].style.backgroundColor=mt_tr.cells[i].style.backgroundColor;}
obj.parentNode.removeChild(obj);delete obj_old.redips.empty_row;if(cloned){REDIPS.drag.myhandler_row_notcloned();}
@@ -81,8 +81,9 @@ if(mode==='cell'&&obj.getElementsByTagName('table').length>0){init_tables();}
calculate_cells();}
table_old=row_old=cell_old=null;};element_drop=function(){var drop=REDIPS.drag.myhandler_dropped_before(target_cell);if(drop!==false){if(REDIPS.drag.drop_option==='shift'&&has_childs(target_cell)){shift_cells(source_cell,target_cell);}
target_cell.appendChild(obj);REDIPS.drag.myhandler_dropped(target_cell);if(cloned){REDIPS.drag.myhandler_cloned_dropped(target_cell);clone_limit();}}
-else if(cloned){obj.parentNode.removeChild(obj);}};element_deleted=function(){REDIPS.drag.myhandler_deleted();if(cloned){clone_limit();}
-if(REDIPS.drag.drop_option==='shift'&&REDIPS.drag.shift_after){shift_cells(source_cell,find_cell('last',source_cell)[0]);}};handler_onmousemove=function(e){var evt=e||window.event,bound=REDIPS.drag.bound,sca,X,Y,i,scrollPosition;if(evt.touches){X=pointer.x=evt.touches[0].clientX;Y=pointer.y=evt.touches[0].clientY;}
+else if(cloned){obj.parentNode.removeChild(obj);}};element_deleted=function(){var param;REDIPS.drag.myhandler_deleted();if(cloned){clone_limit();}
+if(REDIPS.drag.drop_option==='shift'&&REDIPS.drag.shift_after){switch(REDIPS.drag.shift_option){case'vertical2':param='lastInColumn';break;case'horizontal2':param='lastInRow';break;default:param='last';}
+shift_cells(source_cell,find_cell(param,source_cell)[2]);}};handler_onmousemove=function(e){var evt=e||window.event,bound=REDIPS.drag.bound,sca,X,Y,i,scrollPosition;if(evt.touches){X=pointer.x=evt.touches[0].clientX;Y=pointer.y=evt.touches[0].clientY;}
else{X=pointer.x=evt.clientX;Y=pointer.y=evt.clientY;}
if(!moved){if(mode==='cell'&&(clone_class||(REDIPS.drag.clone_shiftKey===true&&shift_key))){REDIPS.drag.obj_old=obj_old=obj;REDIPS.drag.obj=obj=clone_div(obj,true);cloned=true;REDIPS.drag.myhandler_cloned();set_position();}
else{if(mode==='row'){if(clone_class||(REDIPS.drag.clone_shiftKey_row===true&&shift_key)){cloned=true;}
@@ -111,7 +112,7 @@ edge.div.y*=Y<sca.midstY?-1:1;if(edge.flag.y++===0){REDIPS.event.remove(sca.div,
else{edge.div.y=0;}
break;}
else{edge.div.x=edge.div.y=0;}}
-evt.cancelBubble=true;if(evt.stopPropagation){evt.stopPropagation();}};cell_changed=function(){if(table<tables.length&&(table!==table_old||row!==row_old||cell!==cell_old)){if(table_old!==null&&row_old!==null&&cell_old!==null){set_bgcolor(table_old,row_old,cell_old,bgcolor_old);REDIPS.drag.previous_cell=previous_cell=tables[table_old].rows[row_old].cells[cell_old];REDIPS.drag.current_cell=current_cell=tables[table].rows[row].cells[cell];if(REDIPS.drag.drop_option==='switching'&&mode==='cell'){relocate(current_cell,previous_cell);calculate_cells();set_trc();}
+evt.cancelBubble=true;if(evt.stopPropagation){evt.stopPropagation();}};cell_changed=function(){if(table<tables.length&&(table!==table_old||row!==row_old||cell!==cell_old)){if(table_old!==null&&row_old!==null&&cell_old!==null){setTdStyle(table_old,row_old,cell_old,bgstyle_old);REDIPS.drag.previous_cell=previous_cell=tables[table_old].rows[row_old].cells[cell_old];REDIPS.drag.current_cell=current_cell=tables[table].rows[row].cells[cell];if(REDIPS.drag.drop_option==='switching'&&mode==='cell'){relocate(current_cell,previous_cell);calculate_cells();set_trc();}
if(mode==='cell'){REDIPS.drag.myhandler_changed(current_cell);}
else if(mode==='row'&&(table!==table_old||row!==row_old)){REDIPS.drag.myhandler_row_changed(current_cell);}}
set_position();}};handler_onresize=function(){if(typeof(window.innerWidth)==='number'){window_width=window.innerWidth;window_height=window.innerHeight;}
@@ -137,10 +138,13 @@ empty=true;for(i=cell_current.childNodes.length-1;i>=0;i--){if(cell_current.chil
if(!empty&&table_old!==null&&row_old!==null&&cell_old!==null){if(table_source!==table||row_source!==row||cell_source!==cell){previous();break;}}}
if(cell_current.className.indexOf('rowhandler')>-1){previous();break;}
if(cell_current.parentNode.redips&&cell_current.parentNode.redips.empty_row){previous();break;}}
-break;}}};set_position=function(){if(table<tables.length&&table!==null&&row!==null&&cell!==null){bgcolor_old=get_bgcolor(table,row,cell);set_bgcolor(table,row,cell,[REDIPS.drag.hover_color]);table_old=table;row_old=row;cell_old=cell;}};set_bgcolor=function(t,r,c,color){var tr,i;if(mode==='cell'){tables[t].rows[r].cells[c].style.backgroundColor=color[0];}
-else{tr=tables[t].rows[r];for(i=0;i<tr.cells.length;i++){tr.cells[i].style.backgroundColor=color[i]?color[i]:color[0];}}};get_bgcolor=function(t,r,c){var color=[],tr,i;if(mode==='cell'){color[0]=tables[t].rows[r].cells[c].style.backgroundColor;}
-else{tr=tables[t].rows[r];for(i=0;i<tr.cells.length;i++){color[i]=tr.cells[i].style.backgroundColor;}}
-return color;};box_offset=function(box,position,box_scroll){var scrollPosition,oLeft=0,oTop=0,box_old=box;if(position!=='fixed'){scrollPosition=getScrollPosition();oLeft=0-scrollPosition[0];oTop=0-scrollPosition[1];}
+break;}}};set_position=function(){if(table<tables.length&&table!==null&&row!==null&&cell!==null){bgstyle_old=getTdStyle(table,row,cell);setTdStyle(table,row,cell);table_old=table;row_old=row;cell_old=cell;}};setTdStyle=function(ti,ri,ci,t){var tr,i,s;if(mode==='cell'){s=tables[ti].rows[ri].cells[ci].style;s.backgroundColor=(t===undefined)?REDIPS.drag.hover.color_td:t.color[0].toString();if(REDIPS.drag.hover.border_td!==undefined){if(t===undefined){s.border=REDIPS.drag.hover.border_td;}
+else{s.borderTopWidth=t.top[0][0];s.borderTopStyle=t.top[0][1];s.borderTopColor=t.top[0][2];s.borderRightWidth=t.right[0][0];s.borderRightStyle=t.right[0][1];s.borderRightColor=t.right[0][2];s.borderBottomWidth=t.bottom[0][0];s.borderBottomStyle=t.bottom[0][1];s.borderBottomColor=t.bottom[0][2];s.borderLeftWidth=t.left[0][0];s.borderLeftStyle=t.left[0][1];s.borderLeftColor=t.left[0][2];}}}
+else{tr=tables[ti].rows[ri];for(i=0;i<tr.cells.length;i++){s=tr.cells[i].style;s.backgroundColor=(t===undefined)?REDIPS.drag.hover.color_tr:t.color[i].toString();if(REDIPS.drag.hover.border_tr!==undefined){if(t===undefined){if(table===table_source&&row>row_source){s.borderBottom=REDIPS.drag.hover.border_tr;}
+else if(table!==table_source||row<row_source){s.borderTop=REDIPS.drag.hover.border_tr;}}
+else{s.borderTopWidth=t.top[i][0];s.borderTopStyle=t.top[i][1];s.borderTopColor=t.top[i][2];s.borderBottomWidth=t.bottom[i][0];s.borderBottomStyle=t.bottom[i][1];s.borderBottomColor=t.bottom[i][2];}}}}};getTdStyle=function(ti,ri,ci){var tr,i,c,t={color:[],top:[],right:[],bottom:[],left:[]},border=function(c,name){var width='border'+name+'Width',style='border'+name+'Style',color='border'+name+'Color';return[get_style(c,width),get_style(c,style),get_style(c,color)];};if(mode==='cell'){c=tables[ti].rows[ri].cells[ci];t.color[0]=c.style.backgroundColor;if(REDIPS.drag.hover.border_td!==undefined){t.top[0]=border(c,'Top');t.right[0]=border(c,'Right');t.bottom[0]=border(c,'Bottom');t.left[0]=border(c,'Left');}}
+else{tr=tables[ti].rows[ri];for(i=0;i<tr.cells.length;i++){c=tr.cells[i];t.color[i]=c.style.backgroundColor;if(REDIPS.drag.hover.border_tr!==undefined){t.top[i]=border(c,'Top');t.bottom[i]=border(c,'Bottom');}}}
+return t;};box_offset=function(box,position,box_scroll){var scrollPosition,oLeft=0,oTop=0,box_old=box;if(position!=='fixed'){scrollPosition=getScrollPosition();oLeft=0-scrollPosition[0];oTop=0-scrollPosition[1];}
if(box_scroll===undefined||box_scroll===true){do{oLeft+=box.offsetLeft-box.scrollLeft;oTop+=box.offsetTop-box.scrollTop;box=box.offsetParent;}
while(box&&box.nodeName!=='BODY');}
else{do{oLeft+=box.offsetLeft;oTop+=box.offsetTop;box=box.offsetParent;}
@@ -194,24 +198,24 @@ else{autoscroll=true;}
scrollable_container[j]={div:divs[i],offset:cb,midstX:(cb[1]+cb[3])/2,midstY:(cb[0]+cb[2])/2,autoscroll:autoscroll};tbls=divs[i].getElementsByTagName('table');for(k=0;k<tbls.length;k++){tbls[k].sca=scrollable_container[j];}
j++;}}}};enable_table=function(enable_flag,el){var i;if(typeof(el)==='object'&&el.nodeName==='TABLE'){el.redips.enabled=enable_flag;}
else{for(i=0;i<tables.length;i++){if(tables[i].className.indexOf(el)>-1){tables[i].redips.enabled=enable_flag;}}}};get_style=function(el,style_name){var val;if(el&&el.currentStyle){val=el.currentStyle[style_name];}
-else if(el&&window.getComputedStyle){val=document.defaultView.getComputedStyle(el,null).getPropertyValue(style_name);}
+else if(el&&window.getComputedStyle){val=document.defaultView.getComputedStyle(el,null)[style_name];}
return val;};find_parent=function(tag_name,el){while(el&&el.nodeName!==tag_name){el=el.parentNode;}
-return el;};find_cell=function(param,el){var tbl=find_parent('TABLE',el),ri=0,ci=0,c;if(param==='last'){ri=tbl.rows.length-1;ci=tbl.rows[0].cells.length-1;c=tbl.rows[ri].cells[ci];}
-else{c=tbl.rows[0].cells[0];}
-return[c,ri,ci];};save_content=function(tbl){var query='',tbl_start,tbl_end,tbl_rows,cells,tbl_cell,t,r,c,d;tables.sort(function(a,b){return a.redips.idx-b.redips.idx;});if(tbl===undefined){tbl_start=0;tbl_end=tables.length-1;}
+return el;};find_cell=function(param,el){var tbl=find_parent('TABLE',el),ri,ci,c;switch(param){case'firstInColumn':ri=0;ci=el.cellIndex;break;case'firstInRow':ri=el.parentNode.rowIndex;ci=0;break;case'lastInColumn':ri=tbl.rows.length-1;ci=el.cellIndex;break;case'lastInRow':ri=el.parentNode.rowIndex;ci=tbl.rows[0].cells.length-1;break;case'last':ri=tbl.rows.length-1;ci=tbl.rows[0].cells.length-1;break;default:ri=ci=0;}
+c=tbl.rows[ri].cells[ci];return[ri,ci,c];};save_content=function(tbl){var query='',tbl_start,tbl_end,tbl_rows,cells,tbl_cell,t,r,c,d;tables.sort(function(a,b){return a.redips.idx-b.redips.idx;});if(tbl===undefined){tbl_start=0;tbl_end=tables.length-1;}
else if(tbl<0||tbl>tables.length-1){tbl_start=tbl_end=0;}
else{tbl_start=tbl_end=tbl;}
for(t=tbl_start;t<=tbl_end;t++){tbl_rows=tables[t].rows.length;for(r=0;r<tbl_rows;r++){cells=tables[t].rows[r].cells.length;for(c=0;c<cells;c++){tbl_cell=tables[t].rows[r].cells[c];if(tbl_cell.childNodes.length>0){for(d=0;d<tbl_cell.childNodes.length;d++){if(tbl_cell.childNodes[d].nodeName==='DIV'){query+='p[]='+tbl_cell.childNodes[d].id+'_'+t+'_'+r+'_'+c+'&';}}}}}}
query=query.substring(0,query.length-1);tables.sort(function(a,b){return b.redips.sort-a.redips.sort;});return query;};relocate=function(from,to,mode){var i,j,tbl2,cn,move;move=function(el,to){var target=REDIPS.drag.get_position(to);REDIPS.drag.move_object({obj:el,target:target,callback:function(div){var tbl;an_counter--;if(an_counter===0){tbl=REDIPS.drag.find_parent('TABLE',div);REDIPS.drag.enable_table(true,tbl);}}});};if(from===to){return;}
cn=from.childNodes.length;if(mode==='animation'){if(cn>0){tbl2=find_parent('TABLE',to);REDIPS.drag.enable_table(false,tbl2);}
-for(i=0;i<cn;i++){if(from.childNodes[i].nodeType===1&&from.childNodes[i].nodeName==='DIV'){an_counter++;move(from.childNodes[i],to);}}}
-else{for(i=0,j=0;i<cn;i++){if(from.childNodes[j].nodeType===1&&from.childNodes[j].nodeName==='DIV'){to.appendChild(from.childNodes[j]);}
+for(i=0;i<cn;i++){if(from.childNodes[i].nodeType===1&&from.childNodes[i].nodeName==='DIV'&&REDIPS.drag.obj!==from.childNodes[i]){an_counter++;move(from.childNodes[i],to);}}}
+else{for(i=0,j=0;i<cn;i++){if(from.childNodes[j].nodeType===1&&from.childNodes[j].nodeName==='DIV'&&REDIPS.drag.obj!==from.childNodes[j]){to.appendChild(from.childNodes[j]);}
else{j++;}}}};empty_cell=function(td){var i,cn;if(td.nodeName!=='TD'){return false;}
-cn=td.childNodes.length;for(i=0;i<cn;i++){td.removeChild(td.childNodes[0]);}};shift_cells=function(td1,td2){var tbl1,tbl2,pos,pos2,d,c1,c2,cols;tbl1=find_parent('TABLE',td1);tbl2=find_parent('TABLE',td2);cols=tbl2.rows[0].cells.length-1;if(tbl1===tbl2){pos=[td1.parentNode.rowIndex,td1.cellIndex];pos2=[td2.parentNode.rowIndex,td2.cellIndex];if(pos[0]*1000+pos[1]<pos2[0]*1000+pos2[1]){d=1;}
-else{d=-1;}}
-else{d=-1;pos=[tbl2.rows.length-1,cols];pos2=[td2.parentNode.rowIndex,td2.cellIndex];}
-while(pos[0]!==pos2[0]||pos[1]!==pos2[1]){c2=tbl2.rows[pos[0]].cells[pos[1]];pos[1]+=d;if(pos[1]<0){pos[1]=cols;pos[0]--;}
-else if(pos[1]>cols){pos[1]=0;pos[0]++;}
+cn=td.childNodes.length;for(i=0;i<cn;i++){td.removeChild(td.childNodes[0]);}};shift_cells=function(td1,td2){var tbl1,tbl2,pos,pos1,pos2,d,c1,c2,soption,rows,cols,x,y,max;if(td1===td2){return;}
+soption=REDIPS.drag.shift_option;pos1=[td1.parentNode.rowIndex,td1.cellIndex];pos2=[td2.parentNode.rowIndex,td2.cellIndex];tbl1=find_parent('TABLE',td1);tbl2=find_parent('TABLE',td2);rows=tbl2.rows.length-1;cols=tbl2.rows[0].cells.length-1;switch(soption){case'vertical2':pos=(tbl1===tbl2&&td1.cellIndex===td2.cellIndex)?pos1:find_cell('lastInColumn',td2);break;case'horizontal2':pos=(tbl1===tbl2&&td1.parentNode.rowIndex===td2.parentNode.rowIndex)?pos1:find_cell('lastInRow',td2);break;default:pos=(tbl1===tbl2)?pos1:[rows,cols];}
+if(soption==='vertical1'||soption==='vertical2'){d=(pos[1]*1000+pos[0]<pos2[1]*1000+pos2[0])?1:-1;max=rows;x=0;y=1;}
+else{d=(pos[0]*1000+pos[1]<pos2[0]*1000+pos2[1])?1:-1;max=cols;x=1;y=0;}
+while(pos[0]!==pos2[0]||pos[1]!==pos2[1]){c2=tbl2.rows[pos[0]].cells[pos[1]];pos[x]+=d;if(pos[x]<0){pos[x]=max;pos[y]--;}
+else if(pos[x]>max){pos[x]=0;pos[y]++;}
c1=tbl2.rows[pos[0]].cells[pos[1]];if(REDIPS.drag.animation_shift){relocate(c1,c2,'animation');}
else{relocate(c1,c2);}}};move_object=function(ip){var p={'direction':1},x1,y1,w1,h1,x2,y2,w2,h2,row,col,dx,dy,pos,i,target;p.callback=ip.callback;if(typeof(ip.id)==='string'){p.obj=p.obj_old=document.getElementById(ip.id);}
else if(typeof(ip.obj)==='object'&&ip.obj.nodeName==='DIV'){p.obj=p.obj_old=ip.obj;}
@@ -245,7 +249,7 @@ if(el.nodeName==='TR'){td=el.getElementsByTagName('td');for(i=0;i<td.length;i++)
else{for(j=0;j<td[i].childNodes.length;j++){if(td[i].childNodes[j].nodeType===1){td[i].childNodes[j].style.opacity=opacity/100;td[i].childNodes[j].style.filter='alpha(opacity='+opacity+')';}}}}}
else{el.style.opacity=opacity/100;el.style.filter='alpha(opacity='+opacity+')';}};row_empty=function(tbl_id,row_idx,color){var tbl=document.getElementById(tbl_id),row=tbl.rows[row_idx];if(color===undefined){color=REDIPS.drag.row_empty_color;}
if(row.redips===undefined){row.redips={};}
-row.redips.empty_row=true;row_opacity(row,'empty',color);};return{obj:obj,obj_old:obj_old,mode:mode,source_cell:source_cell,previous_cell:previous_cell,current_cell:current_cell,target_cell:target_cell,hover_color:hover_color,bound:bound,speed:speed,only:only,mark:mark,border:border,border_disabled:border_disabled,opacity_disabled:opacity_disabled,trash_cname:trash_cname,trash_ask:trash_ask,trash_ask_row:trash_ask_row,drop_option:drop_option,delete_cloned:delete_cloned,delete_shifted:delete_shifted,clone_shiftKey:clone_shiftKey,clone_shiftKey_row:clone_shiftKey_row,animation_pause:animation_pause,animation_step:animation_step,animation_shift:animation_shift,shift_after:shift_after,row_empty_color:row_empty_color,init:init,enable_drag:enable_drag,enable_table:enable_table,clone_div:clone_div,save_content:save_content,relocate:relocate,empty_cell:empty_cell,move_object:move_object,get_position:get_position,row_opacity:row_opacity,row_empty:row_empty,getScrollPosition:getScrollPosition,get_style:get_style,find_parent:find_parent,myhandler_clicked:function(){},myhandler_dblclicked:function(){},myhandler_moved:function(){},myhandler_notmoved:function(){},myhandler_dropped:function(){},myhandler_dropped_before:function(){},myhandler_switched:function(){},myhandler_changed:function(){},myhandler_cloned:function(){},myhandler_cloned_dropped:function(){},myhandler_clonedend1:function(){},myhandler_clonedend2:function(){},myhandler_notcloned:function(){},myhandler_deleted:function(){},myhandler_undeleted:function(){},myhandler_row_clicked:function(){},myhandler_row_moved:function(){},myhandler_row_notmoved:function(){},myhandler_row_dropped:function(){},myhandler_row_dropped_source:function(){},myhandler_row_changed:function(){},myhandler_row_cloned:function(){},myhandler_row_notcloned:function(){},myhandler_row_deleted:function(){},myhandler_row_undeleted:function(){}};}());if(!REDIPS.event){REDIPS.event=(function(){var add,remove;add=function(obj,eventName,handler){if(obj.addEventListener){obj.addEventListener(eventName,handler,false);}
+row.redips.empty_row=true;row_opacity(row,'empty',color);};return{obj:obj,obj_old:obj_old,mode:mode,source_cell:source_cell,previous_cell:previous_cell,current_cell:current_cell,target_cell:target_cell,hover:hover,bound:bound,speed:speed,only:only,mark:mark,border:border,border_disabled:border_disabled,opacity_disabled:opacity_disabled,trash_cname:trash_cname,trash_ask:trash_ask,trash_ask_row:trash_ask_row,drop_option:drop_option,shift_option:shift_option,delete_cloned:delete_cloned,delete_shifted:delete_shifted,clone_shiftKey:clone_shiftKey,clone_shiftKey_row:clone_shiftKey_row,animation_pause:animation_pause,animation_step:animation_step,animation_shift:animation_shift,shift_after:shift_after,row_empty_color:row_empty_color,init:init,enable_drag:enable_drag,enable_table:enable_table,clone_div:clone_div,save_content:save_content,relocate:relocate,empty_cell:empty_cell,move_object:move_object,get_position:get_position,row_opacity:row_opacity,row_empty:row_empty,getScrollPosition:getScrollPosition,get_style:get_style,find_parent:find_parent,myhandler_clicked:function(){},myhandler_dblclicked:function(){},myhandler_moved:function(){},myhandler_notmoved:function(){},myhandler_dropped:function(){},myhandler_dropped_before:function(){},myhandler_switched:function(){},myhandler_changed:function(){},myhandler_cloned:function(){},myhandler_cloned_dropped:function(){},myhandler_clonedend1:function(){},myhandler_clonedend2:function(){},myhandler_notcloned:function(){},myhandler_deleted:function(){},myhandler_undeleted:function(){},myhandler_row_clicked:function(){},myhandler_row_moved:function(){},myhandler_row_notmoved:function(){},myhandler_row_dropped:function(){},myhandler_row_dropped_source:function(){},myhandler_row_changed:function(){},myhandler_row_cloned:function(){},myhandler_row_notcloned:function(){},myhandler_row_deleted:function(){},myhandler_row_undeleted:function(){}};}());if(!REDIPS.event){REDIPS.event=(function(){var add,remove;add=function(obj,eventName,handler){if(obj.addEventListener){obj.addEventListener(eventName,handler,false);}
else if(obj.attachEvent){obj.attachEvent('on'+eventName,handler);}
else{obj['on'+eventName]=handler;}};remove=function(obj,eventName,handler){if(obj.removeEventListener){obj.removeEventListener(eventName,handler,false);}
else if(obj.detachEvent){obj.detachEvent('on'+eventName,handler);}
View
425 redips-drag.js
@@ -2,8 +2,8 @@
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 4.6.1
-Nov 20, 2011.
+Version 4.6.2
+Dec 5, 2011.
*/
/*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 */
@@ -27,7 +27,7 @@ var REDIPS = REDIPS || {};
* <a href="http://www.redips.net/javascript/drag-and-drop-table-content-animation/">Drag and drop table content plus animation</a>
* <a href="http://www.redips.net/javascript/drag-and-drop-table-row/">Drag and drop table rows</a>
* <a href="http://www.redips.net/javascript/drag-and-drop-table-content/">Drag and Drop table content</a>
- * @version 4.6.1
+ * @version 4.6.2
*/
REDIPS.drag = (function () {
// methods
@@ -47,8 +47,8 @@ REDIPS.drag = (function () {
handler_onresize, // onresize window event handler
set_trc, // function sets current table, row and cell
set_position, // function sets color for the current table cell and remembers previous position and color
- set_bgcolor, // function sets background color for the input parameters table, row, cell and background color (color is array)
- get_bgcolor, // function returns background as array color for the input parameters table, row and cell
+ setTdStyle, // method sets background color and border styles for TD
+ getTdStyle, // method returns object containing background color and border styles for TD
box_offset, // calculates object (box) offset (top, right, bottom, left)
calculate_cells, // calculates table columns and row offsets (cells dimensions)
getScrollPosition, // returns scroll positions in array
@@ -87,7 +87,7 @@ REDIPS.drag = (function () {
div: {x: 0, y: 0}, // closer to the edge, faster scrolling
flag: {x: 0, y: 0}},// flags are needed to prevent multiple calls of autoscrollX and autoscrollY from onmousemove event handler
scroll_object, // scroll_object
- bgcolor_old, // (array) old cell background color
+ bgstyle_old, // (object) old td styles (background color and border styles)
scrollable_container = [], // scrollable container areas (contains autoscroll areas, reference to the container and scroll direction)
tables = [], // table offsets and row offsets (initialized in onload event)
sort_idx, // sort index needed for sorting tables in table_top()
@@ -116,7 +116,11 @@ REDIPS.drag = (function () {
obj = false, // (object) moved object
obj_old = false, // (object) previously moved object (before clicked or cloned)
mode = 'cell', // (string) drag mode: "cell" or "row" (default is cell)
- hover_color = '#E7AB83', // (string) hover color
+ // (object) defines color and border styles for current TD and TR
+ // hover.border_tr defines border color used in "row" mode to show whether row will be dropped above or below current row
+ // border_td and border_tr are initially undefined
+ hover = {color_td: '#E7AB83',
+ color_tr: '#E7AB83'},
bound = 25, // (integer) bound width for autoscroll
speed = 20, // (integer) scroll speed in milliseconds
only = {div: [], // (array) DIVid -> classname, defined DIV elements can be placed only to the marked table cell with class name 'only'
@@ -469,9 +473,9 @@ REDIPS.drag = (function () {
if (obj.setCapture) {
obj.setCapture();
}
- // remember background cell color if is possible
+ // remember background color if is possible
if (table !== null && row !== null && cell !== null) {
- bgcolor_old = get_bgcolor(table, row, cell);
+ bgstyle_old = getTdStyle(table, row, cell);
}
// set table CSS position (needed for exclusion "scroll offset" if table box has position fixed)
position = get_style(tables[table_source], 'position');
@@ -932,7 +936,7 @@ REDIPS.drag = (function () {
target_table = tables[table];
REDIPS.drag.target_cell = target_cell = target_table.rows[row].cells[cell];
// set background color for destination cell (cell had hover color)
- set_bgcolor(table, row, cell, bgcolor_old);
+ setTdStyle(table, row, cell, bgstyle_old);
// set r_table & r_row (needed for mode === "row")
r_table = table;
r_row = row;
@@ -942,7 +946,7 @@ REDIPS.drag = (function () {
target_table = tables[table_source];
REDIPS.drag.target_cell = target_cell = target_table.rows[row_source].cells[cell_source];
// set background color for destination cell (cell had hover color)
- set_bgcolor(table_source, row_source, cell_source, bgcolor_old);
+ setTdStyle(table_source, row_source, cell_source, bgstyle_old);
// set r_table & r_row (needed for mode === "row")
r_table = table_source;
r_row = row_source;
@@ -952,7 +956,7 @@ REDIPS.drag = (function () {
target_table = tables[table_old];
REDIPS.drag.target_cell = target_cell = target_table.rows[row_old].cells[cell_old];
// set background color for destination cell (cell had hover color)
- set_bgcolor(table_old, row_old, cell_old, bgcolor_old);
+ setTdStyle(table_old, row_old, cell_old, bgstyle_old);
// set r_table & r_row (needed for mode === "row")
r_table = table_old;
r_row = row_old;
@@ -1145,6 +1149,8 @@ REDIPS.drag = (function () {
* @memberOf REDIPS.drag#
*/
element_deleted = function () {
+ // set param needed to find last cell (for case where REDIPS.drag.shift_after === true)
+ var param;
// call myhandler_deleted() method
REDIPS.drag.myhandler_deleted();
// if object is cloned, update climit1_X or climit2_X classname
@@ -1153,9 +1159,19 @@ REDIPS.drag = (function () {
}
// shift table content if drop_option is set to "shift" and shift_after is set to true and DIV element is deleted
if (REDIPS.drag.drop_option === 'shift' && REDIPS.drag.shift_after) {
- // content from source cell to table end will be shifted to the left
- // this emulates dropping DIV to the last table cell
- shift_cells(source_cell, find_cell('last', source_cell)[0]);
+ // define last table cell in column, row or table - depending on shift_option value
+ switch (REDIPS.drag.shift_option) {
+ case 'vertical2':
+ param = 'lastInColumn';
+ break;
+ case 'horizontal2':
+ param = 'lastInRow';
+ break;
+ default:
+ param = 'last';
+ }
+ // content from source cell to last cell will be shifted (emulates dropping DIV element to the last table cell)
+ shift_cells(source_cell, find_cell(param, source_cell)[2]);
}
};
@@ -1415,7 +1431,7 @@ REDIPS.drag = (function () {
// set cell background color to the previous cell
if (table_old !== null && row_old !== null && cell_old !== null) {
// set background color for previous table cell
- set_bgcolor(table_old, row_old, cell_old, bgcolor_old);
+ setTdStyle(table_old, row_old, cell_old, bgstyle_old);
// define previous table cell
REDIPS.drag.previous_cell = previous_cell = tables[table_old].rows[row_old].cells[cell_old];
// define current table cell
@@ -1700,9 +1716,9 @@ REDIPS.drag = (function () {
// in case if ordinary element is placed inside 'deny' table cell
if (table < tables.length && table !== null && row !== null && cell !== null) {
// remember background color before setting the new background color
- bgcolor_old = get_bgcolor(table, row, cell);
- // set background color to the current table cell
- set_bgcolor(table, row, cell, [REDIPS.drag.hover_color]);
+ bgstyle_old = getTdStyle(table, row, cell);
+ // highlight current TD / TR (colors and styles are read from public property "hover"
+ setTdStyle(table, row, cell);
// remember current position (for table, row and cell)
table_old = table;
row_old = row;
@@ -1712,67 +1728,144 @@ REDIPS.drag = (function () {
/**
- * Method sets table cell(s) background color.
- * If color has only one value and REDIPS.drag works in "row" mode, then apply this color to all table cells
- * @param {Integer} t Table index.
- * @param {Integer} r Row index.
- * @param {Integer} c Cell index.
- * @param {Array} color Array of colors.
- * @see <a href="#get_bgcolor">get_bgcolor</a>
+ * Method sets table cell(s) background styles (background colors and border styles).
+ * If tdStyle is undefined then current td/tr will be highlighted from public property hover.color_td, hover.color_tr ...
+ * @param {Integer} ti Table index.
+ * @param {Integer} ri Row index.
+ * @param {Integer} ci Cell index.
+ * @param {Object} t Object contains background color and border styles ("t" is TD style object is prepared in getTdStyle method).
+ * @see <a href="#getTdStyle">getTdStyle</a>
* @see <a href="#set_position">set_position</a>
* @see <a href="#cell_changed">cell_changed</a>
* @see <a href="#handler_onmouseup">handler_onmouseup</a>
* @private
* @memberOf REDIPS.drag#
*/
- set_bgcolor = function (t, r, c, color) {
- // reference to the table row and loop variable
- var tr, i;
+ setTdStyle = function (ti, ri, ci, t) {
+ // reference to the table row, loop variable and td.style
+ var tr, i, s;
// if drag mode is "cell"
if (mode === 'cell') {
- tables[t].rows[r].cells[c].style.backgroundColor = color[0];
+ // set TD style reference
+ s = tables[ti].rows[ri].cells[ci].style;
+ // TD background color - tdStyle is undefined then highlight TD otherwise return previous background color
+ s.backgroundColor = (t === undefined) ? REDIPS.drag.hover.color_td : t.color[0].toString();
+ // TD border - if hover.border_td is set then take care of border style
+ if (REDIPS.drag.hover.border_td !== undefined) {
+ // set border (highlight)
+ if (t === undefined) {
+ s.border = REDIPS.drag.hover.border_td;
+ }
+ // return previous state (exit from TD)
+ else {
+ s.borderTopWidth = t.top[0][0];
+ s.borderTopStyle = t.top[0][1];
+ s.borderTopColor = t.top[0][2];
+ s.borderRightWidth = t.right[0][0];
+ s.borderRightStyle = t.right[0][1];
+ s.borderRightColor = t.right[0][2];
+ s.borderBottomWidth = t.bottom[0][0];
+ s.borderBottomStyle = t.bottom[0][1];
+ s.borderBottomColor = t.bottom[0][2];
+ s.borderLeftWidth = t.left[0][0];
+ s.borderLeftStyle = t.left[0][1];
+ s.borderLeftColor = t.left[0][2];
+ }
+ }
}
// or drag mode is "row"
else {
// set reference to the current table row
- tr = tables[t].rows[r];
+ tr = tables[ti].rows[ri];
// set colors to table cells (respectively) or first color to all cells (in case of settings hover to the row)
for (i = 0; i < tr.cells.length; i++) {
- tr.cells[i].style.backgroundColor = color[i] ? color[i] : color[0];
+ // set reference to current TD style
+ s = tr.cells[i].style;
+ // TR background color - tdStyle is undefined then highlight TD otherwise return previous background color
+ s.backgroundColor = (t === undefined) ? REDIPS.drag.hover.color_tr : t.color[i].toString();
+ // TR border - if hover.border_td is set then take care of border style
+ if (REDIPS.drag.hover.border_tr !== undefined) {
+ // set border (highlight) - source row will not have any border
+ if (t === undefined) {
+ // if row is moved above source row
+ if (table === table_source && row > row_source) {
+ s.borderBottom = REDIPS.drag.hover.border_tr;
+ }
+ // if row is moved to other table or below source row
+ else if (table !== table_source || row < row_source) {
+ s.borderTop = REDIPS.drag.hover.border_tr;
+ }
+ }
+ // return previous state borderTop and borderBottom (exit from TD)
+ else {
+ s.borderTopWidth = t.top[i][0];
+ s.borderTopStyle = t.top[i][1];
+ s.borderTopColor = t.top[i][2];
+ s.borderBottomWidth = t.bottom[i][0];
+ s.borderBottomStyle = t.bottom[i][1];
+ s.borderBottomColor = t.bottom[i][2];
+
+ }
+ }
}
}
};
/**
- * Method s returns background color as array for the input parameters table index, row index and cell index.
+ * Method s returns background and border styles as object for the input parameters table index, row index and cell index.
* @param {Integer} t Table index.
* @param {Integer} r Row index.
* @param {Integer} c Cell index.
- * @return {Array} Array of colors (for the row or table cell).
- * @see <a href="#set_bgcolor">set_bgcolor</a>
+ * @return {Object} Object containing background color and border styles (for the row or table cell).
+ * @see <a href="#setTdStyle">setTdStyle</a>
* @private
* @memberOf REDIPS.drag#
*/
- get_bgcolor = function (t, r, c) {
- var color = [], // define color as array
- tr, // reference to the table row
- i; // loop variable
- // if drag mode is "cell" color array will have only one value
+ getTdStyle = function (ti, ri, ci) {
+ var tr, i, c, // reference to the table row, loop variable and td reference
+ // define TD style object with background color and border styles: top, right, bottom and left
+ t = {color: [], top: [], right: [], bottom: [], left: []},
+ // private method gets border styles: top, right, bottom, left
+ border = function (c, name) {
+ var width = 'border' + name + 'Width',
+ style = 'border' + name + 'Style',
+ color = 'border' + name + 'Color';
+ return [get_style(c, width), get_style(c, style), get_style(c, color)];
+ };
+ // if drag mode is "cell" tdStyle.color and tdStyle.border will have only one value
if (mode === 'cell') {
- color[0] = tables[t].rows[r].cells[c].style.backgroundColor;
+ // set TD reference
+ c = tables[ti].rows[ri].cells[ci];
+ // remember background color
+ t.color[0] = c.style.backgroundColor;
+ // remember top, right, bottom and left TD border styles if hover.border_td property is set
+ if (REDIPS.drag.hover.border_td !== undefined) {
+ t.top[0] = border(c, 'Top');
+ t.right[0] = border(c, 'Right');
+ t.bottom[0] = border(c, 'Bottom');
+ t.left[0] = border(c, 'Left');
+ }
}
// if drag mode is "row", then color array will contain color for each table cell
else {
// set reference to the current table row
- tr = tables[t].rows[r];
- // remember color for each table cell
+ tr = tables[ti].rows[ri];
+ // remember styles for each table cell
for (i = 0; i < tr.cells.length; i++) {
- color[i] = tr.cells[i].style.backgroundColor;
+ // set TD reference
+ c = tr.cells[i];
+ // remember background color
+ t.color[i] = c.style.backgroundColor;
+ // remember top and bottom TD border styles if hover.border_tr property is set
+ if (REDIPS.drag.hover.border_tr !== undefined) {
+ t.top[i] = border(c, 'Top');
+ t.bottom[i] = border(c, 'Bottom');
+ }
}
}
- // return background color as array
- return color;
+ // return TD style object
+ return t;
};
@@ -2496,7 +2589,8 @@ REDIPS.drag = (function () {
val = el.currentStyle[style_name];
}
else if (el && window.getComputedStyle) {
- val = document.defaultView.getComputedStyle(el, null).getPropertyValue(style_name);
+// val = document.defaultView.getComputedStyle(el, null).getPropertyValue(style_name);
+ val = document.defaultView.getComputedStyle(el, null)[style_name];
}
return val;
};
@@ -2526,39 +2620,63 @@ REDIPS.drag = (function () {
/**
- * Method returns data for first or last table cell. Data are: cell reference, row index and column index.
- * @param {String} param Parameter defines first or last table cell (values are "first" or "last").
- * @param {HTMLElement} el Table reference or any element within table.
+ * Method returns data (cell reference, row index and column index) for first or last cell in table or row / column.
+ * @param {String} param Parameter defines first or last table cell (values are "first", "firstInColumn", "firstInRow", "last", "lastInColumn", "lastInRow").
+ * @param {HTMLElement} el Table cell reference (td). For "first" or "last" request, el can be any HTMLElement within table.
* @example
- * // find first cell in table (tbl1 is table reference)
- * first_cell = find_cell('first', tbl1);
+ * // find first cell in row (el is table cell reference)
+ * firstInRow = find_cell('firstInRow', el);
+ *
+ * // find last cell in table (el is reference of any cell inside table)
+ * last = find_cell('last', el);
*
- * // find last cell in table (cell2 is reference of one cell within table)
- * last_cell = find_cell('last', cell2);
- * @return {Array} Returns array with cell reference, row index and column index.
+ * // find last cell in column (el is table cell reference)
+ * lastInColumn = find_cell('lastInColumn', el);
+ * @return {Array} Returns array with row index, column index and cell reference,
* @public
* @function
* @name REDIPS.drag#find_cell
*/
find_cell = function (param, el) {
// find parent table (if "el" is already table then "el" reference will not change)
var tbl = find_parent('TABLE', el),
- ri = 0, // row index
- ci = 0, // cell index
+ ri, // row index
+ ci, // cell index
c; // cell reference
- // define row index, column index and cell reference for bottom last table cell
- if (param === 'last') {
+ switch (param) {
+ // first in column
+ case 'firstInColumn':
+ ri = 0;
+ ci = el.cellIndex;
+ break;
+ // first in row
+ case 'firstInRow':
+ ri = el.parentNode.rowIndex;
+ ci = 0;
+ break;
+ // last in column
+ case 'lastInColumn':
ri = tbl.rows.length - 1;
+ ci = el.cellIndex;
+ break;
+ // last in row
+ case 'lastInRow':
+ ri = el.parentNode.rowIndex;
ci = tbl.rows[0].cells.length - 1;
- // cell index
- c = tbl.rows[ri].cells[ci];
- }
+ break;
+ // last in table
+ case 'last':
+ ri = tbl.rows.length - 1;
+ ci = tbl.rows[0].cells.length - 1;
+ break;
// define cell reference for first table cell (row and column indexes are 0)
- else {
- c = tbl.rows[0].cells[0];
+ default:
+ ri = ci = 0;
}
- // return cell data as array
- return [c, ri, ci];
+ // set table cell reference
+ c = tbl.rows[ri].cells[ci];
+ // return cell data as array: row index, cell index and td reference
+ return [ri, ci, c];
};
@@ -2692,8 +2810,8 @@ REDIPS.drag = (function () {
}
// 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') {
+ // relocate (with animation) only DIV elements (exclude relocation for currently dragged element)
+ if (from.childNodes[i].nodeType === 1 && from.childNodes[i].nodeName === 'DIV' && REDIPS.drag.obj !== from.childNodes[i]) {
// increase animated counter (counter is initially set to 0)
an_counter++;
// move DIV element to the target cell
@@ -2706,8 +2824,8 @@ REDIPS.drag = (function () {
// loop through all child nodes in table cell
// 'j', not 'i' because NodeList objects in the DOM are live
for (i = 0, j = 0; i < cn; i++) {
- // relocate only DIV elements
- if (from.childNodes[j].nodeType === 1 && from.childNodes[j].nodeName === 'DIV') {
+ // relocate only DIV elements (exclude relocation for currently dragged element)
+ if (from.childNodes[j].nodeType === 1 && from.childNodes[j].nodeName === 'DIV' && REDIPS.drag.obj !== from.childNodes[j]) {
to.appendChild(from.childNodes[j]);
}
// skip text nodes, attribute nodes ...
@@ -2749,7 +2867,8 @@ REDIPS.drag = (function () {
/**
- * Method shifts table content to the left or right. Useful for cases where order of table content should be preserved.
+ * Method shifts table content horizontally or vertically. REDIPS.drag.shift_option defines the way of how content will be shifted.
+ * Useful for sorting table content in any direction.
* @param {HTMLElement} td1 Source table cell.
* @param {HTMLElement} td2 Target table cell.
* @private
@@ -2758,89 +2877,86 @@ REDIPS.drag = (function () {
shift_cells = function (td1, td2) {
var tbl1, tbl2, // table reference of source and target cell
pos, // start cell (source) position
+ pos1, // start position (used for settings of pos variable)
pos2, // end cell (target) position
d, // direction (1 - left, -1 - right)
c1, c2, // source and target cell needed for relocate
+ soption, // shift option read from public parameter
rows, // row number
- cols; // column number (column number is defined from first row)
+ cols, // column number (column number is defined from first row)
+ x, y, // column / row
+ max; // maximum number or rows or columns
+ // if DIV element is dropped to the source cell then there's nothing to do - just return from method
+ if (td1 === td2) {
+ return;
+ }
+ // set shift option from public property
+ soption = REDIPS.drag.shift_option;
+ // set source and target position (pos1 is used for setting pos variable in switch (soption) case)
+ pos1 = [td1.parentNode.rowIndex, td1.cellIndex];
+ pos2 = [td2.parentNode.rowIndex, td2.cellIndex];
// set table reference for source and target table cell
tbl1 = find_parent('TABLE', td1);
tbl2 = find_parent('TABLE', td2);
- // define number of rows and columns
+ // define number of rows and columns for target table (it's used as row and column index)
rows = tbl2.rows.length - 1;
cols = tbl2.rows[0].cells.length - 1;
- // test if source and target table cells are within the same table
- if (tbl1 === tbl2) {
- // prepare positions [row, cell] for source and target table cell
- pos = [td1.parentNode.rowIndex, td1.cellIndex];
- pos2 = [td2.parentNode.rowIndex, td2.cellIndex];
- // shift_mode vertical
- if (REDIPS.drag.shift_option === 'vertical1' || REDIPS.drag.shift_option === 'vertical2') {
- // if source cell is prior to the target cell then set direction to the "up", otherwise direction is to the "down"
- if (pos[1] * 1000 + pos[0] < pos2[1] * 1000 + pos2[0]) {
- d = 1; // up
- }
- // set direction to down
- else {
- d = -1;
- }
- }
- // shift mode horizontal
- else {
- // if source cell is prior to the target cell then set direction to the "left", otherwise direction is to the "right"
- if (pos[0] * 1000 + pos[1] < pos2[0] * 1000 + pos2[1]) {
- d = 1; // left / up
- }
- // set direction to the right / down
- else {
- d = -1;
- }
- }
- }
- // source and target cells are from different tables
+ // set start position for shifting (depending on shift option value)
+ switch (soption) {
+ case 'vertical2':
+ // if source and target cells are from the same table and from the same column then use pos1 otherwise set last cell in column
+ pos = (tbl1 === tbl2 && td1.cellIndex === td2.cellIndex) ? pos1 : find_cell('lastInColumn', td2);
+ break;
+ case 'horizontal2':
+ // if source and target cell are from the same table and from the same row then use pos1 otherwise set last cell in row
+ pos = (tbl1 === tbl2 && td1.parentNode.rowIndex === td2.parentNode.rowIndex) ? pos1 : find_cell('lastInRow', td2);
+ break;
+ // vertical1 and horizontal1 shift option
+ default:
+ // set start cell if source and target cells are from the same table otherwise set last cell in table
+ pos = (tbl1 === tbl2) ? pos1 : [rows, cols];
+ }
+ //
+ // shift direction, max and row / column variables
+ //
+ // set direction (up/down) for vertical shift option
+ // if source cell is prior to the target cell then set direction to the "up", otherwise direction is to the "down"
+ if (soption === 'vertical1' || soption === 'vertical2') {
+ d = (pos[1] * 1000 + pos[0] < pos2[1] * 1000 + pos2[0]) ? 1 : -1;
+ max = rows;
+ x = 0;
+ y = 1;
+ }
+ // set direction (left/right) for horizontal shift option
+ // if source cell is prior to the target cell then set direction to the "left", otherwise direction is to the "right"
else {
- // set direction to the right
- d = -1;
- // bottom right cell in target table (as start cell)
- pos = [rows, cols];
- // target cell
- pos2 = [td2.parentNode.rowIndex, td2.cellIndex];
- }
- // while loop goes from source to target position
+ d = (pos[0] * 1000 + pos[1] < pos2[0] * 1000 + pos2[1]) ? 1 : -1;
+ max = cols;
+ x = 1;
+ y = 0;
+ }
+ //
+ // loop
+ //
+ // while loop - goes from source to target position
while (pos[0] !== pos2[0] || pos[1] !== pos2[1]) {
// define target cell
c2 = tbl2.rows[pos[0]].cells[pos[1]];
- if (REDIPS.drag.shift_option === 'horizontal1') {
- // increment cell index
- pos[1] += d;
- // if cellIndex was most left column
- if (pos[1] < 0) {
- pos[1] = cols;
- pos[0]--;
- }
- // if cellIndex was most right column
- else if (pos[1] > cols) {
- pos[1] = 0;
- pos[0]++;
- }
- }
- else if (REDIPS.drag.shift_option === 'vertical1') {
- // increment row index
- pos[0] += d;
- // if row is highest row
- if (pos[0] < 0) {
- pos[0] = rows;
- pos[1]--;
- }
- // if cellIndex was most right column
- else if (pos[0] > rows) {
- pos[0] = 0;
- pos[1]++;
- }
+ // increment row index
+ pos[x] += d;
+ // if row is highest row
+ if (pos[x] < 0) {
+ pos[x] = max;
+ pos[y]--;
+ }
+ // if cellIndex was most right column
+ else if (pos[x] > max) {
+ pos[x] = 0;
+ pos[y]++;
}
// define source cell
c1 = tbl2.rows[pos[0]].cells[pos[1]];
- // relocate cell content with animantion
+ // relocate cell content with animation
if (REDIPS.drag.animation_shift) {
relocate(c1, c2, 'animation');
}
@@ -3406,19 +3522,24 @@ REDIPS.drag = (function () {
*/
target_cell : target_cell,
/**
- * Hover color for current table cell.
- * Color could be changed inside event handlers (e.g. each table could have different hover color or some cells could have special hover colors).
- * @type String
- * @name REDIPS.drag#hover_color
+ * Hover object contains 4 properties: color_td, color_tr, border_td and border_tr. color_td and color_tr defines hover color for DIV element and table row.
+ * If border_td is defined, then highlighted cell will have border. If border_tr is defined then highlighted row will have only top or bottom border.
+ * Top border shows that row will be placed above current row, while bottom border shows that current row will be placed below current row.
+ * Some browsers may have problem with "border-collapse:collapse" table style and border highlighting.
+ * In that case try without collapsing TD borders (e.g set "border-spacing:0" and smaller "td.border-width").
+ * @type Object
+ * @name REDIPS.drag#hover
* @example
- * // set "#9BB3DA" as hover color
- * REDIPS.drag.hover_color = '#9BB3DA';
+ * // set "#9BB3DA" as hover color for TD
+ * REDIPS.drag.hover.color_td = '#9BB3DA';
*
- * // or set "Lime" as hover color
- * REDIPS.drag.hover_color ='Lime';
- * @default #E7AB83
+ * // or set "Lime" as hover color for TR
+ * REDIPS.drag.hover.color_tr ='Lime';
+ *
+ * // set red border for highlighted TD
+ * REDIPS.drag.hover.border_td = '2px solid red';
*/
- hover_color : hover_color,
+ hover : hover,
/**
* Bound size for triggering page autoscroll or autoscroll of scrollable DIV container.
* @type Integer
@@ -3538,12 +3659,16 @@ REDIPS.drag = (function () {
*/
drop_option : drop_option,
/**
- * Property defines shift modes: horizontal1, horizontal2, vertical1 and vertical2
+ * Property defines shift modes: horizontal1, horizontal2, vertical1 and vertical2.
+ * horizontal1 - horizontal shift (element shift can affect more rows)
+ * horizontal2 - horizontal shift (each row is treated separately)
+ * vertical1 - vertical shift (element shift can affect more columns)
+ * vertical2 - vertical shift (each column is treated separately)
* @type String
* @name REDIPS.drag#shift_option
* @default horizontal1
* @example
- * // elements can be dropped to all table cells (multiple elements in table cell)
+ * // DIV elements will be shifted vertically (each column is treated separately)
* REDIPS.drag.shift_option = 'vertical2';
*/
shift_option : shift_option,
View
2 style.css
@@ -66,5 +66,5 @@ div#drag td {
/* message cell (marked as forbidden) */
.mark {
color: white;
- background-color: #9B9EA2;
+ background-color: SteelBlue;
}

0 comments on commit 1f555cb

Please sign in to comment.