끌기 (Ghost) 이미지를 제거하는 방법?

Question

이미지를 드래그 할 때 유령 이미지를 제거하는 방법. Firefox 및 Chrome에서 작동하지만 Safari에서 작동하지 않는 코드를 시도했습니다. 어느 누구라도 내 코드의 실수를 도와주십시오. https://jsfiddle.net/rajamsr/Lfuq5qb6/

document.addEventListener("dragstart", function(event) { 
     dragged = event.target; 
     event.dataTransfer.setDragImage(dragged, 11111110, 10); 
}, false); 

Answer 1

코드는 메모리 문제를 일으키는.

대신 사용자가 드래그/중지를 선택 CSS를 사용, 이것은 대부분의 브라우저에서 작동하지만 그렇게 일을 해결하기 위해 ondragstart="return false;"img에 태그를 추가이 https://jsfiddle.net/Lfuq5qb6/1/

<img class="normal-logo hidden-xs" src="..." alt="logo" ondragstart="return false;"/> 

img{ 
    user-drag: none; 
    user-select: none; 
    -moz-user-select: none; 
    -webkit-user-drag: none; 
    -webkit-user-select: none; 
    -ms-user-select: none; 
} 

참조하지 않는 파이어 폭스에서 보이는 버그가 있습니다

Answer 2

setDragImage의 인수로 event.target을 사용하지 마십시오. 여기에서 메모리 문제가 발생할 가능성이 높습니다.

언제나 사용자 지정 이미지를 추가 할 수 있으며 이미지는 투명한 PNG 일 수도 있습니다.

다음은 어떻게 진행되는지 보여줍니다.

var dragMe = document.getElementById("drag-me"), 
 
    img = new Image(); 
 

 
img.onload = function() { 
 

 
    dragMe.addEventListener("dragstart", function(e) { 
 

 
    e.dataTransfer.setDragImage(img, 0, 0); 
 

 
    }, false); 
 

 
} 
 

 
img.src = "http://placehold.it/150/000000/ffffff?text=GHOST";

#drag-me { 
 
    width: 100px; 
 
    height: 100px; 
 
    background-color: black; 
 
    line-height: 100px; 
 
    text-align: center; 
 
} 
 

 
#drag-me > img { 
 
    vertical-align: middle; 
 
}

<div id="drag-me"> 
 
    <img src="https://jsfiddle.net/img/logo.png" draggable="true" /> 
 
</div>

또 다른 옵션은 단지 노드 요소를 복제하고 visibilityhidden에 설정하는 것입니다

. 그러나이 옵션을 사용하려면 복제 된 요소를 DOM에 추가해야합니다.

복제 된 노드의 예는 다음과 같습니다. 노드를 완전히 숨기고 있지 않아 어떤 일이 일어나고 있는지 확인할 수 있습니다.

var dragMe = document.getElementById("drag-me"); 
 

 
dragMe.addEventListener("dragstart", function(e) { 
 

 
    var clone = this.cloneNode(true); 
 
    clone.style.opacity = 0.1;    // use opacity or 
 
    //clone.style.visibility = "hidden";  // visibility or 
 
    //clone.style.display = "none";   // display rule 
 
    document.body.appendChild(clone); 
 
    e.dataTransfer.setDragImage(clone, 0, 0); 
 
    
 
}, false);

#drag-me { 
 
    width: 100px; 
 
    height: 100px; 
 
    background-color: black; 
 
    line-height: 100px; 
 
    text-align: center; 
 
} 
 

 
#drag-me > img { 
 
    vertical-align: middle; 
 
}

<div id="drag-me"> 
 
    <img src="https://jsfiddle.net/img/logo.png" draggable="true" /> 
 
</div>