HTML5 перетаскивание setDragImage

Question

Я пытаюсь установить изображение перетаскивания курсора при перетаскивании изображения, однако я не вижу изображение, когда начинаю тащить, я делаю что-то неправильно?

var dragIcon = document.createElement("img"); 
var src = this.$el.find("img").attr("src"); 
dragIcon.src = src.replace("http://domain.dev", ""); 
dragIcon.width = 100; 
console.log(dragIcon); 
e.originalEvent.dataTransfer.setDragImage(dragIcon, -10, -10); 

this.$el выглядит так,

<div class="person-card column" draggable="true" id="95"> 
     <img class="person-card-image" src="/profile_pictures/default.png"> 
     <div class="card-header-title single"> 
      <a href="/people/person/95">John Doe</a> 
     </div> 
     <div class="person-card-subtitle"> 

       Linked 

     </div> 
     <!--<div class="person-card-invite is-sent"> 
      <a href="#">Invite</a> 
     </div>--> 
    </div> 

Я не вижу никаких причин, почему это не будет работать. Однако я замечаю, что я смотрю в dom, я не думаю, что создается новый img.

Answer 1

От того, что я изучал. Вам нужно добавить изображение в свой документ. В Firefox вы можете безопасно установить положение: абсолютное, а затем верхнее: -9999px. Однако в Chrome у вас будет изображение на странице. Трюк заключался бы в том, чтобы спрятать его за чем-то другим абсолютным.

Возможно, для Chrome есть лучший способ, я все еще пытаюсь найти лучшее решение.

Answer 2

Существует способ взломать это. Создать оболочку DIV с

position:absolute, width:0px; Height:0px; top:0px; right:0px 

и создать контроль на dragstart случае с

position:relative 

связывают контроль в обертку и установить контроль на setDragImage.