Firefox에서 이미지를 드래그 할 때 "Ghost"가 나타나지 않도록하려면 어떻게해야합니까?

Question

이미지를 드래그하면 반투명 한 유령 이미지가 마우스를 길게 누르면 마우스를 따라갈 수 있습니다.

CSS/JS를 적용하여 특정 부분에이 효과를 적용 할 수 있습니까?

Answer 1

img 태그가있는 실제 이미지 대신 CSS 배경 이미지를 사용해 볼 수 있습니다.

Answer 2

브라우저 동작/기능입니다. 나는 그것을 처리 할 수있는 특정 FF CSS 스타일을 잘 모르겠습니다.

파이어 폭스 코드를 수정하여 자신 만의 파이어 폭스를 만들 수 있습니다. 프로그래밍 방식으로 프로그래밍하지 않는 방법을 찾고 있다면 superuser.com에 게시해야한다고 생각합니다. P

Answer 3

브라우저에서 해당 기능을 사용 중지하는 유일한 방법은 Safari에서 수행하는 것입니다. img 요소 (또는 event.preventDefault())의 onmousedown 이벤트에서 false을 반환하고 나머지는 JavaScript로 드래그 작업을 처리합니다.

거의 모든 주요 JavaScript 라이브러리는 '드래그'및 '삭제'를 지원합니다. 시작 위치로 코드를 사용하거나 이미 페이지에서 라이브러리를 사용하고 있다면 코드를 사용할 수 있습니다.

Answer 4

nglayout.enable_drag_images -이 기능을 끄려면 Firefox 옵션이 about:config에 있지만 분명히 작동합니다. 모든 방문객을 위해 그것을 제거하고 싶습니까?

& 드래그를하고 싶다면 jQuery UI 또는 다른 JS 라이브러리를 사용해 보시겠습니까? 당신은 다른 요소들을 아주 쉽게 움직일 수 있어야하고, Tim이 그 중 하나에 대해 말한 것과 같은 배경 이미지를 사용할 수 있습니다.

또 다른 이점은 CSS 스프라이트 효과를 사용하여 HTTP 요청을 줄일 수 있다는 것입니다. 실제로는 하나의 이미지 인 jQuery UI를 사용하여 jigsaw puzzle을 만들었지 만 여러 가지처럼 보입니다.

Answer 5

ondragstart 이벤트에서 false를 반환해야합니다. 나는이 문제를 나 자신에게 가지고 있었다. 그리고 그것이 내가 그것을 어떻게 풀 었는지이다. IE7에서도 마찬가지입니다. 문제는 IE의 드래그 앤 드롭 API, html5 로의 표준화 및 파이어 폭스의 후속 구현이다.

드래그 앤 드롭에 자바 스크립트 라이브러리를 사용하는 다른 방법은 사용할 수 없습니다. (나는 이미 jquery UI를 사용하고 있었다.) 이것은 파이어 폭스에서 최근의 일이며, jQuery UI는 그것을 고려하지 않았다.

Answer 6

이미지에 draggable="false" 속성을 추가하기 만하면됩니다. 또한 컨테이너 div을 추가하십시오.

예. 또한

<div draggable="true"> 
<img draggable="false" src="your/path/to/image.png"/> 
Optional Text 
<div> 

, 가장 쉬운 방법은 매우 큰 x 및 y 화면으로부터의 거리에 setDragImage 좌표를 설정하는

function handleDragStart(e) { 
    // other code 
    var dragIcon = document.createElement('img'); 
    dragIcon.src = 'another/image/path.png'; 
    e.dataTransfer.setDragImage(dragIcon, -10, -10); 
    // other code 
} 

Answer 7

추가. 예를 들어 :

element.addEventListener('dragstart', function(event) { 
    event.dataTransfer.setDragImage(element, -99999, -99999); 
}, false); 

당신이 setDragImage에 전달 실제 요소는별로 중요하지 않습니다.여기서는 편의를 위해 동일한 요소를 사용합니다.