Primefaces Dragdrop does not fire event

Question

I’m trying to do exactly what’s in the documentation on DataGrid

I drag the components and loose in the p:droppable, but nothing happens, it gives a revert and does not create the table as in the documentation example.

My Bean:

package escola.musica.bean;
import java.io.Serializable;
import java.util.ArrayList;
import java.util.List;
import java.util.Map;
import javax.faces.bean.ManagedBean;
import javax.faces.context.FacesContext;
import org.primefaces.event.DragDropEvent;
import org.primefaces.model.DefaultStreamedContent;
import org.primefaces.model.StreamedContent;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.context.annotation.Scope;
import org.springframework.stereotype.Controller;
import escola.musica.dao.GenericDao;
import escola.musica.modelo.Aluno;
import escola.musica.modelo.Matricula;
import escola.musica.servico.MatriculaServico;

@Controller("turmaBean")
@Scope("session")
@ManagedBean

public class TurmaBean implements Serializable{

private static final long serialVersionUID = 5759339104756147807L;

private List<Matricula> matriculas;
private List<Matricula> matriculasInseridas =  new ArrayList<Matricula>();

@Autowired
private MatriculaServico matriculaServico;

public void iniciarBean()
{
    matriculas =  matriculaServico.listarTodos();
}

public StreamedContent getImagemAluno()
{
    Map<String, String> mapaParametro = FacesContext.getCurrentInstance().getExternalContext().getRequestParameterMap();
    String idAluno = mapaParametro.get("id_aluno");
    if(idAluno != null)
    {
        Aluno alunoBanco = new GenericDao<Aluno>(Aluno.class).obterPorId(new Integer(idAluno));
        return alunoBanco.getImagem();
    }
    return new DefaultStreamedContent();
}

public void onMatriculaDrop(DragDropEvent event)
{
    Matricula matricula = (Matricula) event.getData();
    matriculas.remove(matricula);
    matriculasInseridas.add(matricula);
}
//os gets e sets ....

My View

<ui:composition 
    template="/pages/layout/template.xhtml"
    xmlns="http://www.w3.org/1999/xhtml"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:p="http://primefaces.org/ui">

    <link type="text/css" rel="stylesheet" href="#{request.contextPath}/resources/css/style.css" />

    <ui:define name="titulo">- Turmas</ui:define>

    <ui:define name="header">
        <script type="text/javascript">
            function handleDrop(event, ui) {
            var droppedCar = ui.draggable;

            droppedCar.fadeOut('fast');
            }
        </script>
    </ui:define>

    <ui:define name="principal">
        <h:form id="turma_form">
            <p:fieldset legend="Alunos Matrículados">

                <p:dataGrid id="alunos-matriculados" value="#{turmaBean.matriculas}" var="matricula" columns="3">
                    <p:panel id="painel-matriculas" header="#{matricula.aluno.nome}">
                        <h:panelGrid columns="2">
                            <p:graphicImage value="#{turmaBean.imagemAluno}" cache="false" rendered="#{matricula.aluno.foto != null}" styleClass="size-img">
                                <f:param name="id_aluno" value="#{matricula.aluno.id}" />
                            </p:graphicImage>
                            <h:outputText value="Sem foto" rendered="#{matricula.aluno.foto == null}" />
                            <h:panelGrid columns="2">
                                <h:outputText value="Matrícula:"/>
                                <h:outputText value="#{matricula.numero}"/>
                                <h:outputText value="Curso:"/>
                                <h:outputText value="#{matricula.curso.nome}"/>
                            </h:panelGrid>
                        </h:panelGrid>
                    </p:panel>
                    <p:draggable for="painel-matriculas" revert="true" handle=".ui-panel-titlebar" stack=".ui-panel"/>
                </p:dataGrid>

            </p:fieldset>

            <p:fieldset legend="Turma de Teoria - 1º ano">

                <p:outputPanel id="drop-area">
                    <h:outputText value="Arraste a matricula e solte aqui!" rendered="#{empty turmaBean.matriculasInseridas}"/>
                    <p:dataTable value="#{turmaBean.matriculasInseridas}" var="matricula" rendered="#{not empty turmaBean.matriculasInseridas}">
                        <p:column headerText="Número">
                            <h:outputText value="#{matricula.numero}"/>
                        </p:column>
                        <p:column headerText="Aluno">
                            <h:outputText value="#{matricula.aluno.nome}"/>
                        </p:column>
                        <p:column headerText="Curso">
                            <h:outputText value="#{matricula.curso.nome}"/>
                        </p:column>
                    </p:dataTable>
                </p:outputPanel>

            </p:fieldset>

            <p:droppable for="drop-area" datasource="alunos-matriculados" onDrop="handleDrop" tolerance="touch" activeStyleClass="ui-state-highlight">
                <p:ajax listener="#{turmaBean.onMatriculaDrop}" update="drop-area alunos-matriculados"/>
            </p:droppable>

        </h:form>
    </ui:define>

</ui:composition>

Another detail, in the activeStyleClass="ui-state-highlight" should be triggered when I drag the component by changing the dataTable by heart, which is not happening. I’m thinking it has something to do with that Jquery up there.

Answer 1

Hisoka,

It probably has to do with jQuery yes, my suggestion is that you put it that way:

• Remove javascript from your header tag
• Add it just above the form, as in the example

---

<ui:define name="principal">

<script type="text/javascript">
    function handleDrop(event, ui) {
        var alunoMatriculado = ui.draggable
        alunoMatriculado.fadeOut('fast');
    }
</script>

<h:form id="turma_form">
<p:fieldset legend="Alunos Matrículados">

I don’t know if your goal is to make a list of registrants or remove some registrations from all enrolled. If it is the second option your javascript can look like this:

<script type="text/javascript">
    function handleDrop(event, ui) {
        var matriculaRemovida = ui.draggable
        matriculaRemovida.fadeOut('fast');
    }
</script>

I hope this helps...

Good Luck!