Add items with a button that are already added by drag and drop

Question

Add items with a button that are already added by drag and drop

Navigation

#1 by (1 votes)

0

I have the following drag and drop code, for now elements are added from div1 to div2 by dragging or draganddrop, I want to add that in addition to being added by this form they are also added by a button that is located to the left of the elements , in this case the elements are the inputs. When you click on the button to add that element, you must move it to div2 and remove the + button, since the element has already been added.

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>

javascript html css

asked by Kinafune 04.08.2018 в 23:33

source

1 answer

Problem installing angular-cesium in Angular 6 Javascript does not read functions, or does not work if it does not return false

score 1 · Accepted Answer

You can see a solution discussed below:

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>