myfaces-html5-demo/src/main/webapp/sections/dnd01.xhtml

<!--
  ~ Licensed to the Apache Software Foundation (ASF) under one
  ~ or more contributor license agreements.  See the NOTICE file
  ~ distributed with this work for additional information
  ~ regarding copyright ownership.  The ASF licenses this file
  ~ to you under the Apache License, Version 2.0 (the
  ~ "License"); you may not use this file except in compliance
  ~ with the License.  You may obtain a copy of the License at
  ~
  ~    http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing,
  ~ software distributed under the License is distributed on an
  ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
  ~ KIND, either express or implied.  See the License for the
  ~ specific language governing permissions and limitations
  ~ under the License.
  -->

<ui:composition template="/sections/sectionTemplate.xhtml"
      xmlns="http://www.w3.org/1999/xhtml" 
      xmlns:f="http://java.sun.com/jsf/core" 
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:hx="http://myfaces.apache.org/html5/html"
      xmlns:fx="http://myfaces.apache.org/html5/core"
      xmlns:sh="http://java.sun.com/jsf/composite/components/sh"
      xmlns:bs="http://java.sun.com/jsf/composite/components/browserSupport"
      xmlns:common="http://java.sun.com/jsf/composite/components/common">

<ui:define name="title">
  Drag and Drop
</ui:define>

<ui:define name="browserSupport">
  <bs:browserSupport webkitSupport="false" mozillaSupport="true">
      <f:facet name="webkit">
          Does not work in Chrome because of <a href="http://code.google.com/p/chromium/issues/detail?id=50009" style="text-decoration: underline;">Chromium Issue-50009</a>
      </f:facet>
  </bs:browserSupport>
</ui:define>

<ui:define name="viewChangeLinks">
    <common:viewChange singlePageName="dnd" slideId="dnd01" />
</ui:define>

<ui:define name="sectionContent">
      
              <h:outputStylesheet id="dnd01Style" target="head"> 
		          .dropZone, .dropZone02, .dropZone03, .dragSource01, .dragSource02 {text-align: center; color:green; font-size:30px; }
		          .dragSource01 { width: 210px; height: 100px; background-image: url("#{request.contextPath}/resources/image/MyFaces_logo.jpg"); }
		          .dragSource02 { width: 210px; height: 100px; background-image: url("#{request.contextPath}/resources/image/MyFaces_logo.jpg"); }
		          
		          .dropZone, .dropZone02, .dropZone03 { float: right; border: 2px dashed gray;}
		          .dropZone { width: 219px; height: 213px; background-image: url("#{request.contextPath}/resources/image/apache_feather.png"); }
		          .dropZone02 { width: 219px; height: 213px;}
		          .dropZone03 { min-width: 300px; min-height: 300px; float: none;}

                  .dragStarted { border: 2px solid yellow;}
                  .dragEntered { border: 4px dashed green; background-color: #88FF00;}
              </h:outputStylesheet>

              <p class="sectionManual">
                  In this example, only the element with "DRAG ME" written on it can be dropped onto the drop zone.
              </p>

	          <h:form prependId="false">
		          <table width="100%" >
		                <tr>
		                    <td>
		                        <hx:div styleClass="dragSource01">
		                            <fx:effects event="dragstart" additionalStyleClassToActivate="dragStarted" duration="0.5"/>
                                    <fx:dragSource action="copy" param="MyFaces" />
		                            <h:outputText value="DRAG ME"/>
		                        </hx:div>
		                    </td>
		                    <td>
		                        <hx:div id="dropZone01" styleClass="dropZone">
                                    <fx:effects event="dragenter" additionalStyleClassToActivate="dragEntered" duration="0.5"/>
                                    <fx:dropTarget dropListener="#{dndBean.processSimpleDnd}"
		                                rerender="simpleDndOutput"/>
		                            <div style="padding-top:45%; text-align: center;">
		                                <h:outputText value="DROP HERE" />
		                            </div>
		                        </hx:div>
		                    </td>
		                </tr>
		                <tr>
		                    <td colspan="2"  align="center">
		                        <span>Output of drop listener : </span><br/>
		                        <h:outputText value="#{dndBean.simpleDndOutput}" id="simpleDndOutput" escape="false" style="color:green; font-size:medium;"/>
		                    </td>
		                </tr>
		                <tr>
		                   <td colspan="2">
	                            <sh:sh><![CDATA[
<hx:div ...>
    <fx:dragSource action="copy" param="MyFaces" />
</hx:div>
...
<hx:div ...>
    <fx:dropTarget dropListener="#_{dndBean.processSimpleDnd}" rerender="simpleDndOutput"/>
</hx:div>
	                           ]]></sh:sh>
	                           <sh:sh lang="java"><![CDATA[
public void processSimpleDnd(DropEvent event) throws AbortProcessingException{
    String param = event.getParam();
    Map<String, String> dropDataMap = event.getDropDataMap();
    ...
}
	                           ]]></sh:sh>
	                        </td>
		                </tr>
		            </table>
	            </h:form>

</ui:define>
</ui:composition>