J'ai un code HTML qui Drag Drop et fonctionne comme prévu - je ne sais pas comment le faire glisser vers sa position d'origine. Voici le code HTML

function allowDrop(ev) {
  ev.preventDefault();
}

function drag(ev) {
  ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
  ev.preventDefault();
  var data = ev.dataTransfer.getData("text");
  ev.target.appendChild(document.getElementById(data));
}
#div1 {
  width: 350px;
  height: 70px;
  padding: 10px;
  border: 1px solid #aaaaaa;
}
<p>Drag the image into the rectangle:</p>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="drag1" src="https://d2elkgkdx2cp5d.cloudfront.net/assets/hubstaff/logos/HS_text_logo_black-18504e00c286dca13b2c503b94d1eabdf6e1c45257ca558b78095c4e184a020c.svg" draggable="true" ondragstart="drag(event)" width="336" height="69">
1
user580950 19 mai 2020 à 16:43

3 réponses

Meilleure réponse

Peut-être, ajoutez juste un bloc de plus?

function allowDrop(ev) {
  ev.preventDefault();
}

function drag(ev) {
  ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
  ev.preventDefault();
  var data = ev.dataTransfer.getData("text");
  ev.target.appendChild(document.getElementById(data));
}
.div-to-drag {
  width: 350px;
  height: 70px;
  margin-top: 15px;
  padding: 10px;
  border: 1px solid #aaaaaa;
}
<p>Drag the image into the rectangle:</p>

<div class="div-to-drag" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

<div class="div-to-drag" ondrop="drop(event)" ondragover="allowDrop(event)">
  <img id="drag1" src="https://d2elkgkdx2cp5d.cloudfront.net/assets/hubstaff/logos/HS_text_logo_black-18504e00c286dca13b2c503b94d1eabdf6e1c45257ca558b78095c4e184a020c.svg" draggable="true" ondragstart="drag(event)" width="336" height="69">
</div>
1
Gleb Kemarsky 19 mai 2020 à 13:57

Ajoutez un autre point de dépôt à son origine et placez-le à l'intérieur.

function allowDrop(ev) {
  ev.preventDefault();
}

function drag(ev) {
  ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
  ev.preventDefault();
  var data = ev.dataTransfer.getData("text");
  ev.target.appendChild(document.getElementById(data));
}
#div1 {
  border: 1px solid #aaaaaa;
}
.drop-spot {
  width: 350px;
  height: 70px;
  padding: 10px;
}
<p>Drag the image into the rectangle:</p>

<div id="div1" class="drop-spot"  ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<div class="drop-spot"  ondrop="drop(event)" ondragover="allowDrop(event)"><img id="drag1" src="https://d2elkgkdx2cp5d.cloudfront.net/assets/hubstaff/logos/HS_text_logo_black-18504e00c286dca13b2c503b94d1eabdf6e1c45257ca558b78095c4e184a020c.svg" draggable="true" ondragstart="drag(event)" width="336" height="69"></div>
1
George 19 mai 2020 à 13:57

Vous pouvez utiliser ce lien comme référence - https://www.w3schools.com/html/html5_draganddrop. asp

         function allowDrop(ev) {
           ev.preventDefault();
         }
         
         function drag(ev) {
           ev.dataTransfer.setData("text", ev.target.id);
         }
         
         function drop(ev) {
           ev.preventDefault();
           var data = ev.dataTransfer.getData("text");
           ev.target.appendChild(document.getElementById(data));
         }
         #div1, #div2  {
         width: 350px;
         height: 70px;
         padding: 10px;
         border: 1px solid #aaaaaa;
         }
      <h2>Drag and Drop</h2>
      <p>Drag the image back and forth between the two div elements.</p>
      <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
         <img id="drag1" src="https://d2elkgkdx2cp5d.cloudfront.net/assets/hubstaff/logos/HS_text_logo_black-18504e00c286dca13b2c503b94d1eabdf6e1c45257ca558b78095c4e184a020c.svg" draggable="true" ondragstart="drag(event)" width="336" height="69">
      </div>
      <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)">
      </div>
1
Wilfred Clement 19 mai 2020 à 14:02