forceFallback changes

removed the default behaviour to append the cloned Element to the body.
now the cloned Element gets added in the same parent, with the addition
of the class defined in options.fallbackClass.
added the possibility to change the fallback class.
added the possibility to decide wheter the fallback should be cloned
into the same parent or to the document's body.

README.md

@@ -65,12 +65,9 @@ var sortable = new Sortable(el, {
 	ghostClass: "sortable-ghost",  // Class name for the drop placeholder
 	dataIdAttr: 'data-id',
 	
-	/*
-	 ignore the HTML5 DnD behaviour and force the fallback to kick in
-	 - provide a more reliable cross-browser solution
-	 - grants the ability to display a different "dragged" element
-	*/
-	forcePolyfill: false,
+	forceFallback: false,  // ignore the HTML5 DnD behaviour and force the fallback to kick in
+	fallbackClass: "sortable-fallback"  // Class name for the cloned DOM Element when using forceFallback
+	fallbackOnBody: false  // Appends the cloned DOM Element into the Document's Body
 	
 	scroll: true, // or HTMLElement
 	scrollSensitivity: 30, // px, how near the mouse must be to an edge to start scrolling.
@@ -260,13 +257,13 @@ Sortable.create(list, {
 ---
 
 
-#### `forcePolyfill` option
-If set to `true`, the polyfill - or Fallback for non HTML5 Browser - will be used, even if we are using an HTML5 Browser.
+#### `forceFallback` option
+If set to `true`, the Fallback for non HTML5 Browser will be used, even if we are using an HTML5 Browser.
 This gives us the possiblity to test the behaviour for older Browsers even in newer Browser, or make the Drag 'n Drop feel more consistent between Desktop , Mobile and old Browsers.
 
-On top of that, the polyfill always generates a copy of that DOM Element in the Document's Body. This behaviour can be exploited to give us more control over the look of this 'dragged' Element.
+On top of that, the Fallback always generates a copy of that DOM Element and appends the class `fallbackClass` definied in the options. This behaviour controls the look of this 'dragged' Element.
 
-Demo: http://jsbin.com/zejimolava/edit?html,css,js,output
+Demo: http://jsbin.com/xinuyenabi/edit?html,css,js,output
 
 
 ---

Sortable.js

@@ -179,7 +179,9 @@
 			dragoverBubble: false,
 			dataIdAttr: 'data-id',
 			delay: 0,
-			forcePolyfill: false
+			forceFallback: false,
+			fallbackClass: 'sortable-fallback',
+			fallbackOnBody: false
 		};
 
 
@@ -364,7 +366,7 @@
 
 				this._onDragStart(tapEvt, 'touch');
 			}
-			else if (!supportDraggable || this.options.forcePolyfill) {
+			else if (!supportDraggable || this.options.forceFallback) {
 				this._onDragStart(tapEvt, true);
 			}
 			else {
@@ -463,6 +465,9 @@
 
 				ghostEl = dragEl.cloneNode(true);
 
+				_toggleClass(ghostEl, this.options.ghostClass, false);
+				_toggleClass(ghostEl, this.options.fallbackClass, true);
+
 				_css(ghostEl, 'top', rect.top - parseInt(css.marginTop, 10));
 				_css(ghostEl, 'left', rect.left - parseInt(css.marginLeft, 10));
 				_css(ghostEl, 'width', rect.width);
@@ -471,7 +476,7 @@
 				_css(ghostEl, 'position', 'fixed');
 				_css(ghostEl, 'zIndex', '100000');
 
-				document.body.appendChild(ghostEl);
+				this.options.fallbackOnBody && document.body.appendChild(ghostEl) || rootEl.appendChild(ghostEl);
 
 				// Fixing dimensions.
 				ghostRect = ghostEl.getBoundingClientRect();