Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse code

Version 4.5.1

- added empty_cell() public method
- added shift_cells() private method
- added delete_shifted public property
- added shift_animation public property
  • Loading branch information...
commit 6b465d27868cc10e5d6ff5a6ca04662b3efaf5fd 1 parent 6f7263f
Darko Bunic authored September 25, 2011
6  changes.txt
... ...
@@ -1,5 +1,11 @@
1 1
 Changes for REDIPS.drag library
2 2
 
  3
+4.5.1
  4
+- added empty_cell() public method
  5
+- added shift_cells() private method
  6
+- added delete_shifted public property
  7
+- added shift_animation public property
  8
+
3 9
 4.5.0
4 10
 - added functionality for cloning and deleting table rows
5 11
 - added the following event handlers:
2  index.html
@@ -27,7 +27,7 @@
27 27
 	<body>
28 28
 		<center>
29 29
 			<h1><a href="http://www.redips.net/javascript/drag-and-drop-table-content/">www.redips.net</a></h1>
30  
-			<h2>Drag and drop table content/rows with JavaScript - Version 4.5.0</h2>
  30
+			<h2>Drag and drop table content/rows with JavaScript - Version 4.5.1</h2>
31 31
 		</center>
32 32
 		<!-- tables inside this DIV could have draggable content -->
33 33
 		<div id="drag">
1  readme.md
Source Rendered
@@ -35,6 +35,7 @@ REDIPS.drag is a JavaScript drag and drop library focused on dragging table cont
35 35
 * REDIPS.drag.clone_div() - clones DIV element and returns reference of the cloned element
36 36
 * REDIPS.drag.save_content() - scans table content and prepare URL needed for saving
37 37
 * REDIPS.drag.relocate() - relocates all child nodes from source table cell to the target table cell
  38
+* REDIPS.drag.empty_cell() - removes elements from table cell
38 39
 * REDIPS.drag.move_object() - method will calculate parameters and start animation (DIV element to the destination table cell)
39 40
 * REDIPS.drag.get_position() - returns DIV element position as array (tableIndex, rowIndex and cellIndex)
40 41
 * REDIPS.drag.row_opacity() - sets opacity to table row (el, opacity, color)
167  redips-drag.js
@@ -2,8 +2,8 @@
2 2
 Copyright (c) 2008-2011, www.redips.net All rights reserved.
3 3
 Code licensed under the BSD License: http://www.redips.net/license/
4 4
 http://www.redips.net/javascript/drag-and-drop-table-content/
5  
-Version 4.5.0
6  
-Aug 28, 2011.
  5
+Version 4.5.1
  6
+Sep 28, 2011.
7 7
 */
8 8
 
9 9
 /*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 || {};
27 27
  * <a href="http://www.redips.net/javascript/drag-and-drop-table-content-animation/">Drag and drop table content plus animation</a>
28 28
  * <a href="http://www.redips.net/javascript/drag-and-drop-table-row/">Drag and drop table rows</a>
29 29
  * <a href="http://www.redips.net/javascript/drag-and-drop-table-content/">Drag and Drop table content</a>
30  
- * @version 4.5.0
  30
+ * @version 4.5.1
31 31
  */
32 32
 REDIPS.drag = (function () {
33 33
 		// methods
@@ -61,6 +61,8 @@ REDIPS.drag = (function () {
61 61
 		find_parent,				// method returns a reference of the required parent element
62 62
 		save_content,				// scan tables, prepare query string and sent to the multiple-parameters.php
63 63
 		relocate,					// relocate objects from source cell to the target cell (source and target cells are input parameters)
  64
+		empty_cell,					// method removes elements from table cell
  65
+		shift_cells,				// method shifts table content to the left or right (useful for content where the order should be preserved)
64 66
 		move_object,				// method moves object to the destination table, row and cell
65 67
 		animation,					// object animation
66 68
 		get_table_index,			// find table index - because tables array is sorted on every element click
@@ -128,6 +130,7 @@ REDIPS.drag = (function () {
128 130
 		trash_ask_row = true,		// (boolean) confirm row deletion
129 131
 		drop_option = 'multiple',	// (string) drop_option has the following options: multiple, single, switch, switching and overwrite
130 132
 		delete_cloned = true,		// (boolean) delete cloned div if the cloned div is dragged outside of any table
  133
+		delete_shifted = false,		// (boolean) delete last shifted elements in table
131 134
 		source_cell = null,			// (object) source table cell (defined in onmousedown and in onmouseup)
132 135
 		current_cell = null,		// (object) current table cell (defined in onmousdown)
133 136
 		previous_cell = null,		// (object) previous table cell (defined in onmousemove)
@@ -1031,13 +1034,8 @@ REDIPS.drag = (function () {
1031 1034
 			}
1032 1035
 			// overwrite destination table cell with dragged content 
1033 1036
 			else if (REDIPS.drag.drop_option === 'overwrite') {
1034  
-				// remove objects from the destination table cell
1035  
-				target_elements = target_cell.getElementsByTagName('DIV');
1036  
-				target_elements_length = target_elements.length;
1037  
-				for (i = 0; i < target_elements_length; i++) {
1038  
-					// remove child DIV elements from target cell
1039  
-					target_cell.removeChild(target_elements[0]); // '0', not 'i' because NodeList objects in the DOM are live
1040  
-				}
  1037
+				// empty target cell
  1038
+				empty_cell(target_cell);
1041 1039
 				// drop element to the table cell
1042 1040
 				element_drop();
1043 1041
 			}
@@ -2533,22 +2531,155 @@ REDIPS.drag = (function () {
2533 2531
 	 * @name REDIPS.drag#relocate
2534 2532
 	 */
2535 2533
 	relocate = function (from, to) {
2536  
-		var i, // local variable
2537  
-			childnodes_length; // number of child nodes 
  2534
+		var i,	// local variable
  2535
+			cn;	// number of child nodes 
2538 2536
 		// test if "from" cell is equal to "to" cell then do nothing
2539 2537
 		if (from === to) {
2540 2538
 			return;
2541 2539
 		} 
2542 2540
 		// define childnodes length before loop (not in loop because NodeList objects in the DOM are live)
2543  
-		childnodes_length = from.childNodes.length;
  2541
+		cn = from.childNodes.length;
2544 2542
 		// loop through all child nodes
2545  
-		for (i = 0; i < childnodes_length; i++) {
  2543
+		for (i = 0; i < cn; i++) {
2546 2544
 			to.appendChild(from.childNodes[0]); // '0', not 'i' because NodeList objects in the DOM are live
2547 2545
 		}	
2548 2546
 	};
2549 2547
 
2550 2548
 
2551 2549
 	/**
  2550
+	 * Method removes elements from table cell.
  2551
+	 * @param {HTMLElement} td Table cell reference from which all the elements will be deleted.
  2552
+	 * @example
  2553
+	 * // set REDIPS.drag reference
  2554
+	 * var rd = REDIPS.drag;
  2555
+	 * // search for TABLE element (from cell reference)
  2556
+	 * tbl = rd.empty_cell(td);
  2557
+	 * @return {Boolean} Returns false if input element is not table cell.
  2558
+	 * @public
  2559
+	 * @function
  2560
+	 * @name REDIPS.drag#empty_cell
  2561
+	 */
  2562
+	empty_cell = function (td) {
  2563
+		var i,	// local variable
  2564
+			cn;	// number of child nodes 
  2565
+		// if td is not table cell element then return false
  2566
+		if (td.nodeName !== 'TD') {
  2567
+			return false;
  2568
+		} 
  2569
+		// define childnodes length before loop (not in loop because NodeList objects in the DOM are live)
  2570
+		cn = td.childNodes.length;
  2571
+		// delete all child nodes from td
  2572
+		for (i = 0; i < cn; i++) {
  2573
+			td.removeChild(td.childNodes[0]);
  2574
+		}
  2575
+	};
  2576
+
  2577
+	/**
  2578
+	 * Method shifts cell content to the left or right. Useful for content where the order should be preserved.
  2579
+	 * Last (or first) element can stay in cell or can be deleted from table.
  2580
+	 * @param {HTMLElement} td Table cell reference from which table content will be shifted.
  2581
+	 * @param {String} [direction] Left or right shift direction. Default is "right".
  2582
+	 * @example
  2583
+	 * // set REDIPS.drag reference
  2584
+	 * var rd = REDIPS.drag;
  2585
+	 * // search for TABLE element (from cell reference)
  2586
+	 * tbl = rd.empty_cell(td);
  2587
+	 * @return {Boolean} Returns false if input element is not table cell.
  2588
+	 * @public
  2589
+	 * @function
  2590
+	 * @name REDIPS.drag#empty_cell
  2591
+	 */
  2592
+	shift_cells = function (td, direction) {
  2593
+		var tbl,	// table reference
  2594
+			cr_idx,	// current row index
  2595
+			lc,		// last cell
  2596
+			i,		// loop variable
  2597
+			left,	// shift row content to the left
  2598
+			right;	// shift row content to the right
  2599
+		// shift row content to the left
  2600
+		left = function (tr, td) {
  2601
+			var	c1,	c2,	// source and target cell
  2602
+				i;		// local variables
  2603
+			// loop through table cells
  2604
+			for (i = 1; i < tr.cells.length; i++) {
  2605
+				// define source and target cell
  2606
+				c1 = tr.cells[i];
  2607
+				c2 = tr.cells[i - 1];
  2608
+				// relocate cells
  2609
+				relocate(c1, c2);
  2610
+				// if found current cell then stop the loop
  2611
+				if (tr.cells[i] === td) {
  2612
+					break;
  2613
+				}
  2614
+			}
  2615
+		};
  2616
+		// shift row content to the right
  2617
+		right = function (tr, td) {
  2618
+			var	c1, c2,	// source and target cell
  2619
+				i;		// local variables
  2620
+			// loop through cells (backward) to the current cell
  2621
+			for (i = tr.cells.length - 1; i > 0; i--) {
  2622
+				// if found current cell then stop the loop
  2623
+				if (tr.cells[i] === td) {
  2624
+					break;
  2625
+				}
  2626
+				// define source and target cell
  2627
+				c1 = tr.cells[i - 1];
  2628
+				c2 = tr.cells[i];
  2629
+				// relocate cells
  2630
+				relocate(c1, c2);
  2631
+			}
  2632
+		};
  2633
+		// set default direction (if not defined)
  2634
+		if (direction === undefined) {
  2635
+			direction = 'right';
  2636
+		}
  2637
+		// set reference to the table
  2638
+		tbl = find_parent('TABLE', td);
  2639
+		// set current row index
  2640
+		cr_idx = find_parent('TR', td).rowIndex;
  2641
+		// left direction
  2642
+		if (direction === 'left') {
  2643
+			// open loop from first row to the current row
  2644
+			for (i = 0; i <= cr_idx; i++) {
  2645
+				// delete the most left elements
  2646
+				if (REDIPS.drag.delete_shifted && i === 0) {
  2647
+					empty_cell(tbl.rows[0].cells[0]);
  2648
+				}
  2649
+				// shift row content to the left
  2650
+				left(tbl.rows[i], td);
  2651
+				// relocate first cell from the lower row to the last cell of the current row
  2652
+				// for all cases except if current cell is in the first row
  2653
+				if (i < cr_idx) {
  2654
+					// define last cell in the current row and relocate
  2655
+					lc = tbl.rows[i].cells.length - 1;
  2656
+					relocate(tbl.rows[i + 1].cells[0], tbl.rows[i].cells[lc]);
  2657
+				}
  2658
+			}
  2659
+		}
  2660
+		// right direction
  2661
+		else {
  2662
+			// open loop from last row to the current row
  2663
+			for (i = tbl.rows.length - 1; i >= cr_idx; i--) {
  2664
+				// delete the most right elements
  2665
+				if (REDIPS.drag.delete_shifted && i === tbl.rows.length - 1) {
  2666
+					lc = tbl.rows[tbl.rows.length - 1].cells.length - 1;
  2667
+					empty_cell(tbl.rows[tbl.rows.length - 1].cells[lc]);
  2668
+				}
  2669
+				// shift row content to the right
  2670
+				right(tbl.rows[i], td);
  2671
+				// relocate last cell from upper row to the first cell of the current row
  2672
+				// for all cases except if current cell is in the last row
  2673
+				if (i > cr_idx) {
  2674
+					// define last cell in the upper row and relocate
  2675
+					lc = tbl.rows[i - 1].cells.length - 1;
  2676
+					relocate(tbl.rows[i - 1].cells[lc], tbl.rows[i].cells[0]);
  2677
+				}
  2678
+			}
  2679
+		}
  2680
+	};
  2681
+
  2682
+	/**
2552 2683
 	 * Method will calculate parameters and start animation (DIV element to the destination table cell).
2553 2684
 	 * If "target" property is not defined then current location will be used. Here is properties definition of input parameter:
2554 2685
 	 * <ul>
@@ -3203,6 +3334,13 @@ REDIPS.drag = (function () {
3203 3334
 		 */
3204 3335
 		delete_cloned : delete_cloned,
3205 3336
 		/**
  3337
+		 * Delete shifted elements (the most right or the most left elements).
  3338
+		 * @type Boolean
  3339
+		 * @name REDIPS.drag#delete_shifted
  3340
+		 * @default false
  3341
+		 */
  3342
+		delete_shifted : delete_shifted,
  3343
+		/**
3206 3344
 		 * If set to "true", all DIV elements on tables could be cloned with pressed SHIFT key. 
3207 3345
 		 * Just press SHIFT key and try to drag element. Instead of moving current element, DIV element will be cloned and ready for dragging.
3208 3346
 		 * @type Boolean
@@ -3249,6 +3387,7 @@ REDIPS.drag = (function () {
3249 3387
 		clone_div : clone_div,
3250 3388
 		save_content : save_content,
3251 3389
 		relocate : relocate,
  3390
+		empty_cell : empty_cell,
3252 3391
 		move_object : move_object,
3253 3392
 		get_position : get_position,
3254 3393
 		row_opacity : row_opacity,

0 notes on commit 6b465d2

Please sign in to comment.
Something went wrong with that request. Please try again.