如何通过拖放更新列表jsf？

Question

我希望当用户点击＆＃34; Aceptar＆＃34; button，integrantes列表捕获其元素（<li>），JSF更新arrayList。

这是我的代码：

XHTML：

<h:form id = "formseleccionIntegrantes">
    <ul id = "usuarios2" class = "listaUsuarios">
        <ui:repeat value = "#{proyectoNuevo.usuarios}" var = "usuario">
            <li>#{usuario.idUsuario} - #{usuario.nombre} #{usuario.apellido}</li>
        </ui:repeat>
    </ul>
    <ul id = "usuariosSeleccionados2" class = "listaUsuarios">
        <ui:repeat value = "#{proyectoNuevo.integrantes}" var = "integrante">
            <li>#{integrante.idUsuario} - #{integrante.nombre} #{integrante.apellido}</li>
        </ui:repeat>
    </ul>
    <br/>
    <div class = "modal-footer">
        <br/>
        <b:commandButton class ="btn btn-primary" value="Aceptar" action="#{proyectoNuevo.actualizarIntegrantes}" update = "@form"/>
        <b:button value="Cerrar" class="btn btn-danger" dismiss="modal" onclick="return false;"/>
    </div>
</h:form>

JavaScript的：

$( '#usuarios2, #usuariosSeleccionados2' ).sortable({
        connectWith: '.listaUsuarios'
    }).disableSelection();

ProyectoNuevo.java

package bean.controlador;

import java.io.IOException;
import java.io.Serializable;
import java.util.ArrayList;
import java.util.List;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.ManagedProperty;
import javax.faces.bean.SessionScoped;
import javax.faces.component.UIComponent;
import javax.faces.context.FacesContext;
import modelo.dao.DAOUsuario;
import modelo.entidades.Proyecto;
import modelo.entidades.Usuario;

@ManagedBean
@SessionScoped
public class ProyectoNuevo implements Serializable {

    private Proyecto nuevoProyecto;
    private UIComponent btnNuevoProyecto;
    private List<Usuario> usuarios;
    private List<Usuario> integrantes;
    @ManagedProperty(value = "#{cuentaUsuario}")
    private CuentaUsuario cuentaUsuario;

    public ProyectoNuevo(){
    }

    //1. Condiciones iniciales

    public void load() throws IOException, Exception {
        nuevoProyecto = new Proyecto();
        llenarListaUsuarios();
        integrantes = new ArrayList<Usuario>();
        integrantes.add(cuentaUsuario.getMiUsuario());
        FacesContext.getCurrentInstance().getExternalContext().redirect("nuevoProyecto.xhtml");

    }

    //2. Base de Datos
    //2.1 Consultar
    public List<Usuario> consultarUsuarios() throws Exception {
        DAOUsuario daoUsuario = new DAOUsuario();
        return daoUsuario.consultarUsuarios();
    }

        //2.3 Insertar
        //2.4 Actualizar
        //2.5 Eliminar
    //3. Procedimientos dinámicos
    //3.1 Modales
    //3.2 Listener
    public void listenerFuncion() {
        System.out.println("Listener");
    }

   //3.3 Solicitudes

    public void actualizarIntegrantes(){
        int t = integrantes.size();
        int i;
        System.out.println("LA LISTA DE INTEGRANTES ES: ");
        for(i = 0; i < t; i++)
            System.out.println("Ingrante: " + integrantes.get(i).getNombre());
    }

    //4. Auxiliares
    public void llenarListaUsuarios() throws Exception {
        this.usuarios = new ArrayList<Usuario>();
        List<Usuario> usuarios = consultarUsuarios();
        int idUsuario = cuentaUsuario.getMiUsuario().getIdUsuario();
        Usuario usuario;
        int t = usuarios.size();
        for (int i = 0; i < t; i++) {
            usuario = usuarios.get(i);
            if (usuario.getIdUsuario() != idUsuario) {
                this.usuarios.add(usuario);
            }
        }

    }

    //5. Getters and setters
    public Proyecto getNuevoProyecto() {
        return nuevoProyecto;
    }

    public void setNuevoProyecto(Proyecto nuevoProyecto) {
        this.nuevoProyecto = nuevoProyecto;
    }

    public UIComponent getBtnNuevoProyecto() {
        return btnNuevoProyecto;
    }

    public void setBtnNuevoProyecto(UIComponent btnNuevoProyecto) {
        this.btnNuevoProyecto = btnNuevoProyecto;
    }

    public List<Usuario> getUsuarios() {
        return usuarios;
    }

    public void setUsuarios(List<Usuario> usuarios) {
        this.usuarios = usuarios;
    }

    public List<Usuario> getIntegrantes() {
        return integrantes;
    }

    public void setIntegrantes(List<Usuario> integrantes) {
        this.integrantes = integrantes;
    }

    public CuentaUsuario getCuentaUsuario() {
        return cuentaUsuario;
    }

    public void setCuentaUsuario(CuentaUsuario cuentaUsuario) {
        this.cuentaUsuario = cuentaUsuario;
    }

}

用户可以将第一个列表的<li>移动到第二个列表：