HTML5 끌어서 놓기 setDragImage

이미지를 드래그 할 때 커서의 드래그 이미지를 설정하려고합니다. 그러나 드래그를 시작할 때 이미지가 보이지 않습니다. 잘못된 것입니까?HTML5 끌어서 놓기 setDragImage

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가 만들어지고 있다고 생각하지 않는다.

출처

2013-07-01 Udders

추가 dragIcon.getElement(). setDraggable (Element.DRAGGABLE_TRUE); – Amol

내가 조사한 내용. 문서에 이미지를 추가해야합니다. Firefox에서는 위치를 절대적으로 설정 한 다음 상단 : -9999px까지 안전하게 설정할 수 있습니다. 그러나 Chrome에서는 페이지에도 이미지가 표시됩니다. 그 트릭은 다른 위치 절대 값 뒤에 숨기는 것입니다.

Chrome의 경우 더 좋은 방법이 있을지도 모르지만 더 나은 솔루션을 찾으려고합니다.

출처

2013-12-13 23:40:42 jsgoupil

해킹 방법이 있습니다.

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

와 래퍼 사업부를 만들고

position:relative

바인드와 같은 dragstart 이벤트에 래퍼로 제어를 컨트롤을 생성하고 setDragImage로 제어를 설정합니다.

출처

2014-07-25 15:48:57 user3877646

HTML5 끌어서 놓기 setDragImage

답변

관련 문제