<!-- | |
~ 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="dnd03" /> | |
</ui:define> | |
<ui:define name="sectionContent"> | |
<h:outputStylesheet id="dynamicDndStyle" target="head"> | |
.dropZone03{text-align: center; color:green; font-size:17px; } | |
.dropZone03 { float: right; border: 2px dashed gray;} | |
.dropZone03 { min-width: 210px; min-height: 220px; float: none;} | |
.dragStarted { border: 2px solid yellow;} | |
.dragEntered { border: 4px dashed green; background-color: #88FF00;} | |
.team { | |
width: 200px; | |
height: 38px; | |
color:gray; | |
border: 1px solid gray; | |
font-size: 17px; | |
text-shadow: 0 3px 5px rgba(100, 100, 100, 0.5); | |
} | |
.team img { | |
width: 35px; | |
} | |
</h:outputStylesheet> | |
<p class="sectionManual" style="width:90%;"> | |
A "drag source" behavior is attached for every rendered div within datatables. Only applicable drag sources are accepted onto the drop zone. This | |
is determined by the "dropTargetTypes" attribute of the "dragSource" behavior, and "types" attribute of the "dropTarget" behavior. | |
</p> | |
<h:form prependId="false"> | |
<hx:div id="dynamicDnDContainer"> | |
<table width="100%"> | |
<tr> | |
<td align="left"> | |
<hx:div id="teamDropZone" styleClass="dropZone03"> | |
<fx:effects event="dragenter" additionalStyleClassToActivate="dragEntered" duration="0.5"/> | |
<fx:animations event="drop" duration="1s" iteration="5"> | |
<fx:animationShake rotation="15" /> | |
</fx:animations> | |
<fx:dropTarget dropListener="#{dndBean.processTeamDrop}" rerender="dynamicDnDContainer" types="F,B"/> | |
<div style="padding:5px; text-align: center;"> | |
<h:outputText value="All Teams" /> | |
</div> | |
<h:dataTable value="#{dndBean.teams}" var="team"> | |
<h:column> | |
<hx:div styleClass="team"> | |
<fx:effects event="dragstart" additionalStyleClassToActivate="dragStarted" duration="0.5"/> | |
<fx:dragSource action="move" param="#{team.id}" dropTargetTypes="#{team.type.code}" /> | |
<img src="#{request.contextPath}/resources/image/team/#{team.id}.png" draggable="false" /> | |
<h:outputText value="#{team.name}" draggable="false"/> | |
</hx:div> | |
</h:column> | |
</h:dataTable> | |
</hx:div> | |
</td> | |
<td align="center"> | |
<hx:div id="basketballTeamDropZone" styleClass="dropZone03"> | |
<fx:effects event="dragenter" additionalStyleClassToActivate="dragEntered" duration="0.5"/> | |
<fx:animations event="drop" duration="1s" iteration="5"> | |
<fx:animationShake rotation="15" /> | |
</fx:animations> | |
<fx:dropTarget dropListener="#{dndBean.processBasketballTeamDrop}" rerender="dynamicDnDContainer" types="B"/> | |
<div style="padding:5px; text-align: center;"> | |
<h:outputText value="Basketball Teams" /> | |
</div> | |
<h:dataTable value="#{dndBean.basketballTeams}" var="team"> | |
<h:column> | |
<hx:div styleClass="team"> | |
<fx:effects event="dragstart" additionalStyleClassToActivate="dragStarted" duration="0.5"/> | |
<fx:dragSource action="move" param="#{team.id}" dropTargetTypes="#{team.type.code}" /> | |
<img src="#{request.contextPath}/resources/image/team/#{team.id}.png" draggable="false" /> | |
<h:outputText value="#{team.name}" draggable="false"/> | |
</hx:div> | |
</h:column> | |
</h:dataTable> | |
</hx:div> | |
</td> | |
<td align="right"> | |
<hx:div id="footballTeamDropZone" styleClass="dropZone03"> | |
<fx:effects event="dragenter" additionalStyleClassToActivate="dragEntered" duration="0.5"/> | |
<fx:animations event="drop" duration="1s" iteration="5"> | |
<fx:animationShake rotation="15" /> | |
</fx:animations> | |
<fx:dropTarget dropListener="#{dndBean.processFootballTeamDrop}" rerender="dynamicDnDContainer" types="F"/> | |
<div style="padding:5px; text-align: center;"> | |
<h:outputText value="Football Teams" /> | |
</div> | |
<h:dataTable value="#{dndBean.footballTeams}" var="team"> | |
<h:column> | |
<hx:div styleClass="team"> | |
<fx:effects event="dragstart" additionalStyleClassToActivate="dragStarted" duration="0.5"/> | |
<fx:dragSource action="move" param="#{team.id}" dropTargetTypes="#{team.type.code}" /> | |
<img src="#{request.contextPath}/resources/image/team/#{team.id}.png" draggable="false" /> | |
<h:outputText value="#{team.name}" draggable="false"/> | |
</hx:div> | |
</h:column> | |
</h:dataTable> | |
</hx:div> | |
</td> | |
</tr> | |
<tr> | |
<td colspan="1" align="center"> | |
<h:commandButton action="#{dndBean.initTeams}" value="Refresh Teams"> | |
<f:ajax render="@form"/> | |
</h:commandButton> | |
</td> | |
<td colspan="2" align="center"> | |
<span>Output of drop listener : </span> | |
<h:outputText value="#{dndBean.teamDropOutput}" id="teamDropOutput" escape="false" style="color:green; font-size:medium;"/> | |
</td> | |
</tr> | |
</table> | |
</hx:div> | |
</h:form> | |
<table> | |
<tr> | |
<td> | |
<sh:sh><![CDATA[ | |
<h:dataTable value="#_{dndBean.teams}" var="team"> | |
<h:column> | |
<hx:div ...> | |
<fx:dragSource param="#_{team.id}" dropTargetTypes="#_{team.type.code}" /> | |
... | |
</hx:div> | |
</h:column> | |
</h:dataTable> | |
... | |
<hx:div id="basketballTeamDropZone" ...> | |
<fx:dropTarget dropListener="#_{dndBean.processBasketballTeamDrop}" | |
rerender="@form" types="B"/>... | |
<!-- List dropped basketball teams into this target --> | |
<h:dataTable value="#_{dndBean.basketballTeams}" var="team"> | |
<h:column> | |
<hx:div styleClass="team">... | |
<h:outputText value="#_{team.name}" .../> | |
</hx:div> | |
</h:column> | |
</h:dataTable> | |
</hx:div> | |
]]></sh:sh> | |
</td> | |
<td> | |
<sh:sh><![CDATA[ | |
<hx:div id="footbalTeamDropZone" ...>... | |
<fx:dropTarget ... types="F"/> | |
</hx:div> | |
]]></sh:sh> | |
<sh:sh lang="java"><![CDATA[ | |
public void processBasketballTeamDrop(DropEvent event) | |
throws AbortProcessingException{ | |
String teamId = event.getParam(); | |
... | |
SportsTeam droppedTeam = getTeam( | |
this.basketballTeamsList, teamId); | |
... | |
teams.remove(droppedTeam); | |
basketballTeams.add(droppedTeam); | |
} | |
]]></sh:sh> | |
</td> | |
</tr> | |
</table> | |
</ui:define> | |
</ui:composition> |