How can I delete the text inside a div that contains other drag-n-drop divs?

Navigation
1

I have a div which contains a "text" that says "Drag the items here" I would like to delete them when the container has 1 or more than one div internal%. 

function dragstart(caja, event) {
  // el elemento a arrastrar
  //console.log("dragstart");
  event.dataTransfer.setData('Data', caja.id);
}

function drag(target, event) {
  //console.log("drag");
  return false;
}

function dragend(target, event) {
  //console.log("dragend");
  return false;
}

function dragenter(target, event) {
  //console.log("dragenter");
  return false;
}

function dragleave(target, event) {
  //console.log("dragleave");
  return false;
}

function dragover(event) {
  //console.log("dragover");
  event.preventDefault();
  return false;
}

function drop(target, event) {
  // obtenemos los datos
  var caja = event.dataTransfer.getData('Data');
  // agregamos el elemento de arrastre al contenedor
  target.appendChild(document.getElementById(caja));
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />

<div class="box box-solid col-md-12">
  <div class="box-header with-border">
    <h4 class="box-title">Listado de Procesos</h4>
  </div>
  <div class="box-body">
    <div id="contenedor_princ" ondrop="drop(this, event)" ondragenter="dragenter(this, event)" ondragover="dragover(event)" ondragleave="dragleave(this, event)">Arrastre los items aquí
      <div id="caja_1" class="col-md-12" draggable="true" ondragstart="dragstart(this, event)" ondrag="drag(this, event)" ondragend="dragend(this, event)">
        <input name="items[]" class="external-event ui-draggable ui-draggable-handle" style="background-color: rgb(0, 115, 183); border-color: rgb(0, 115, 183); color: rgb(255, 255, 255); position: relative;" value="Mezcla" readonly="true" disable="true">
      </div>
      <div id="caja_6" class="col-md-12" draggable="true" ondragstart="dragstart(this, event)" ondrag="drag(this, event)" ondragend="dragend(this, event)">
        <input name="items[]" class="external-event ui-draggable ui-draggable-handle" style="background-color: rgb(0, 115, 183); border-color: rgb(0, 115, 183); color: rgb(255, 255, 255); position: relative;" value="No Se" readonly="true" disable="true">
      </div>
      <div id="caja_5" class="col-md-12" draggable="true" ondragstart="dragstart(this, event)" ondrag="drag(this, event)" ondragend="dragend(this, event)">
        <input name="items[]" class="external-event ui-draggable ui-draggable-handle" style="background-color: rgb(0, 115, 183); border-color: rgb(0, 115, 183); color: rgb(255, 255, 255); position: relative;" value="Etiquetado" readonly="true" disable="true">
      </div>
      <div id="caja_4" class="col-md-12" draggable="true" ondragstart="dragstart(this, event)" ondrag="drag(this, event)" ondragend="dragend(this, event)">
        <input name="items[]" class="external-event ui-draggable ui-draggable-handle" style="background-color: rgb(0, 115, 183); border-color: rgb(0, 115, 183); color: rgb(255, 255, 255); position: relative;" value="Vaciado" readonly="true" disable="true">
      </div>
      <div id="caja_3" class="col-md-12" draggable="true" ondragstart="dragstart(this, event)" ondrag="drag(this, event)" ondragend="dragend(this, event)">
        <input name="items[]" class="external-event ui-draggable ui-draggable-handle" style="background-color: rgb(0, 115, 183); border-color: rgb(0, 115, 183); color: rgb(255, 255, 255); position: relative;" value="Llenado" readonly="true" disable="true">
      </div>
      <div id="caja_2" class="col-md-12" draggable="true" ondragstart="dragstart(this, event)" ondrag="drag(this, event)" ondragend="dragend(this, event)">
        <input name="items[]" class="external-event ui-draggable ui-draggable-handle" style="background-color: rgb(0, 115, 183); border-color: rgb(0, 115, 183); color: rgb(255, 255, 255); position: relative;" value="Esterilizacion" readonly="true" disable="true">
      </div>
    </div>
  </div>
</div>


<div class="box box-solid col-md-12">
  <div class="box-header with-border">
    <h4 class="box-title">Contenedor 1</h4>
  </div>
  <div class="box-body">
    <div id="contenedor_2" ondrop="drop(this, event)" ondragenter="dragenter(this, event)" ondragover="dragover(event)" ondragleave="dragleave(this, event)">Arrastre los items aquí
    </div>
  </div>
</div>
    
asked by Pablo Contreras 30.03.2017 в 23:09
source

3 answers

3

I leave this code that does what you want and is a little better organized 

window.addEventListener('load',function(){
  function bindEvents(){
    let containers = document.querySelectorAll('.cont');
    for (var i = 0; i < containers.length; i++) {
      containers[i].addEventListener('dragstart',function(event){
        event.dataTransfer.setData('Data', event.target.id);
      })
      containers[i].addEventListener('dragover',function(event){
        event.preventDefault();
      })
      containers[i].addEventListener('drop',function(event){
        let cajaId = event.dataTransfer.getData('Data');
        let caja = document.getElementById(cajaId);
        this.appendChild(caja);
        actualizarTexto();
      })
    }
  }

    document.getElementById('addCont').addEventListener('click',function(){
      let newCont = document.createElement('div');
      let span = document.createElement('span');
      span.innerHTML = 'Arraste los items aqui';
      newCont.classList.add('cont');
      newCont.appendChild(span);
      document.getElementById('box-body').appendChild(newCont);
      bindEvents();
    })

    function actualizarTexto(){
      let containers = document.querySelectorAll('.cont');
      for (var i = 0; i < containers.length; i++) {
        let numCajas = containers[i].querySelectorAll('.caja').length;
        if(numCajas < 1){
          containers[i].getElementsByTagName('span')[0].innerHTML = 'Arrastre los items aqui';
        } else {
          containers[i].getElementsByTagName('span')[0].innerHTML = '';
        }
      }
    }

    bindEvents();
})
.caja {
   background-color: rgb(0, 115, 183);
   border-color: rgb(0, 115, 183);
   color: rgb(255, 255, 255);
   position: relative;
}

.cont {
  height: 200px;
  width: 200px;
  border: dotted 1px #000;
}

#addCont{
  margin: 5px 15px;
}
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <link href="index.css" rel="stylesheet"/>
    <script src="index.js" charset="utf-8"></script>
    <title></title>
  </head>
  <body>
    <div class="box box-solid col-md-12">
      <div class="box-header with-border">
        <h4 class="box-title">Listado de Procesos</h4>
      </div>
      <div class="box-body">
        <div id="contenedor_princ" class="cont"><span></span>
          <div id="caja_1" class="col-md-12" draggable="true">
            <input name="items[]" class="external-event ui-draggable ui-draggable-handle caja" value="Mezcla" readonly="true" disable="true">
          </div>
          <div id="caja_6" class="col-md-12" draggable="true">
            <input name="items[]" class="external-event ui-draggable ui-draggable-handle caja" value="No Se" readonly="true" disable="true">
          </div>
          <div id="caja_5" class="col-md-12" draggable="true">
            <input name="items[]" class="external-event ui-draggable ui-draggable-handle caja" value="Etiquetado" readonly="true" disable="true">
          </div>
          <div id="caja_4" class="col-md-12" draggable="true">
            <input name="items[]" class="external-event ui-draggable ui-draggable-handle caja" value="Vaciado" readonly="true" disable="true">
          </div>
          <div id="caja_3" class="col-md-12" draggable="true">
            <input name="items[]" class="external-event ui-draggable ui-draggable-handle caja" value="Llenado" readonly="true" disable="true">
          </div>
          <div id="caja_2" class="col-md-12" draggable="true">
            <input name="items[]" class="external-event ui-draggable ui-draggable-handle caja" value="Esterilizacion" readonly="true" disable="true">
          </div>
        </div>
      </div>
    </div>


    <div class="box box-solid col-md-12">
      <div class="box-header with-border">
        <h4 class="box-title">Contenedor 1</h4>
      </div>
      <div class="box-body" id="box-body">
        <div id="contenedor_2" class="cont"><span>Arrastre los items aquí</span>
        </div>
      </div>
    </div>
    <input type="button" class="btn btn-primary" value="Agregar Contenedor" id="addCont">
  </body>
</html>
 

You can generate containers dynamically and if they are empty the text "Drag the items here" appears

    
answered by 31.03.2017 / 02:56
source
2

You can make a modification to the drop function to validate the number of divs that have already been added, and change the text to a span tag so that it is easier to modify it, besides making that when the number of items is 0 return to add text 

function dragstart(caja, event) {
  // el elemento a arrastrar
  //console.log("dragstart");
  event.dataTransfer.setData('Data', caja.id);
}

function drag(target, event) {
  //console.log("drag");
  return false;
}

function dragend(target, event) {
  //console.log("dragend");
  return false;
}

function dragenter(target, event) {
  //console.log("dragenter");
  return false;
}

function dragleave(target, event) {
  //console.log("dragleave");
  return false;
}

function dragover(event) {
  //console.log("dragover");
  event.preventDefault();
  return false;
}

function drop(target, event) {
  // obtenemos los datos
  var caja = event.dataTransfer.getData('Data');
  // agregamos el elemento de arrastre al contenedor
  target.appendChild(document.getElementById(caja));
  var numeroCajas = $('#contenedor_2 div').length;
  if (numeroCajas > 0) {
    $('.texto').text('');
  } else {
    $('.texto').text('Arrastre los items aqui');
  };
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />

<div class="box box-solid col-md-12">
  <div class="box-header with-border">
    <h4 class="box-title">Listado de Procesos</h4>
  </div>
  <div class="box-body">
    <div id="contenedor_princ" ondrop="drop(this, event)" ondragenter="dragenter(this, event)" ondragover="dragover(event)" ondragleave="dragleave(this, event)">Arrastre los items aquí
      <div id="caja_1" class="col-md-12" draggable="true" ondragstart="dragstart(this, event)" ondrag="drag(this, event)" ondragend="dragend(this, event)">
        <input name="items[]" class="external-event ui-draggable ui-draggable-handle" style="background-color: rgb(0, 115, 183); border-color: rgb(0, 115, 183); color: rgb(255, 255, 255); position: relative;" value="Mezcla" readonly="true" disable="true">
      </div>
      <div id="caja_6" class="col-md-12" draggable="true" ondragstart="dragstart(this, event)" ondrag="drag(this, event)" ondragend="dragend(this, event)">
        <input name="items[]" class="external-event ui-draggable ui-draggable-handle" style="background-color: rgb(0, 115, 183); border-color: rgb(0, 115, 183); color: rgb(255, 255, 255); position: relative;" value="No Se" readonly="true" disable="true">
      </div>
      <div id="caja_5" class="col-md-12" draggable="true" ondragstart="dragstart(this, event)" ondrag="drag(this, event)" ondragend="dragend(this, event)">
        <input name="items[]" class="external-event ui-draggable ui-draggable-handle" style="background-color: rgb(0, 115, 183); border-color: rgb(0, 115, 183); color: rgb(255, 255, 255); position: relative;" value="Etiquetado" readonly="true" disable="true">
      </div>
      <div id="caja_4" class="col-md-12" draggable="true" ondragstart="dragstart(this, event)" ondrag="drag(this, event)" ondragend="dragend(this, event)">
        <input name="items[]" class="external-event ui-draggable ui-draggable-handle" style="background-color: rgb(0, 115, 183); border-color: rgb(0, 115, 183); color: rgb(255, 255, 255); position: relative;" value="Vaciado" readonly="true" disable="true">
      </div>
      <div id="caja_3" class="col-md-12" draggable="true" ondragstart="dragstart(this, event)" ondrag="drag(this, event)" ondragend="dragend(this, event)">
        <input name="items[]" class="external-event ui-draggable ui-draggable-handle" style="background-color: rgb(0, 115, 183); border-color: rgb(0, 115, 183); color: rgb(255, 255, 255); position: relative;" value="Llenado" readonly="true" disable="true">
      </div>
      <div id="caja_2" class="col-md-12" draggable="true" ondragstart="dragstart(this, event)" ondrag="drag(this, event)" ondragend="dragend(this, event)">
        <input name="items[]" class="external-event ui-draggable ui-draggable-handle" style="background-color: rgb(0, 115, 183); border-color: rgb(0, 115, 183); color: rgb(255, 255, 255); position: relative;" value="Esterilizacion" readonly="true" disable="true">
      </div>
    </div>
  </div>
</div>


<div class="box box-solid col-md-12">
  <div class="box-header with-border">
    <h4 class="box-title">Contenedor 1</h4>
  </div>
  <div class="box-body">
    <div id="contenedor_2" ondrop="drop(this, event)" ondragenter="dragenter(this, event)" ondragover="dragover(event)" ondragleave="dragleave(this, event)"><span class="texto">Arrastre los items aquí</span>
    </div>
  </div>
</div>
    
answered by 31.03.2017 в 00:30
1

You have almost done it. The only thing you would be missing would be to add to the drop method a check to see if the number of div internal% s is zero, and if it is, delete the text. Something like this: 

// si no hay ningún div en el objetivo, se elimina el texto
if (target.querySelectorAll("div").length == 0) {
    target.innerHTML = "";
}

That in your code would look like this: 

function dragstart(caja, event) {
  // el elemento a arrastrar
  //console.log("dragstart");
  event.dataTransfer.setData('Data', caja.id);
}

function drag(target, event) {
  //console.log("drag");
  return false;
}

function dragend(target, event) {
  //console.log("dragend");
  return false;
}

function dragenter(target, event) {
  //console.log("dragenter");
  return false;
}

function dragleave(target, event) {
  //console.log("dragleave");
  return false;
}

function dragover(event) {
  //console.log("dragover");
  event.preventDefault();
  return false;
}

function drop(target, event) {
  // si no hay ningún div en el objetivo, se elimina el texto
  if (target.querySelectorAll("div").length == 0) {
    target.innerHTML = "";
  }
  // obtenemos los datos
  var caja = event.dataTransfer.getData('Data');
  // agregamos el elemento de arrastre al contenedor
  target.appendChild(document.getElementById(caja));
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />

<div class="box box-solid col-md-12">
  <div class="box-header with-border">
    <h4 class="box-title">Listado de Procesos</h4>
  </div>
  <div class="box-body">
    <div id="contenedor_princ" ondrop="drop(this, event)" ondragenter="dragenter(this, event)" ondragover="dragover(event)" ondragleave="dragleave(this, event)">Arrastre los items aquí
      <div id="caja_1" class="col-md-12" draggable="true" ondragstart="dragstart(this, event)" ondrag="drag(this, event)" ondragend="dragend(this, event)">
        <input name="items[]" class="external-event ui-draggable ui-draggable-handle" style="background-color: rgb(0, 115, 183); border-color: rgb(0, 115, 183); color: rgb(255, 255, 255); position: relative;" value="Mezcla" readonly="true" disable="true">
      </div>
      <div id="caja_6" class="col-md-12" draggable="true" ondragstart="dragstart(this, event)" ondrag="drag(this, event)" ondragend="dragend(this, event)">
        <input name="items[]" class="external-event ui-draggable ui-draggable-handle" style="background-color: rgb(0, 115, 183); border-color: rgb(0, 115, 183); color: rgb(255, 255, 255); position: relative;" value="No Se" readonly="true" disable="true">
      </div>
      <div id="caja_5" class="col-md-12" draggable="true" ondragstart="dragstart(this, event)" ondrag="drag(this, event)" ondragend="dragend(this, event)">
        <input name="items[]" class="external-event ui-draggable ui-draggable-handle" style="background-color: rgb(0, 115, 183); border-color: rgb(0, 115, 183); color: rgb(255, 255, 255); position: relative;" value="Etiquetado" readonly="true" disable="true">
      </div>
      <div id="caja_4" class="col-md-12" draggable="true" ondragstart="dragstart(this, event)" ondrag="drag(this, event)" ondragend="dragend(this, event)">
        <input name="items[]" class="external-event ui-draggable ui-draggable-handle" style="background-color: rgb(0, 115, 183); border-color: rgb(0, 115, 183); color: rgb(255, 255, 255); position: relative;" value="Vaciado" readonly="true" disable="true">
      </div>
      <div id="caja_3" class="col-md-12" draggable="true" ondragstart="dragstart(this, event)" ondrag="drag(this, event)" ondragend="dragend(this, event)">
        <input name="items[]" class="external-event ui-draggable ui-draggable-handle" style="background-color: rgb(0, 115, 183); border-color: rgb(0, 115, 183); color: rgb(255, 255, 255); position: relative;" value="Llenado" readonly="true" disable="true">
      </div>
      <div id="caja_2" class="col-md-12" draggable="true" ondragstart="dragstart(this, event)" ondrag="drag(this, event)" ondragend="dragend(this, event)">
        <input name="items[]" class="external-event ui-draggable ui-draggable-handle" style="background-color: rgb(0, 115, 183); border-color: rgb(0, 115, 183); color: rgb(255, 255, 255); position: relative;" value="Esterilizacion" readonly="true" disable="true">
      </div>
    </div>
  </div>
</div>


<div class="box box-solid col-md-12">
  <div class="box-header with-border">
    <h4 class="box-title">Contenedor 1</h4>
  </div>
  <div class="box-body">
    <div id="contenedor_2" ondrop="drop(this, event)" ondragenter="dragenter(this, event)" ondragover="dragover(event)" ondragleave="dragleave(this, event)">Arrastre los items aquí
    </div>
  </div>
</div>

Now you would have another problem which is that if the text disappears and you remove all the elements the div remains empty and it is difficult to put elements back in (apart from the fact that you are still interested in putting the text back).

For this, knowing the id s of the containers you could do this: 

function dragstart(caja, event) {
  // el elemento a arrastrar
  //console.log("dragstart");
  event.dataTransfer.setData('Data', caja.id);
}

function drag(target, event) {
  //console.log("drag");
  return false;
}

function dragend(target, event) {
  //console.log("dragend");
  return false;
}

function dragenter(target, event) {
  //console.log("dragenter");
  return false;
}

function dragleave(target, event) {
  //console.log("dragleave");
  return false;
}

function dragover(event) {
  //console.log("dragover");
  event.preventDefault();
  return false;
}

function drop(target, event) {
  // si no hay ningún div en el objetivo, se elimina el texto
  if (target.querySelectorAll("div").length == 0) {
    target.innerHTML = "";
  }
  // obtenemos los datos
  var caja = event.dataTransfer.getData('Data');
  // agregamos el elemento de arrastre al contenedor
  target.appendChild(document.getElementById(caja));

  // mostramos el mensaje (seguramente se puede simplificar)
  var contenedor = document.getElementById("contenedor_princ");
  if (contenedor.querySelectorAll("div").length == 0) {
    contenedor.innerHTML = "Arrastre los items aquí";
  }
  contenedor = document.getElementById("contenedor_2");
  if (contenedor.querySelectorAll("div").length == 0) {
    contenedor.innerHTML = "Arrastre los items aquí";
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />

<div class="box box-solid col-md-12">
  <div class="box-header with-border">
    <h4 class="box-title">Listado de Procesos</h4>
  </div>
  <div class="box-body">
    <div id="contenedor_princ" ondrop="drop(this, event)" ondragenter="dragenter(this, event)" ondragover="dragover(event)" ondragleave="dragleave(this, event)">Arrastre los items aquí
      <div id="caja_1" class="col-md-12" draggable="true" ondragstart="dragstart(this, event)" ondrag="drag(this, event)" ondragend="dragend(this, event)">
        <input name="items[]" class="external-event ui-draggable ui-draggable-handle" style="background-color: rgb(0, 115, 183); border-color: rgb(0, 115, 183); color: rgb(255, 255, 255); position: relative;" value="Mezcla" readonly="true" disable="true">
      </div>
      <div id="caja_6" class="col-md-12" draggable="true" ondragstart="dragstart(this, event)" ondrag="drag(this, event)" ondragend="dragend(this, event)">
        <input name="items[]" class="external-event ui-draggable ui-draggable-handle" style="background-color: rgb(0, 115, 183); border-color: rgb(0, 115, 183); color: rgb(255, 255, 255); position: relative;" value="No Se" readonly="true" disable="true">
      </div>
      <div id="caja_5" class="col-md-12" draggable="true" ondragstart="dragstart(this, event)" ondrag="drag(this, event)" ondragend="dragend(this, event)">
        <input name="items[]" class="external-event ui-draggable ui-draggable-handle" style="background-color: rgb(0, 115, 183); border-color: rgb(0, 115, 183); color: rgb(255, 255, 255); position: relative;" value="Etiquetado" readonly="true" disable="true">
      </div>
      <div id="caja_4" class="col-md-12" draggable="true" ondragstart="dragstart(this, event)" ondrag="drag(this, event)" ondragend="dragend(this, event)">
        <input name="items[]" class="external-event ui-draggable ui-draggable-handle" style="background-color: rgb(0, 115, 183); border-color: rgb(0, 115, 183); color: rgb(255, 255, 255); position: relative;" value="Vaciado" readonly="true" disable="true">
      </div>
      <div id="caja_3" class="col-md-12" draggable="true" ondragstart="dragstart(this, event)" ondrag="drag(this, event)" ondragend="dragend(this, event)">
        <input name="items[]" class="external-event ui-draggable ui-draggable-handle" style="background-color: rgb(0, 115, 183); border-color: rgb(0, 115, 183); color: rgb(255, 255, 255); position: relative;" value="Llenado" readonly="true" disable="true">
      </div>
      <div id="caja_2" class="col-md-12" draggable="true" ondragstart="dragstart(this, event)" ondrag="drag(this, event)" ondragend="dragend(this, event)">
        <input name="items[]" class="external-event ui-draggable ui-draggable-handle" style="background-color: rgb(0, 115, 183); border-color: rgb(0, 115, 183); color: rgb(255, 255, 255); position: relative;" value="Esterilizacion" readonly="true" disable="true">
      </div>
    </div>
  </div>
</div>


<div class="box box-solid col-md-12">
  <div class="box-header with-border">
    <h4 class="box-title">Contenedor 1</h4>
  </div>
  <div class="box-body">
    <div id="contenedor_2" ondrop="drop(this, event)" ondragenter="dragenter(this, event)" ondragover="dragover(event)" ondragleave="dragleave(this, event)">Arrastre los items aquí
    </div>
  </div>
</div>
    
answered by 31.03.2017 в 00:13
Validate that a chain is not repeated assert vs. null in Java