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.