Problema com Drag and Drop primefaces

Front-end
#1

Pessoal estou com um problema no drag and drop do primefaces, quando eu arrasto o componente para cima de outro ele não reconhece e nem dispara o evento, alguém pode me ajudar a resolver o problema?
Abaixo vou listar a página e o código?

Página


<h:form prependId="false">
		<p:growl id="growl" showDetail="true" />
		<h:panelGrid columns="2" columnClasses="lineup,squad">

			<p:panel header="Estados">
				<p:dataGrid id="availableStates" value="#{stateBean.states}"
					var="state" columns="4">
					<p:column>
						<p:graphicImage id="state"
							value="images/states/#{state.nameOfPicture}"
							url="images/states/#{state.nameOfPicture}" />
						<p:draggable for="state" revert="true" scope="#{state.owner}" />

					</p:column>
				</p:dataGrid>
			</p:panel>



			<h:panelGrid columns="2">


				<p:outputPanel id="LCM"
					style="background:#333333; 
				width:900px; 
				height:1100px;
				display:block;">


					<p:droppable dropListener="#{stateBean.onDrop}" tolerance="touch"
						onDropUpdate="selectedStates growl" scope="AC" onDrop="handleDrop"
						datasource="availableStates" />
				</p:outputPanel>

			</h:panelGrid>


		</h:panelGrid>

Código


@ManagedBean
@SessionScoped
public class StateBean {

	private List<State> states;
	private List<State> selectedStates;

	public StateBean() {

		states = new ArrayList<State>();
		states.add(new State("Acre", "Acre.png", "", "AC"));
		states.add(new State("Alagoas", "Alagoas.png", "", "AL"));		

	}

	public List<State> getStates() {
		return states;
	}

	public List<State> getSelectedStates() {
		return selectedStates;
	}

	public void onDrop(DragDropEvent event) {
		State state = (State) event.getData();
		
		selectedStates.add(state);

		FacesContext.getCurrentInstance().addMessage(
				null,
				new FacesMessage(state.getName() + " added", "Position:"
						+ event.getDropId()));
	}

}

Caso queiram mais alguma informação postem ai.

Obrigado.

#2

É necessário colocar o jar do prime no tomcat?

#3

Bom dia lucas_carvalho100,

Por gentileza, estou passando pelo mesmo problema, voce conseguiu resolve-lo na ocasião?

Obrigado!

[]'s

#4

Cara eu não consegui resolver na época, como tinha que resolver logo o problema fiz no flash mesmo…

Também na época eu entrei em contato com o pessoa da prime, eles não deram resposta… até hoje…rs

Caso você ache a solução posta ai por gentileza.

Abraços.

#5

Boa tarde,
kra tive o mesmo problema. Revirei a internet procurando a solução. Achei que era por causa dos layouts que estava usando (outro bug que parace já ter sido reportado).

Para disparar o evento do droppable, precisa criar a função JS na página.

tag droppable => você coloca: onDrop="handleDrop"

No header, você precisa criar a função:

&lt;script type="text/javascript"&gt;
		function handleDrop(event, ui) {
			var draggable = ui.draggable, 
			helper = ui.helper, 
			position = ui.position, 
			offset = ui.offset;
		}
&lt;/script&gt;

Criei aqui e funcionou tudo.
Está na doc (PDF) do primefaces, mas é claro que eu estava seguindo somente os exemplos online e que ninguém me disse isto. Rsrs

Veja se o teu problema é este também.
Aqui pra mim funcionou tudo.

Integração com o layout fullpage também precisa de intervenção (desta vez CSS) pra funcionar corretamente.

Espero que possa ajudar em algo aí.

Att,

Lucas Israel

#6

Luck, vlw o destaque cara, distração e não levei a sério esta parte da documentação.
Vlw mesmo!!!
Mas aki…
Por curiosidade…
Qual intervenção css que vc fala a respeito no layout?

[quote=McLuck]Boa tarde,
kra tive o mesmo problema. Revirei a internet procurando a solução. Achei que era por causa dos layouts que estava usando (outro bug que parace já ter sido reportado).

Para disparar o evento do droppable, precisa criar a função JS na página.

tag droppable => você coloca: onDrop="handleDrop"

No header, você precisa criar a função:

&lt;script type="text/javascript"&gt;
		function handleDrop(event, ui) {
			var draggable = ui.draggable, 
			helper = ui.helper, 
			position = ui.position, 
			offset = ui.offset;
		}
&lt;/script&gt;

Criei aqui e funcionou tudo.
Está na doc (PDF) do primefaces, mas é claro que eu estava seguindo somente os exemplos online e que ninguém me disse isto. Rsrs

Veja se o teu problema é este também.
Aqui pra mim funcionou tudo.

Integração com o layout fullpage também precisa de intervenção (desta vez CSS) pra funcionar corretamente.

Espero que possa ajudar em algo aí.

Att,

Lucas Israel[/quote]

#7