TYPO3 Formidable - Drag and drop with renderlet:BOX

Handling drag'n'drop with renderlet:BOX

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<formidable version="2.0.304"
	xmlns:datahandler="http://www.ameos.com/formidable/2.0.304/datahandler"
	xmlns:datasource="http://www.ameos.com/formidable/2.0.304/datasource"
	xmlns:renderer="http://www.ameos.com/formidable/2.0.304/renderer"
	xmlns:renderlet="http://www.ameos.com/formidable/2.0.304/renderlet"
	xmlns:validator="http://www.ameos.com/formidable/2.0.304/validator"
	xmlns:actionlet="http://www.ameos.com/formidable/2.0.304/actionlet">

<elements>
	
		<renderlet:BOX name="pink" class="draggable">
			<draggable use="true"/>
			<childs>
				<renderlet:IMAGE path="fileadmin/templates/v1/images/zebugs/pink.jpeg" />
			</childs>
		</renderlet:BOX>
		
		<renderlet:BOX name="red" class="draggable">
			<draggable use="true" />
			<childs>
				<renderlet:IMAGE path="fileadmin/templates/v1/images/zebugs/red.jpeg" />
			</childs>
		</renderlet:BOX>
		
		<renderlet:BOX name="yellow" class="draggable">
			<draggable use="true"/>
			<childs>
				<renderlet:IMAGE path="fileadmin/templates/v1/images/zebugs/yellow.jpeg" />
			</childs>
		</renderlet:BOX>
		
		<renderlet:BOX name="green" class="draggable">
			<draggable use="true"/>
			<childs>
				<renderlet:IMAGE path="fileadmin/templates/v1/images/zebugs/green.jpeg" />
			</childs>
		</renderlet:BOX>
		
		<renderlet:BOX name="orange" class="draggable">
			<draggable use="true"/>
			<childs>
				<renderlet:IMAGE path="fileadmin/templates/v1/images/zebugs/orange.jpeg" />
			</childs>
		</renderlet:BOX>
		
		<renderlet:BOX name="gray" class="draggable">
			<draggable use="true"/>
			<childs>
				<renderlet:IMAGE path="fileadmin/templates/v1/images/zebugs/gray.jpeg" />
			</childs>
		</renderlet:BOX>
		
		<renderlet:BOX name="mydropbox">
			<class>
				<userobj>
					<php><![CDATA[

return $this->oSandBox->sCurrentColor;
						
					]]></php>
				</userobj>
			</class>
			<droppable use="true" />
			<onDragDrop runat="ajax" params="sys_draggable" cache="false">
				<userobj>
					<php><![CDATA[
						
	$aParams = $this->oMajixEvent->getParams();
	$aTasks = array();
	
	$sDragged = $aParams["sys_draggable"];

if($this->oSandBox->sCurrentColor == $sDragged) {
		$aTasks[] = $this->aORenderlets[$sDragged]->majixFx("shrink");
		$aTasks[] = $this->aORenderlets["mydropbox"]->majixRemoveClass(
			$this->oSandBox->sCurrentColor
		);

if($this->oSandBox->nextColor()) {
			$aTasks[] = $this->aORenderlets["mydropbox"]->majixAddClass(
				$this->oSandBox->sCurrentColor
			);
		} else {
			$iMs = (t3lib_div::milliseconds() - $this->oSandBox->iStartTime);
			$aTasks[] = $this->aORenderlets["mydropbox"]->majixSetHtml(
				"You did it in " . ($iMs/1000) . " seconds !"
			);
		}
	} else {
		$aTasks[] = $this->aORenderlets["mydropbox"]->majixFx("shake");
	}
	
	return $aTasks;
						
					]]></php>
				</userobj>
			</onDragDrop>
		</renderlet:BOX>

</elements>

</formidable>

See code: Drag-a-bug, template file

Read about drag-and-drop in the documentation.

Handling drag'n'drop with renderlet:BOX

Download

Features

Documentation

Many thanks to

Latest snippets