Add items in two lists at the same time

2

I have the following code that allows you to pass an element, in this case inputs, from one div to another by a button or drag and drop. The idea is that when an element of div1 is passed to div2, it remains in div1 but also passes to div2

// PARA EL AGREGADO POR DRAG
        var element = null;
        
        function allowDrop(ev) {
          ev.target.classList.add('feedme');
          ev.preventDefault();
        }
        
        function removeDrop(ev) {
          ev.target.classList.remove('feedme');
          ev.preventDefault();
        }
        
        function drag(ev) {
          element = ev.target;
          element.parentNode.classList.add('feedme');
          element.classList.add('dragging');
        }
        
        function drop(ev) {
          var actionb = element.querySelector('.action-button');
          ev.preventDefault();
          ev.target.classList.remove('feedme');
          element.classList.remove('dragging');
          if (ev.target.classList.contains('droppable')) {
            render(element,ev.target);
          }
          element = null;
        }
// PARA EL AGREGADO POR DRAG
        
// PARA EL AGREGADO POR BOTON        
        // En que renderiza un elemento en un objetivo
        function render(element,target){
          // Calcula el texto que debe mostrar el btn de acción rápida
          element.querySelector('.qaction-button').innerText = (target.id == 'div1') ? '+' : '-';
          // Render!
          target.appendChild(element);
        }
        
        // Fn Accion Rápida, 
        function qaction(){
          // this es el boton que dispara el evento
            var element = this.parentElement;
          // Calculo el objetivo en base al texto del botón de acción
          var targetId = (this.innerText == '+') ? '#div2' : '#div1';
          // Ordeno renderizar el elemento
          render(element,document.querySelector(targetId));
        }
        
        // Ejecutar función acción rápida al realizar click en el boton
        // Buscamos todos los elementos de la clase "acción rápida"
        for (var i in document.querySelectorAll('.qaction-button')){
          // Buenas practicas
            if (isNaN(i)) continue;
          // Añadimos la función qaction para el evento click
            document.querySelectorAll('.qaction-button')[i].addEventListener("click", qaction, false);
        }
// PARA EL AGREGADO POR BOTON  
#div1,
#div2 {
  float: left;
  width: 200px;
  height: 200px;
  margin: 10px;
  padding: 10px;
  border: 1px solid black;
}

#div1 input,
#div2 input {
  cursor: ew-resize;
}

#div1.feedme,
#div2.feedme {
  background: #FFFFEE;
}

.dragging {
  border: 1px dashed #00F;
  cursor: move;
}
<div id="div1" class="droppable" ondrop="drop(event)" ondragover="allowDrop(event)" ondragleave="removeDrop(event)">
                  <div draggable="true" ondragstart="drag(event)"><button class="qaction-button">+</button><input type="text" value="Debito"></div>
                  <div draggable="true" ondragstart="drag(event)"><button class="qaction-button">+</button><input type="text" value="Credito"></div>
                  <div draggable="true" ondragstart="drag(event)"><button class="qaction-button">+</button><input type="text" value="Efectivo"></div>
          </div>
                
                
                
                <div id="div2" class="droppable" ondrop="drop(event)" ondragover="allowDrop(event)" ondragleave="removeDrop(event)"></div>

Precisely I was looking for how to use the cloneNode. Is there a way to have n debits, n credits, etc. on div2?

Edit1: @ dperezv.com I think I saw how to have n elements in the div2 with the code you gave me. Removing this conditional: if (target.querySelector ('input [value="' + element.querySelector ('input'). value + '"]')) return true;

The problem is that as the element is copied by dragging or pressing the button, they accumulate. I do not see how to modify it so that only if I add to the div2 the elements accumulate and in the div1 they remain the same.

    
asked by Kinafune 10.08.2018 в 16:37
source

1 answer

1

Here is a possible solution to your question!

// PARA EL AGREGADO POR DRAG
        var element = null;
        
        function allowDrop(ev) {
          ev.target.classList.add('feedme');
          ev.preventDefault();
        }
        
        function removeDrop(ev) {
          ev.target.classList.remove('feedme');
          ev.preventDefault();
        }
        
        function drag(ev) {
          element = ev.target;
          element.parentNode.classList.add('feedme');
          element.classList.add('dragging');
        }
        
        function drop(ev) {
          var actionb = element.querySelector('.action-button');
          ev.preventDefault();
          ev.target.classList.remove('feedme');
          element.classList.remove('dragging');
          if (ev.target.classList.contains('droppable')) {
            render(element,ev.target);
          }
          element = null;
        }
// PARA EL AGREGADO POR DRAG
        
// PARA EL AGREGADO POR BOTON        
        // En que renderiza un elemento en un objetivo
        function render(element,target){
        
          // element.parentNode === target ?
          if(element.parentNode.id == target.id) return true;
        
          // Si el objetivo es #div1 :
          // - Eliminamos el elemento
          // - Detenemos la ejecución de la función
          if (target.id == 'div1') { 
            element.parentNode.removeChild(element);
            return true;
          }
          
          // NO Permitir más de un elemento en el contenedor receptor
          //if(target.querySelector('input[value="'+element.querySelector('input').value+'"]')) return true;
          
          // Clonamos el elemento
          var elm = element.cloneNode(true);
          // Acción rápida para el nuevo elemento
          elm.querySelector('.qaction-button').addEventListener("click", qaction, false);
          // Calcula el texto que debe mostrar el btn de acción rápida
          elm.querySelector('.qaction-button').innerText = (target.id == 'div1') ? '+' : '-';
          // Render!
          target.appendChild(elm);
        }
        
        // Fn Accion Rápida, 
        function qaction(){
          // this es el boton que dispara el evento
            var element = this.parentElement;
          // Calculo el objetivo en base al texto del botón de acción
          var targetId = (this.innerText == '+') ? '#div2' : '#div1';
          // Ordeno renderizar el elemento
          render(element,document.querySelector(targetId));
        }
        
        // Ejecutar función acción rápida al realizar click en el boton
        // Buscamos todos los elementos de la clase "acción rápida"
        for (var i in document.querySelectorAll('.qaction-button')){
          // Buenas practicas
            if (isNaN(i)) continue;
          // Añadimos la función qaction para el evento click
            document.querySelectorAll('.qaction-button')[i].addEventListener("click", qaction, false);
        }
// PARA EL AGREGADO POR BOTON
#div1,
#div2 {
  float: left;
  width: 200px;
  height: 200px;
  margin: 10px;
  padding: 10px;
  border: 1px solid black;
}

#div1 input,
#div2 input {
  cursor: ew-resize;
}

#div1.feedme,
#div2.feedme {
  background: #FFFFEE;
}

.dragging {
  border: 1px dashed #00F;
  cursor: move;
}
<div id="div1" class="droppable" ondrop="drop(event)" ondragover="allowDrop(event)" ondragleave="removeDrop(event)">
                  <div draggable="true" ondragstart="drag(event)"><button class="qaction-button">+</button><input type="text" value="Debito"></div>
                  <div draggable="true" ondragstart="drag(event)"><button class="qaction-button">+</button><input type="text" value="Credito"></div>
                  <div draggable="true" ondragstart="drag(event)"><button class="qaction-button">+</button><input type="text" value="Efectivo"></div>
          </div>
                
                
                
                <div id="div2" class="droppable" ondrop="drop(event)" ondragover="allowDrop(event)" ondragleave="removeDrop(event)"></div>
    
answered by 12.08.2018 / 21:50
source