Add Html5 Drad and drop

Author: jcheron

Ajax/common/html/BaseHtml.php

@@ -7,6 +7,7 @@
 use Ajax\JsUtils;
 use Ajax\common\html\traits\BaseHtmlEventsTrait;
 use Ajax\common\html\traits\BaseHtmlPropertiesTrait;
+use Ajax\service\Javascript;
 
 /**
  * BaseHtml for HTML components
@@ -234,6 +235,39 @@ public function compile(JsUtils $js=NULL, &$view=NULL) {
 		}
 		return $result;
 	}
+	
+	/**
+	 * Sets the element draggable, and eventualy defines the dropzone (HTML5 drag and drop)
+	 * @param string $attr default: "id"
+	 * @param BaseHtml $dropZone the dropzone element
+	 * @param array $parameters default: ["jsCallback"=>"","jqueryDone"=>"append"]
+	 * @return \Ajax\common\html\BaseHtml
+	 */
+	public function setDraggable($attr="id",$dropZone=null,$parameters=[]){
+		$this->setProperty("draggable", "true");
+		$this->addEvent("dragstart",Javascript::draggable($attr));
+		if(isset($dropZone)&& $dropZone instanceof BaseHtml){
+			$jqueryDone="append";$jsCallback="";
+			extract($parameters);
+			$dropZone->asDropZone($jsCallback,$jqueryDone,$parameters);
+		}
+		return $this;
+	}
+	
+	/**
+	 * Declares the element as a drop zone (HTML5 drag and drop)
+	 * @param string $jsCallback
+	 * @param string $jqueryDone
+	 * @param array $parameters
+	 * @return \Ajax\common\html\BaseHtml
+	 */
+	public function asDropZone($jsCallback="",$jqueryDone="append",$parameters=[]){
+		$stopPropagation=false;
+		$script=$this->addEvent("dragover", '', $stopPropagation,true);
+		extract($parameters);
+		$this->addEvent("drop",Javascript::dropZone($jqueryDone,$jsCallback),$stopPropagation,true);
+		return $this;
+	}
 
 	public function __toString() {
 		return $this->compile();

Ajax/common/traits/JsUtilsActionsTrait.php

@@ -529,4 +529,36 @@ public function execOn($event, $element, $js, $parameters=array()) {
 		$script=$this->_add_event($element, $this->exec($js), $event, $preventDefault, $stopPropagation,$immediatly);
 		return $script;
 	}
+	
+	/**
+	 * Sets an element draggable (HTML5 drag and drop)
+	 * @param string $element The element selector
+	 * @param array $parameters default : array("attr"=>"id","preventDefault"=>false,"stopPropagation"=>false,"immediatly"=>true)
+	 */
+	public function setDraggable($element,$parameters=[]){
+		$stopPropagation=false;
+		$preventDefault=false;
+		$immediatly=true;
+		$attr="id";
+		extract($parameters);
+		$script=$this->_add_event($element, Javascript::draggable($attr), "dragstart",$parameters);
+		return $script;
+	}
+	
+	/**
+	 * Declares an element as a drop zone (HTML5 drag and drop)
+	 * @param string $element The element selector
+	 * @param array $parameters default : array("attr"=>"id","stopPropagation"=>false,"immediatly"=>true,"jqueryDone"=>"append")
+	 * @param string $jsCallback the js script to call when element is dropped
+	 */
+	public function asDropZone($element,$jsCallback="",$parameters=[]){
+		$stopPropagation=false;
+		$preventDefault=true;
+		$immediatly=true;
+		$jqueryDone="append";
+		$script=$this->_add_event($element, '', "dragover",true,$stopPropagation,$immediatly);
+		extract($parameters);
+		$script.=$this->_add_event($element, Javascript::dropZone($jqueryDone,$jsCallback), "drop",true,$stopPropagation,$immediatly);
+		return $script;
+	}
 }

Ajax/service/Javascript.php

@@ -6,6 +6,14 @@ class Javascript {
 	public static $preventDefault="\nif(event && event.preventDefault) event.preventDefault();\n";
 	public static $stopPropagation="\nif(event && event.stopPropagation) event.stopPropagation();\n";
 
+	public static function draggable($attr="id"){
+		return 'var dt=event.dataTransfer || event.originalEvent.dataTransfer;dt.setData("Text",$(event.target).attr("'.$attr.'"));';
+	}
+	
+	public static function dropZone($jqueryDone,$jsCallback=""){
+		return 'var dt=event.dataTransfer || event.originalEvent.dataTransfer;var data=dt.getData("Text");$(event.target).'.$jqueryDone.'($("#"+data));'.$jsCallback;
+	}
+	
 	public static function containsCode($expression){
 		return strrpos($expression, 'this')!==false||strrpos($expression, 'event')!==false||strrpos($expression, 'self')!==false;
 	}