Skip to main content
se añadieron 4 caracteres en el cuerpo
Origen Enlace

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

Puedes una solución comentada a continuación:

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

se eliminaron 105 caracteres en el cuerpo
Origen Enlace
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;
  // Botón de acción del elemento
  var actionb = element.querySelector('.qaction-button');
  // Calculo el objetivo en base al texto del botón de acción
  var targetId = (actionbthis.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>
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;
  // Botón de acción del elemento
  var actionb = element.querySelector('.qaction-button');
  // Calculo el objetivo en base al texto del botón de acción
  var targetId = (actionb.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>
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>
se eliminaron 461 caracteres en el cuerpo
Origen Enlace

Puedes 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('.actionqaction-button').innerText = (target.id == 'div1') ? '+' : '-';
  // Render!
  target.appendChild(element);
}

// Fn Accion Rápida, 
function actionqaction(){
  // this es el boton que dispara el evento
    var element = this.parentElement;
  // Botón de acción del elemento
  var actionb = element.querySelector('.actionqaction-button');
  // Calculo el objetivo en base al texto del botón de acción
  var targetId = (actionb.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('.actionqaction-button')){
  // Buenas practicas
    if (isNaN(i)) continue;
  // AñadoAñadimos ella controlfunción delqaction para el evento addclick
    document.querySelectorAll('.actionqaction-button')[i].addEventListener("click", actionqaction, 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="actionclass="qaction-button">+</button><input type="text" value="soy el primero"></div>
  <div draggable="true" ondragstart="drag(event)"><button class="actionclass="qaction-button">+</button><input type="text" value="soy el segundo"></div>
  <div draggable="true" ondragstart="drag(event)"><button class="actionclass="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>

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

function render(element,target){
  element.querySelector('.action-button').innerText = (target.id == 'div1') ? '+' : '-';
  target.appendChild(element);
}

function action(){
  // this es el boton que dispara el evento
    var element = this.parentElement;
  var actionb = element.querySelector('.action-button');
  var targetId = (actionb.innerText == '+') ? '#div2' : '#div1';
  render(element,document.querySelector(targetId));
}


for (var i in document.querySelectorAll('.action-button')){
    if (isNaN(i)) continue;
  // Añado el control del evento add
    document.querySelectorAll('.action-button')[i].addEventListener("click", action, 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="action-button">+</button><input type="text" value="soy el primero"></div>
  <div draggable="true" ondragstart="drag(event)"><button class="action-button">+</button><input type="text" value="soy el segundo"></div>
  <div draggable="true" ondragstart="drag(event)"><button class="action-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>

Puedes 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;
  // Botón de acción del elemento
  var actionb = element.querySelector('.qaction-button');
  // Calculo el objetivo en base al texto del botón de acción
  var targetId = (actionb.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>
se eliminaron 461 caracteres en el cuerpo
Origen Enlace
Loading
Origen Enlace
Loading