version 4.6.17

- added "clone" and "overwrite" options to the move_object() method
- improved get_position() method
- added "clone" and "overwrite" checkboxes to example18
- calling myhandler_cloned placed inside clone_div() method
- added private method reset_styles()

changes.txt

@@ -1,5 +1,12 @@
 Changes for REDIPS.drag library
 
+4.6.17
+- added "clone" and "overwrite" options to the move_object() method
+- improved get_position() method
+- added "clone" and "overwrite" checkboxes to example18
+- calling myhandler_cloned placed inside clone_div() method
+- added private method reset_styles()
+
 4.6.16
 - fixed relocate() method - discarded "REDIPS.drag.obj !== from.childNodes[i]" condition from element filter
 - fixed find_parent() method - prevented finding node itself (el = el.parentNode) - find_parent() from now starts from parent node

example07/index1.html

@@ -69,7 +69,7 @@
 					</table>
 				</div><!-- right container -->
 			</div><!-- drag container -->
-			<div id="message">Only A and B elements can be placed to the last row</div>
+			<div id="message">Only A and B elements can go to the last row</div>
 		</div><!-- main container -->
 	</body>
 </html>

example07/index2.html

@@ -82,7 +82,7 @@
 			<div id="message">
 				E - can be placed everywhere
 				<br/>
-				F - can be placed to the table bottom
+				F - can be placed to the last two rows
 			</div>
 		</div><!-- main container -->
 	</body>

example07/script1.js

@@ -4,11 +4,12 @@
 /* enable strict mode */
 "use strict";
 
-// define redips_init variable
-var redips_init;
+// create redips container
+var redips = {};
+
 
 // redips initialization
-redips_init = function () {
+redips.init = function () {
 	// reference to the REDIPS.drag
 	var rd = REDIPS.drag;
 	// initialization
@@ -39,8 +40,8 @@ redips_init = function () {
 
 // add onload event listener
 if (window.addEventListener) {
-	window.addEventListener('load', redips_init, false);
+	window.addEventListener('load', redips.init, false);
 }
 else if (window.attachEvent) {
-	window.attachEvent('onload', redips_init);
+	window.attachEvent('onload', redips.init);
 }

example07/script2.js

@@ -4,12 +4,13 @@
 /* enable strict mode */
 "use strict";
 
-// define redips_init variable
-var redips_init;
+// create redips container
+var redips = {};
+
 
 // redips initialization
-redips_init = function () {
-	// reference to the REDIPS.drag
+redips.init = function () {
+	// reference to the REDIPS.drag library
 	var rd = REDIPS.drag;
 	// initialization
 	rd.init();
@@ -19,11 +20,11 @@ redips_init = function () {
 	rd.drop_option = 'single';
 	// do not ask on delete
 	rd.trash_ask = false;
-	// event handler after element is cloned
+	// event handler invoked after element is cloned
 	rd.myhandler_cloned = function () {
 		// set id of cloned element
 		var cloned_id = rd.obj.id;
-		// if id of cloned element begins with "e" then make exception (allow DIV element to access cell with class name "mark")
+		// if id of cloned element begins with "e" then make exception (allow DIV element to access cells with class name "mark")
 		if (cloned_id.substr(0, 1) === 'e') {   
 			rd.mark.exception[cloned_id] = 'mark';
 		}
@@ -33,8 +34,8 @@ redips_init = function () {
 
 // add onload event listener
 if (window.addEventListener) {
-	window.addEventListener('load', redips_init, false);
+	window.addEventListener('load', redips.init, false);
 }
 else if (window.attachEvent) {
-	window.attachEvent('onload', redips_init);
+	window.attachEvent('onload', redips.init);
 }

example11/script.js

@@ -4,11 +4,11 @@
 /* enable strict mode */
 "use strict";
 
-// define redips_init variable
-var redips_init;
+// create redips container
+var redips = {};
 
 // redips initialization
-redips_init = function () {
+redips.init = function () {
 	// reference to the REDIPS.drag object
 	var	rd = REDIPS.drag;
 	// define border style (this should go before init() method)
@@ -39,8 +39,8 @@ redips_init = function () {
 
 // add onload event listener
 if (window.addEventListener) {
-	window.addEventListener('load', redips_init, false);
+	window.addEventListener('load', redips.init, false);
 }
 else if (window.attachEvent) {
-	window.attachEvent('onload', redips_init);
+	window.attachEvent('onload', redips.init);
 }

example11/style.css

@@ -42,8 +42,10 @@ body {
  	margin: auto;
 	z-index: 10;
 	background-color: CornflowerBlue;
-	opacity: 0.7;
-	filter: alpha(opacity=70);
+	/* setting z-index and opacity were messing things up (dragged DIV element goes below element in lower rows) */
+	/* http://stackoverflow.com/questions/2816780/div-popup-inside-td */
+/* 	opacity: 0.7; */
+/* 	filter: alpha(opacity=70); */
 	padding-top: 20px; /* height of drag handle */
 	width: 195px;
 	height: 120px;

example13/index.html

@@ -197,7 +197,7 @@
 				</table>
 				<!-- message -->
 				<div class="message">
-					Elements can be cloned with SHIFT key (press SHIFT key and drag element)
+					Element can be cloned with SHIFT key (press SHIFT key and drag element)
 				</div>
 			</div>
 			<br/>

example18/index.html

@@ -17,7 +17,9 @@
 		<center>
 			<!-- buttons -->
 			<div id="buttons">
-				<input type="button" value="Move" class="button" id="btn_move" onclick="javascript:move()"/>
+					<input type="button" value="Move" class="button" id="btn_move" onclick="redips.move()"/><span></span> <!-- empty span element is needed for applying right margin in CSS -->
+					<input type="checkbox" class="checkbox" onclick="redips.toggle_clone(this)" title="Clone DIV element"/><span class="message_line">Clone</span>
+					<input type="checkbox" class="checkbox" onclick="redips.toggle_overwrite(this)" title="Overwrite content"/><span class="message_line">Overwrite</span>
 			</div>
 			<!-- drag region -->
 			<div id="drag">
@@ -98,6 +100,17 @@
 					</tbody>
 				</table>
 			</div>
+			<div class="instructions">
+				Every click on "Move" button will move DIV element to the random table cell (except the start position).
+				If "Clone" checkbox is set then instead of moving DIV element it will be cloned and moved to the random cell.
+				Cloned DIV element will be appended to the existing cell content unless "Overwrite" checkbox is checked.
+				<br/>
+				<br/>
+				Please see JS code in script.js file and try to replace callback function with the line below.
+				Actually, callback function will start animation again.
+				Once started, animation will not stop until page is refreshed.
+				It's a very attractive effect.
+			</div>
 		</center>
 	</body>
 </html>

example18/index1.html

@@ -17,7 +17,7 @@
 		<center>
 			<!-- buttons -->
 			<div id="buttons">
-				<input type="button" value="Move" class="button" id="btn_move" onclick="javascript:move()"/>
+				<input type="button" value="Move" class="button" id="btn_move" onclick="redips.move()"/>
 			</div>
 			<!-- drag region -->
 			<div id="drag">

example18/script.js

@@ -6,45 +6,56 @@
 
 /* Simple element animation */
 
-var	rd = REDIPS.drag,	// reference to the REDIPS.drag library
-	redips_init,		// redips initialization
-	move,				// moves object to the random position
-	enable_button;		// enables/disables button
+// create redips container
+var redips = {};
 
 
 // redips initialization
-redips_init = function () {
+redips.init = function () {
+	// set reference to the REDIPS.drag library
+	var rd = REDIPS.drag;
+	// script configuration
+	redips.clone = false;		// set false for "clone" checkbox
+	redips.overwrite = false;	// set false to "overwrite" checkbox
+	redips.button = document.getElementById('btn_move');	// set button reference (needed in redips.button_enable() method)
+	// initialization
 	rd.init();
 	// animation pause (lower values mean the animation plays faster)
 	rd.animation_pause = 40;
 	// animation step (minimum is 1)
 	rd.animation_step = 2;
+	// event handler invoked after DIV element is cloned - called from REDIPS.drag.move_object()
+	rd.myhandler_cloned = function (div_cloned) {
+		div_cloned.style.borderColor = 'LightBlue';
+	};
 };
 
 
 /**
  * Function moves element to the random position. Generated position must be different then current position.
  */
-move = function () {
+redips.move = function () {
 	var id = 'd1',	// id of drag element
 		rowIndex,	// row index (random number from 0 to 6)
 		cellIndex,	// cell index (random number from 0 to 6)
 		pos;		// current position as array (returned from get_position method)
 	// set current position for DIV element with defined id
-	pos = rd.get_position(id);
+	pos = REDIPS.drag.get_position(id);
 	// generate random position (must be different then current position)
 	do {
 		rowIndex = Math.floor(Math.random() * 7);	// from 0 to 6
 		cellIndex = Math.floor(Math.random() * 7);	// from 0 to 6
-	} while (pos[0] === rowIndex && pos[1] === cellIndex);
+	} while (pos[1] === rowIndex && pos[2] === cellIndex);
 	// disable "Move" button
-	enable_button(false);
+	redips.button_enable(false);
 	// move object to the random position
-	rd.move_object({
+	REDIPS.drag.move_object({
 		id: id,								// id of object to move
+		clone: redips.clone,				// clone option (if set to true then DIV element will be cloned)
+		overwrite: redips.overwrite,		// overwrite target cell (if set to true, then content in target cell will be overwritten)
 		target: [0, rowIndex, cellIndex],	// target position
-		callback: enable_button				// function to call after animation is over
-		//callback: move					// try to comment upper line and uncomment this line (refresh page and click on "Move" button)
+		callback: redips.button_enable		// function to call after animation is over
+		//callback: redips.move				// try to comment upper line and uncomment this line (refresh page and click on "Move" button)
 	});
 };
 
@@ -53,21 +64,32 @@ move = function () {
  * Function enables/disables button.
  * @param {Boolean} Flag enable or disable buttons.
  */
-enable_button = function (flag) {
-	var button = document.getElementById('btn_move');
+redips.button_enable = function (flag) {
 	// input parameter is optional (default value is true)
 	if (flag === undefined) {
 		flag = true;
 	}
-	// enable/disable button
-	button.disabled = !flag;
+	// enable/disable button (reference is set in redips.init)
+	redips.button.disabled = !flag;
+};
+
+
+// toggle clone option
+redips.toggle_clone = function (chk) {
+	redips.clone = chk.checked;
+};
+
+
+// toggle overwrite option
+redips.toggle_overwrite = function (chk) {
+	redips.overwrite = chk.checked;
 };
 
 
 // add onload event listener
 if (window.addEventListener) {
-	window.addEventListener('load', redips_init, false);
+	window.addEventListener('load', redips.init, false);
 }
 else if (window.attachEvent) {
-	window.attachEvent('onload', redips_init);
+	window.attachEvent('onload', redips.init);
 }

example18/script1.js

@@ -6,14 +6,17 @@
 
 /* Simple row animation */
 
-var	rd = REDIPS.drag,	// reference to the REDIPS.drag library
-	redips_init,		// redips initialization
-	move,				// moves object to the random position
-	enable_button;		// enables/disables button and DIV elements
+// create redips container
+var redips = {};
 
 
 // redips initialization
-redips_init = function () {
+redips.init = function () {
+	// reference to the REDIPS.drag library
+	var	rd = REDIPS.drag;
+	// set button reference (needed in redips.button_enable() method)
+	redips.button = document.getElementById('btn_move');
+	// initialization
 	rd.init();
 	// animation pause (lower values mean the animation plays faster)
 	rd.animation_pause = 40;
@@ -25,18 +28,18 @@ redips_init = function () {
 /**
  * Function moves first row to the last position.
  */
-move = function () {
-	// returned value from move_object method (array with source row and mini table reference)
-	var	row = [];
+redips.move = function () {
+	var	rd = REDIPS.drag,	// reference to the REDIPS.drag library
+		row = [];			// returned value from move_object method (array with source row and mini table reference)
 	// disable "Move" button
-	enable_button(false);
+	redips.button_enable(false);
 	// move object to the random position
 	row = rd.move_object({
-			mode: 'row',			// animation mode - row
-			source: [0, 0],			// source position (table index and row index)
-			target: [0, 6],			// target position
-			callback: enable_button	// function to call after animation is over
-			//callback: move		// try to comment line above and uncomment this line (refresh page and click on "Move" button)
+			mode: 'row',					// animation mode - row
+			source: [0, 0],					// source position (table index and row index)
+			target: [0, 6],					// target position
+			callback: redips.button_enable	// function to call after animation is over
+			//callback: move				// try to comment line above and uncomment this line (refresh page and click on "Move" button)
 		});
 	// set opacity for moved row (row[0] is reference of cloned row - mini table)
 	rd.row_opacity(row[0], 85);
@@ -49,24 +52,23 @@ move = function () {
  * Function enables/disables "Move" button and DIV elements.
  * @param {Boolean} Flag enable or disable buttons and DIV elements.
  */
-enable_button = function (flag) {
-	var button = document.getElementById('btn_move');
+redips.button_enable = function (flag) {
 	// if input parameter is not boolean type, then enable_rows is called from callback function
 	// callback function sends reference of moved element
 	if (typeof(flag) !== 'boolean') {
 		flag = true;
 	}
-	// enable/disable button
-	button.disabled = !flag;
+	// enable/disable button (reference is set in redips.init)
+	redips.button.disabled = !flag;
 	// enable/disable DIV elements in dragging container
-	rd.enable_drag(flag, 'drag', 'subtree');
+	REDIPS.drag.enable_drag(flag, 'drag', 'subtree');
 };
 
 
 // add onload event listener
 if (window.addEventListener) {
-	window.addEventListener('load', redips_init, false);
+	window.addEventListener('load', redips.init, false);
 }
 else if (window.attachEvent) {
-	window.attachEvent('onload', redips_init);
+	window.attachEvent('onload', redips.init);
 }