Drag and Drop ajax JSF PrimeFeces

Front-end
, , ,
#1

Erro
Erro.PNG833×76 5.25 KB

Alguém sabe o que significa esse erro, estou tentando usar o componente drag and drop Primefaces, porém o evento ajax “drop” não está chamando o método listener. estou usando o mesmo código do Primefaces, já tentei com a tag <f:ajax> e <p:ajax>.

#2

Posta seu código pra gente da uma olhada.

#3 
<!DOCTYPE html>

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:pt="http://xmlns.jcp.org/jsf/passthrough"
xmlns:jsf=“http://xmlns.jcp.org/jsf"
xmlns:p=“http://primefaces.org/ui"
template=”/WEB-INF/template/principal.xhtml”>

<ui:define name="corpo">
	<script type="text/javascript">
		function handleDrop(event, ui) {
			var draggable = ui.draggable,
			helper = ui.helper, 
			position = ui.position, 
			offset = ui.offset;
			console.log(draggable);
			
		}
	</script>

	<h:form id="carForm" >
		<p:fieldset id="availableCarsField" legend="AvailableCars">
			<p:dataGrid id="availableCars" var="car" value="#{dndCarsView.cars}"
				columns="3">
				<p:panel id="pnl" header="#{car.id}" style="text-align:center">
					
				</p:panel>

				<p:draggable for="pnl" revert="true" handle=".ui-panel-titlebar"
					stack=".ui-panel" />
			</p:dataGrid>
		</p:fieldset>

		<p:fieldset id="selectedCars" legend="Selected Cars"
			style="margin-top:20px">
			<p:outputPanel id="dropArea">
				<h:outputText value="!!!Drop here!!!"
					rendered="#{empty dndCarsView.droppedCars}"
					style="font-size:24px;" />
				<p:dataTable id="selectedCarsTable" var="car"
					value="#{dndCarsView.droppedCars}"
					rendered="#{not empty dndCarsView.droppedCars}">
					<p:column headerText="Id">
						<h:outputText value="#{car.id}" />
					</p:column>

					<p:column headerText="Year">
						<h:outputText value="#{car.year}" />
					</p:column>

					<p:column headerText="Brand">
						<h:outputText value="#{car.brand}" />
					</p:column>

					<p:column headerText="Color">
						<h:outputText value="#{car.color}" />
					</p:column>

					<p:column style="width:32px">
						<p:commandButton update=":carForm:display"
							oncomplete="PF('carDialog').show()" icon="ui-icon-search">
							<f:setPropertyActionListener value="#{car}"
								target="#{dndCarsView.selectedCar}" />
						</p:commandButton>
					</p:column>
				</p:dataTable>
			</p:outputPanel>
		</p:fieldset>

		<p:droppable for="selectedCars" tolerance="touch"
			activeStyleClass="ui-state-highlight" datasource="availableCars"
			onDrop="handleDrop">
			<f:ajax alistener="#{dndCarsView.test()}"
		 render="selectedCars availableCars" />
		</p:droppable>

		<p:dialog header="Car Detail" widgetVar="carDialog" resizable="false"
			draggable="false" showEffect="fade" hideEffect="fade" modal="true">

			<p:outputPanel id="display">
				<h:panelGrid columns="2" cellpadding="5"
					rendered="#{not empty dndCarsView.selectedCar}">
					

					<h:outputText value="Id" />
					<h:outputText value="#{dndCarsView.selectedCar.id}"
						style="font-weight:bold" />

					<h:outputText value="Year:" />
					<h:outputText value="#{dndCarsView.selectedCar.year}"
						style="font-weight:bold" />

					<h:outputText value="Brand" />
					<h:outputText value="#{dndCarsView.selectedCar.brand}"
						style="font-weight:bold" />

					<h:outputText value="Color:" />
					<h:outputText value="#{dndCarsView.selectedCar.color}"
						style="font-weight:bold" />
				</h:panelGrid>
			</p:outputPanel>
		</p:dialog>
	</h:form>
</ui:define>

</ui:composition>

#4 
@ManagedBean(name = "dndCarsView")
public class DNDCarsView {
@ManagedProperty("#{carService}")
private CarService service;

private List<Car> cars;

private List<Car> droppedCars;

private Car selectedCar;

@PostConstruct
public void init() {
	cars = service.createCars(9);
	droppedCars = new ArrayList<Car>();
}
public void onCarDrop(DragDropEvent ddEvent){
	Car car = ((Car) ddEvent.getData());

	droppedCars.add(car);
	cars.remove(car);
}

public void setService(CarService service) {
	this.service = service;
}

public List<Car> getCars() {
	return cars;
}

public List<Car> getDroppedCars() {
	return droppedCars;
}

public Car getSelectedCar() {
	return selectedCar;
}

public void setSelectedCar(Car selectedCar) {
	this.selectedCar = selectedCar;
}

}

#5

codigo
codigo.PNG953×635 44.8 KB

essa imagem mostra o código que da erro.

#6

Possivelmente o seu objeto element não tem o atributo name

#7

Boa tarde Mike, esse script e do jsf.

#8

Opa haha
Que versão você esta usando?
Se for abaixo da 6.2, da uma atualizada pra ver…
Esse código é do Drag and Drop?
Talvez você tenha achado um bug…

#9

Estou usando a versão 6.2, outro tipo de evento (keyup) está funcionando, apenas com o drop está acontecendo isso.

#10

Não sei se ja resolveu, ao invés de usar onDrop,usa p:ajax

<p:ajax event="drop" onstart="handleDrop" process="@this alguma-coisa" update="alguma-coisa"/>

Se não der, tenta o evento dragdrop ao inves de drop

#11

Tentei dessa forma que você sugeriu, o <p:ajax> continua sem ser executado.