Когда я перетаскиваю одно изображение поверх другого, почему оно исчезает?

Я добавляю событие перетаскивания к нескольким изображениям, что позволяет их перетаскивать из одного блока в другой и обратно. Код работает отлично, кроме одного небольшого сбоя. Всякий раз, когда я перетаскиваю изображение и бросаю его поверх любого другого изображения, он исчезает. Может кто-нибудь объяснить, почему это происходит, и как я могу остановить его? Включаю здесь код. Здесь также jsfiddle для него - https://jsfiddle.net/Ljmqyz1h/1/Когда я перетаскиваю одно изображение поверх другого, почему оно исчезает?

<html> 
<head> 
    <style> 
     div { 
      float: left; 
      width: 500px; 
      height: 500px; 
      padding: 10px; 
      border: 1px solid black; 
     } 
     #div2 { 
      margin-left: 50px; 
     } 
     img { 
      width: 200px; 
      height: 200px; 
     } 
    </style> 
    <script> 
     function allowDrop(event) { 
      event.preventDefault(); 
     } 
     function drag(event, id) { 
      var img1 = document.getElementById(id); 
      event.dataTransfer.setData("osaicon", img1.id); 
      img1.style.opacity = 0; 
     } 
     function drop(event) { 
      var data = event.dataTransfer.getData("osaicon"); 
      event.target.appendChild(document.getElementById(data)); 
     } 
     function show(id) { 
      var img1 = document.getElementById(id); 
      img1.style.opacity = 1; 
     } 
    </script> 
</head> 
<body> 
    <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"> 
     <img id="logo" src="osahub-icon.png" draggable="true" ondragstart="drag(event, this.id)" ondragend="show(this.id)"> 
     <img id="blue" src="Red_ball.png" draggable="true" ondragstart="drag(event, this.id)" ondragend="show(this.id)"> 
     <img id="red" src="Blue_ball.png" draggable="true" ondragstart="drag(event, this.id)" ondragend="show(this.id)"> 
     <img id="button" src="button.gif" draggable="true" ondragstart="drag(event, this.id)" ondragend="show(this.id)"> 
    </div> 
    <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"> 
    </div> 
</body>

источник

2015-04-28 Rachit

Вы добавив его в качестве потомка к целевому элементу. Поэтому, когда вы бросаете его поверх 'img', он входит в тег' img'. и т. д .: '' – Albzi

Так как я могу это разрешить? – Rachit

Измените функцию 'drop', чтобы добавить родительский элемент' img'? – Albzi

В вашем коде, вам просто нужно проверить, если цель, где будет отброшен изображение не является изображением.

if (event.target.nodeName !== "IMG") { 
    event.target.appendChild(document.getElementById(data)); 
}

Демо: https://jsfiddle.net/Ljmqyz1h/3/

источник

2015-04-29 12:43:52

Когда я перетаскиваю одно изображение поверх другого, почему оно исчезает?

ответ

Смежные вопросы