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>