Foxbrush

	== HTML5 : Drag and Drop ==
	** Update: 2012/7/2 **
	
	[ How to Make Drag and Drop Enabled ]
	>  Generally 5 items to define
		*  Define a draggable target.
		*  Define the data the draggable target carries.
		*  Define a drop area.
		*  Define what to do with the data the draggable target carries.
		*  Define what to do after dropping if required

	[ Define a draggable target ]
	>  Set the draggable attribute to true on the element that you wish to make draggable.
		*  <div id="slogan" draggable="true">Hello World</div>
		*  By default
			-  All the elments are "draggable=false", except for
			-  <img> and <a> are "draggable=true".
			
	[ Define the data the draggable target carries ]
	>  Use the Event.dataTransfer object (Event is the event object)
		*  Register the "ondragstart" event to attach the data to the draggable target
		* 	slogan.ondragstart = function (e) {
				e.dataTransfer.setData("text/plain", "Hello World");
			}
	>  dataTransfer.setData(String dataType, String dataValue)
		*  It is possible to set multiple data items.
		*  dataType
			-  has two purposes
				a) Specify the type of data, coubld be  MIME-type like such as text/plain or image/jpeg or custom.
					With dataType, we can check if this is acceptable data type when inserting the target to the drop location.
				b) Use as the key for retrieving or clearing the dataValue.
			-  can provide data in multiple formats, that is, attach the multiple data on one draggable target.
		*  dataValue = the value of data
	>  dataTransfer.getData(String dataType)
	>  dataTransfer.clearData([optional] String dataType)
		*  If no dataType is given, all the data would be cleared
	>  dataTransfer.setDragImage(Resource img, Int Xoffset, Int YOffset)
		*  To set the image when dragging.
		*  Set the drag image on "ondragstart".
		*  img = typically an image element but it can also be to a canvas or any other element.
	>  Set the effect on dragging
		*  event.dataTransfer.effectAllowed :
			https://developer.mozilla.org/En/DragDrop/Drag_Operations#Drag_Effects
	
	[ Define a drop area ]
	>  By default, the browser prevents any from happening when dropping  sth onto the HTML element.
		So, to make an elment a drop area, just stop the browser to do the default action.
		That is to register the event on "ondragover" and "ondragenter".
	>  dropArea.ondragover/ondragenter = funciton (e) {
			if (e.preventDefault) { e.preventDefault(); }
			return false;
		} // Registering "ondragover" and "ondragenter" both is for the browser compatibility.
	
	[ Define what to do with the data the draggable target carries ]
	>  Basically two things to do
		*  check if the data type is valid
		*  get the data value and do sth
	>  Check the data type
		*  can register the event of checking on "ondragover"/"ondragenter" or "ondrop".
		*  dropArea.ondragover/ondragenter = function (e) {
				var isLink = e.dataTransfer.types.contains("text/uri-list");
				if (isLink) event.preventDefault();
			}
							OR
			dropArea.ondrop = function (e) {
				var types = e.dataTransfer.types;
				var supportedTypes = ["application/x-moz-file", "text/uri-list", "text/plain"];
				types = supportedTypes.filter(function (value) { return types.contains(value); });
				if (types.length) {
					var data = e.dataTransfer.getData(types[0]); }
				e.preventDefault();
			}
	>  Get the data and do sth
		*  Remeber to cancel the default action on "ondrop" event.
	
	[ Define what to do after dropping if neccessary ]
	>  Register the "ondragend" event handler on the dragging target. 
	
	[ Summary of the events ]
	>  For the draggable target :
		*  dragTarget.ondragstart = function (e) {
				// Attach the data to the draggable target.
				// Set the little drag image.
			}
		*  dragTarget.ondragend = function (e) {
				// Define what to do after dragging.
			}
	>  For the drop area :
		*  dropArea.ondragover/ondragenter = function (e) {
				// Prevent the default action to define a drop area.
				// Check the type of data (here or "ondrop").
			}
		*  dropArea.ondrop = function (e) {
				// Check the type of data (here or "ondragover/ondragenter").
				// Get the transfered data and do sth.
				// Remmeber to prevent the default action.
			}
		*  dropAre.ondragleave = function (e) [
				// Define sth to do when leaving wothout dropping.
			}