<hx:panel id="draggable1" >
	<!-- SOME CONTENT -->
	<fx:dragSource action="copy" dropTargetTypes="#{someBean.optionaldropTargetTypes}" 
		param="#{someBean.dndParamToSendToServer}"/>
</hx:panel>

<div id="draggable1" draggable="true"
		ondragstart="return dragStart(event, 'copy', {'firstdropTargetType','seconddropTargetType'}, 'literalDndParamToSendToServer')"
		>
	<!-- RENDERED CONTENT -->
</div>

<hx:panel id="draggable2" 
		ondragstart="log('dragging');" 
		ondragend="alert('Drag ended. May not have been dropped succesfully though!')">
	<!-- SOME CONTENT -->
	<fx:dragSource action="move" param="anotherDndParamToSendToServer" />
</hx:panel>

<div id="draggable2" draggable="true"
		ondragstart="log('dragging'); return dragStart(event, 'move', null, 'secondDndValueToSendServer')"
		ondragend="alert('Drag ended. May not have been dropped succesfully though!')"
		>
	<!-- RENDERED CONTENT -->
</div>

<hx:inputText id="draggableInputText">
	<fx:dragSource action="move"/>
</hx:panel>

<input type="text" id="draggableInputText" draggable="true"
		ondragstart="return dragStart(event, 'move')" />

<hx:panel id="dropTarget1">
	<!-- SOME CONTENT -->
	<fx:dropTarget actions="move" dropListener="#{someBean.dropListener}" 
		rerender="draggable1" types="firstdropTargetType"/>
</hx:panel>

<div id="dropTarget1" 
	ondragenter="dragEnter(event,{'move'},{'firstdropTargetType'}), {'text/x-myfaces-html5-dnd-source'}"
	ondragover="dragOver(event)"
	ondrop="drop(event, 'stuff necessary to trigger someBean.dropListener and rerender draggable1 using jsf.ajax.request')">
	<!-- RENDERED CONTENT -->
</div>

<hx:panel id="dropTarget2"
	ondragover="makeRedBorder();"
	ondragleave="clearRedBorder();"
	ondrop="makeGreenBorder();"
	>
	<!-- SOME CONTENT -->
	<fx:dropTarget actions="copy,move" dropListener="#{someBean.dropListener}" />
</hx:panel>

<div id="dropTarget2" 
	ondragenter="dragEnter(event,{'copy','move'}), null, {'text/x-myfaces-html5-dnd-source'}"
	ondragover="makeRedBorder(); dragOver(event)"
	ondragleave="clearRedBorder();"
	ondrop="makeGreenBorder();drop(event)">
	<!-- RENDERED CONTENT -->
</div>

<hx:panel id="dropTarget3">
	<!-- SOME CONTENT -->
	<fx:dropTarget actions="copy" dropListener="#{someBean.dropListener}" acceptMimeTypes="text/plain, URL" />
</hx:panel>

<div id="dropTarget3" 
	ondragenter="dragEnter(event,{'copy','move'}, null, {'text/plain', 'URL'})"
	ondragover="dragOver(event)"
	ondrop="drop(event)">
	<!-- RENDERED CONTENT -->
</div>

var paramMimeType = 'text/x-myfaces-html5-dnd-param';
var myFacesComponentSourceMimeType = 'text/x-myfaces-html5-dnd-source';
var dropTargetMimeType = 'text/x-myfaces-html5-drop-zone-type';
var myFacesComponentSourceConstant = 'org.apache.myfaces';

/*
 * This function is only used by MyFaces generated draggable elements, the ones that have <fx:dragSource> behavior.
 */
function dragStart(event, effectAllowed, paramToSendToServer, dropTargetTypes) {

	//set allowed effect
	event.dataTransfer.effectAllowed = effectAllowed;	//only allow some specific event

	//with this, drop zone will understand that source of this dnd operation is some MyFaces component
	event.dataTransfer.setData(myFacesComponentSourceMimeType, myFacesComponentSourceConstant);

	//this will be set if we want to send an optional parameter to the server-side drop listener
	if(paramToSendToServer)
		event.dataTransfer.setData(paramMimeType, valueToSendToServer);		

	//this will be set if we want to make the drop only into specific dropTargets with specific types
	if(dropTargetType)
		event.dataTransfer.setData(dropTargetMimeType, dropTargetTypes);	//in fact, dropTargetTypes is an array. need to iterate 	
      
	return true;
}

function dragEnter(event, allowedEffects, dropTargetTypes, acceptedMimeTypes) {
	//check allowed mime types first
	var found = false;
	var foundTypes = acceptedMimeTypes.filter(function (mimeType) event.dataTransfer.types.contains(mimeType));
	
	//if even one of the event mime types are not allowed, stop DnD  
	if(foundTypes.length == 0)
		return true; //don't cancel the event, thus stop DnD
	
	//check allowed effect
	//changeIt: allowedEffects is an array in fact, so need to iterate
	if (event.dataTransfer.effectAllowed != allowedEffect)		
		return true; //don't cancel the event, thus stop DnD

	//check drop zone type
	//changeIt: in fact these are arrays too. need to iterate or use contains() function
	if (event.dataTransfer.getData(dropTargetMimeType) != dropTargetTypes)
		return true; //don't cancel the event, thus stop DnD

	//cancel the event. this is necessary for DnD execution	
	if (event.preventDefault)	
		event.preventDefault();
	
	return false;
}

function dragOver(event){
	//don't check source, allowedEffect and dropTargetType, since they are checked at dragEnter function
	
	//show same user hint effect specified by drag source 
	event.dataTransfer.dropEffect = event.dataTransfer.effectAllowed;	

	//cancel the event, so effect on screen is updated
	if (event.preventDefault) 
		event.preventDefault(); 

	return false;
}

function drop(event, jsf_ajax_request_necessary_stuff){
	//cancel the event. this is necessary for DnD execution	
	if (event.preventDefault) 
		event.preventDefault();

	//CALL jsf.ajax.request with constructing parameters from jsf_ajax_request_necessary_stuff
	//this call should trigger the dropListener and make the rerender operation
	//need to send event mime types and values too!

	return false;
}