Drag and Drop PrimeFaces

1 resposta
K

Bem, eu quero usar o Drag & drop do primefaces pra passar dados de uma tabela pra outra, mas, não está funcionando.

<p:fieldset legend="Pizzarias disponíveis"
					rendered="#{!orderBean.pizzeriaSelected}">

					<p:dataTable id="choosePizzeria" var="pizzeria"
						value="#{orderBean.pizzerias}" rowKey="#{pizzeria.name}"
						selection="#{orderBean.pizzeria}" selectionMode="single"
						style="width:605px">

						<p:column headerText="#{msg.name_title}">  
            			#{pizzeria.name}  
      				</p:column>

						<f:facet name="footer">
							<p:commandButton value="Escolher" action="#{orderBean.nextStep}"
								update=":j_idt6:form:menu :j_idt6:form:selectedProducts" />
						</f:facet>
					</p:dataTable>
				</p:fieldset>


				<p:fieldset legend="Cardápio"
					rendered="#{orderBean.pizzeriaSelected}">
					<p:dataTable id="menu" var="product" value="#{orderBean.menu}"
						rowKey="#{product.description}" style="width:605px" selection="">

						<p:column style="width:20px">
							<h:outputText id="dragIcon" styleClass="ui-icon ui-icon-arrow-4" />
							<p:draggable for="dragIcon" revert="true" helper="clone" />
						</p:column>


						<p:column headerText="#{msg.name_title}">  
            			#{product.description}  
      				</p:column>

						<p:column headerText="#{msg.price}">  
            			#{product.value}  
      				</p:column>

					</p:dataTable>
				</p:fieldset>

				<p:fieldset id="selectedProducts" legend="Carrinho"
					rendered="#{orderBean.pizzeriaSelected}" style="width:605px">
					<p:outputPanel id="dropArea">

						<h:outputText value="Adicione aqui os produtos!"
							rendered="#{empty orderBean.products}" style="font-size:24px;" />

					</p:outputPanel>
					
					<p:dataTable id="tableProducts" value="#{orderBean.products}" var="product"
						 rendered="#{not empty orderBean.products}">

						<p:column headerText="#{msg.name_title}">  
            					#{product.description}  
      						</p:column>

						<p:column headerText="#{msg.price}">  
            					#{product.value}  
      						</p:column>
					</p:dataTable>
				</p:fieldset>

				<p:droppable for="selectedProducts" tolerance="touch"
					activeStyleClass="ui-state-highlight" datasource="menu"
					onDrop="handleDrop">
					<p:ajax listener="#{orderBean.onProductDrop}"
						update=":j_idt6:form:dropArea" />
				</p:droppable>

aí está a minha página,

e tenho essa função no meu JS, onde eu chamo na minha tag <p:droppable/>.

function handleDrop(event, ui) {
				var draggable = ui.draggable, helper = ui.helper, position = ui.position, offset = ui.offset;
			}

Simplesmente, eu arrasto e nada acontece, ele não chega nem a chamar o método do listener do Ajax.
Alguma idéia do que possa ser?
Obrigado!

1 Resposta

K

Alguém sabe o que isso pode ser?

Criado 8 de julho de 2012
Ultima resposta 9 de jul. de 2012
Respostas 1
Participantes 1