0

Tengo el siguiente codigo drag and drop, por ahora los elementos se agregan del div1 al div2 mediante arrastre o draganddrop, quiero agregarle que ademas de agregarse por esta forma tambien se agreguen por un boton que este ubicado a la izquierda de los elementos, en este caso los elementos son los inputs. Al darle al boton para agregar ese elemento se debe mover al div2 y eliminando el boton de + dado que el elemento ya se agrego

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) {
  ev.preventDefault();
  ev.target.classList.remove('feedme');
  element.classList.remove('dragging');
  if (ev.target.classList.contains('droppable')) {
    ev.target.appendChild(element);
  }
  element = null;
}
#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)">
  <button>+</button><input type="text" draggable="true" ondragstart="drag(event)" value="soy el primero">
  <button>+</button><input type="text" draggable="true" ondragstart="drag(event)" value="soy el segundo">
  <button>+</button><input type="text" draggable="true" ondragstart="drag(event)" value="soy el tercero">
</div>



<div id="div2" class="droppable" ondrop="drop(event)" ondragover="allowDrop(event)" ondragleave="removeDrop(event)"></div>

1 respuesta 1

1

Puedes ver una solución comentada a continuación:

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;
}

// Fn 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);
}
#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="soy el primero"></div>
  <div draggable="true" ondragstart="drag(event)"><button class="qaction-button">+</button><input type="text" value="soy el segundo"></div>
  <div draggable="true" ondragstart="drag(event)"><button class="qaction-button">+</button><input type="text" value="soy el tercero"></div>
</div>



<div id="div2" class="droppable" ondrop="drop(event)" ondragover="allowDrop(event)" ondragleave="removeDrop(event)"></div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.