0

Estou trabalhando com drag e drop, e preciso detectar com JS quando o elemento não é solto na zona marcada, ou seja, quando eu arrasto o elemento mas o solto e ele volta para o seu lugar.

É possível fazer isso?

HTML + Javascript

    function allowDrop(ev){
       ev.preventDefault();
    }
    
    function drag(ev){
       ev.dataTransfer.setData("text", ev.target.id);
    }
    
    function drop(ev){
       ev.preventDefault();
    
       var element = ev.dataTransfer.getData("text");
       ev.target.appendChild(document.getElementById(element));
    }
<div id="drag1" draggable="true" ondragstart="drag(event)"></div>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
        

2
  • Sim, inclua o seu código na pergunta 11/01/2018 às 0:00
  • @LeandroAngelo Coloquei o código simplificado para ficar fácil de entender. 11/01/2018 às 0:07

1 Resposta 1

1

Mais ou menos isso que você procura?

var noAlvo = false;
function allowDrop(ev){
       ev.preventDefault();
       noAlvo = true;
    }
    
function drag(ev){
   ev.dataTransfer.setData("text", ev.target.id);
}
    
function drop(ev){
   ev.preventDefault();   
   var element = ev.dataTransfer.getData("text");
   ev.target.appendChild(document.getElementById(element));
}

function testTarget(ev){
  ev.preventDefault();
  console.log(noAlvo);
}
#drag1
{
  width: 20px;
  height: 20px;
  display: block;
  background-color: #ccc;
  
}

#div1
{
  width:50%;
  height: 100px;
  display: block;
  background-color: green;
  position: absolute;
  left: 25%;
  top: 25%;
}
<div id="drag1" draggable="true" ondragstart="drag(event)" ondragend="testTarget(event)"></div>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

1

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .