Перетаскивание вопрос светлячок

Question

Когда я нажимаю изображение внутри DIV и попытаться перетащить только изображение перетаскивается не весь div.It создает аут исключения памяти, когда я падаю, что внутри нового DIV

HTML :

<div class="box" draggable="true"> 
    <img src="drag icon.png" width="16" height="16"/> 
     <header>B</header> 
     <p> 
     Put me 
     </p> 
    </div> 
    <div class="box" draggable="true"> 
    <img src="drag icon.png" width="16" height="16"/> 
     <header>C</header> 
     <p> 
     right 
     </p> 
    </div> 
    <div class="box" draggable="true"> 
    <img src="drag icon.png" width="16" height="16"/> 
     <header>D</header> 
     <p> 
     into 
     </p> 
    </div> 
    <div class="box" draggable="true"> 
    <img src="drag icon.png" width="16" height="16"/> 
     <header>E</header> 
     <p> 
     the 
     </p> 
    </div> 

сценарий:

(function() { 
     var id_ = 'boxes-example'; 
     var boxes_ = document.querySelectorAll('#' + id_ + ' .box'); 
     var dragSrcEl_ = null; 

     this.handleDragStart = function (e) { 
      e.dataTransfer.effectAllowed = 'move'; 
      e.dataTransfer.setData('text/html', this.innerHTML); 

      dragSrcEl_ = this; 

      this.style.opacity = '0.5'; 

      // this/e.target is the source node. 
      this.addClassName('moving'); 
     }; 

     this.handleDragOver = function (e) { 
      if (e.preventDefault) { 
       e.preventDefault(); // Allows us to drop. 
      } 

      e.dataTransfer.dropEffect = 'move'; 

      return false; 
     }; 

     this.handleDragEnter = function (e) { 
      this.addClassName('over'); 
     }; 

     this.handleDragLeave = function (e) { 
      // this/e.target is previous target element. 

      this.removeClassName('over'); 
     }; 

     this.handleDrop = function (e) { 
      // this/e.target is current target element. 

      if (e.stopPropagation) { 
       e.stopPropagation(); // stops the browser from redirecting. 
      } 

      // Don't do anything if we're dropping on the same box we're dragging. 
      if (dragSrcEl_ != this) { 
       dragSrcEl_.innerHTML = this.innerHTML; 
       this.innerHTML = e.dataTransfer.getData('text/html'); 
      } 

      return false; 
     }; 

     this.handleDragEnd = function (e) { 
      // this/e.target is the source node. 
      this.style.opacity = '1'; 

      [ ].forEach.call(boxes_, function (box) { 
       box.removeClassName('over'); 
       box.removeClassName('moving'); 
      }); 
     }; 

     [ ].forEach.call(boxes_, function (box) { 
      box.setAttribute('draggable', 'true'); // Enable boxes to be draggable. 
      box.addEventListener('dragstart', this.handleDragStart, false); 
      box.addEventListener('dragenter', this.handleDragEnter, false); 
      box.addEventListener('dragover', this.handleDragOver, false); 
      box.addEventListener('dragleave', this.handleDragLeave, false); 
      box.addEventListener('drop', this.handleDrop, false); 
      box.addEventListener('dragend', this.handleDragEnd, false); 
     }); 
    })(); 

Это я s образец базового html5 кода перетаскивания. Вы можете взять любой код перетаскивания и проверить этот вопрос

Answer 1

Изображение перетаскивается по умолчанию и, кажется, имеет приоритет над его родительским перетаскиванием. Это работает для меня на FireFox, явно установив IMG перетаскиваемый ложные

<img src="drag icon.png" draggable="false" width="16" height="16"/> 

В this fiddle я установил первое изображение Draggable, чтобы показать разницу. Если первый перетаскивается (B), весь div перетаскивается, для остальных - только изображение перетаскивается. (Не смотреть на другое поведение внутри событий перетаскивания, чисто, если весь ДИВ тащится)

---

редактировать: более универсальный метод, чтобы отключить перетаскивание на все изображения:

[].forEach.call(document.querySelectorAll('img') ,function(img){ 
    img.draggable=false; 
}); 

fiddle