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!