获取列表值并输入新列表

Question

我是javascript的新手。我有一个问题，我不知道哪种解决方法最好。

我尝试做一个doble列表，A和B列表，在A列表中我有一个角色列表，我想选择（带复选框）或拖动（带有dragAndDrop）到B列表。

我在选项中的代码＆＃34; dragAndDrop＆＃34;（是网络副本，不是我写的）： JavaScript代码

<script>
    function drag(e) {
        e.dataTransfer.effecAllowed = 'move'; // Define el efecto como mover (Es el por defecto)
        e.dataTransfer.setData("Data", e.target.id); // Coje el elemento que se va a mover
        //e.dataTransfer.setDragImage(e.target, 0, 0); // Define la imagen que se vera al ser arrastrado el elemento y por donde se coje el elemento que se va a mover (el raton aparece en la esquina sup_izq con 0,0)
        e.target.style.opacity = '0.4';
    }
    function end(e){
        e.target.style.opacity = ''; // Pone la opacidad del elemento a 1           
        e.dataTransfer.clearData("Data");
    }
    function enter(e) {
        e.target.style.border = '3px dotted #555'; 
    }
    function leave(e) {
        e.target.style.border = ''; 
    }
    function over(e){
        return false;
    }
    function allowDrop(e){
        e.preventDefault();
    }   
    function drop(e) {
        var elementoArrastrado = e.dataTransfer.getData("Data"); // Elemento arrastrado
        var destino = document.getElementById(asignados)
        e.destino.appendChild(document.getElementById(elementoArrastrado));
        e.target.style.border = '';  // Quita el borde
    }       
</script>

HTML

                <div class="col-lg-3"><!--ELEMENTOS-->
                    <fieldset><legend><h5>Roles</h5></legend>
                        <#list roles as rol>
                            <div id="roles" ondragover="return over(event)" ondragleave="return leave(event)" ondrop="return drop(event)">
                                <div class="row" draggable="true" id="rol" ondragstart="start(event)" ondragend="end(event)">${rol.idRol}-${rol.rol}</div>
                            </div>
                        </#list>
                    </fieldset>
                </div>
                <div class="col-lg-3"><!--CONTENEDOR-->
                    <fieldset><legend><h5>Roles Asignados</h5></legend>
                        <ul>
                            <div class="col-lg-2"id="asignados" ondragenter="return enter(event)" ondragover="return over(event)" ondragleave="return leave(event)" ondrop="return drop(event)">
                                    <li></li>                                   
                            </div>
                        </ul>
                    </fieldset>
                </div>

另一个选项是＆＃34;复选框＆＃34;用一个按钮：

HTML

<!--LISTAS DE ROLES-->

                <div class="col-lg-1"></div>
                <form id="form1" method="post" action="">
                    <div class="col-lg-3">
                        <fieldset><legend><h5>Roles Disponibles</h5></legend>
                            <div class="checkbox">
                                <#list roles as rol>
                                    <div class="row">
                                        <input name="checkbox" type="checkbox" id="${rol.idRol}"><label for="${rol.idRol}">${rol.idRol} - ${rol.rol}</label>
                                    </div>
                                </#list>
                            </div>
                        </fieldset>
                    </div>
                    <div class="col-lg-1">
                        <div class="row"><input type="button" name="Submit" value=" -> " onClick="seleccionados();"></div>
                </form>

                    <div class="row"><input type="button" name="Submit" value=" <- " onClick="seleccionados();"></div>
                </div>
                <div class="col-lg-3"><!--CONTENEDOR-->
                    <fieldset><legend><h5>Roles Asignados</h5></legend>
                        <div class="checkbox">
                            <div class="row" id="asignados">

                            </div>
                        </div>                          
                    </fieldset>
                </div>

没有完成因为我想把另一个表单从B传递给A

的JavaScript

    <script>
    function seleccionados(){
        var checkboxes = document.getElementById("form1").checkbox;
        for (var x=0; x < checkboxes.length; x++) {
            if (checkboxes[x].checked) {
                roles.add(checkboxes[x]);
            }
        }
        asignar(roles);
    }
    function asignar(roles){
        var destino = document.getElementById("asignados");
        for(var i=0 ; i<roles.length ; i++){
            var label = document.createElement("label");
            var input = document.createElement("input");
            input.name="checkbox";
            input.type="checkbox";
            input.id=i;
            label.for=i;

            label.innerHTML=roles[i];
            input.appendChild(label);
            destino.innerHTML=input;
        }
    }

</script>

我尝试了两种方式，但我的知识并不适合这样做。

我正在使用Spark框架和freemarker模板进行webapp。