고스트 이미지의 드래그를 방지하는 CSS / JS?

사용자가 드래그하려고하는 이미지의 유령을 보지 못하게하는 방법이 있습니까 (이미지의 보안이 아니라 경험).

고스트 이미지가 아닌 텍스트와 이미지의 파란색 선택 문제를 해결하는 이것을 시도했습니다.

img {
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none;
}

(또한 div에 동일한 규칙을 적용하여 div 안에 이미지를 중첩하려고 시도했습니다). 감사

마크 업 또는 JavaScript 코드에서 draggable속성을 설정할 수 있습니다 false.

// As a jQuery method: $('#myImage').attr('draggable', false);
document.getElementById('myImage').setAttribute('draggable', false);

<img id="myImage" src="http://placehold.it/150x150">

나는 당신이 당신을 변경할 수 있다고 생각

img {
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none;
}

로

img {
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  user-drag: none;
}

시도 해봐:

img {
  pointer-events: none;
}

피하려고 노력하다

* {
  pointer-events: none;
}

CSS 속성을 사용하여 웹킷 브라우저에서 이미지를 비활성화 할 수 있습니다.

img{-webkit-user-drag: none;}

클릭 및 호버와 같은 다른 이벤트는 유지하면서 모든 브라우저 에서 이미지를 드래그 할 수 없게됩니다 . HTML5, JS 또는 CSS를 사용할 수있는 한 작동합니다.

<img draggable="false" onmousedown="return false" style="user-drag: none" />

사용자에게 JS가 있다고 확신한다면 JS 속성 등 만 사용하면됩니다. 유연성을 높이려면 ondragstart, onselectstart 및 일부 WebKit 탭 / 터치 CSS를 살펴보십시오.

dragstart이벤트를 처리하십시오 return false.

실제로 드래그 이벤트를 사용해야하고 draggable = false를 설정할 수없는 경우 대체 고스트 이미지를 할당 할 수 있습니다. 따라서 빈 png를 다음과 같이 지정하십시오.

    $('#img').bind({
        dragstart: function(e) {
            var dragIcon = document.createElement('img');
            dragIcon.src = 'blank.png';
            dragIcon.width = 100;
            e.dataTransfer.setDragImage(dragIcon, -10, -10);
        }
    });

이미지를 빈 div의 배경으로 또는 투명 요소 아래에 배치하십시오. 사용자가 이미지를 클릭하여 드래그하면 div를 클릭합니다.

http://www.flickr.com/photos/thefella/5878724253/?f=hp를 참조 하십시오

<div id="photo-drag-proxy"></div>

Firefox의 경우 다음과 같이 조금 더 깊이 들어가야합니다.

var imgs = document.getElementsByTagName('img');

    // loop through fetched images
    for (i = 0; i < imgs.length; i++) {
        // and define onmousedown event handler
        imgs[i].onmousedown = disableDragging;
    }

function disableDragging(e) {
        e.preventDefault();
    }

즐겨.

IE의 경우 드래그를 방지하기 위해 이미지와 앵커에 draggable = "false"속성을 추가해야합니다. CSS 옵션은 다른 모든 브라우저에서 작동합니다. 나는 jQuery에서 이것을했다 :

$("a").attr('draggable', false); 
$("img").attr('draggable', false);

빈 이벤트 리스너를 추가하는 것보다 훨씬 쉬운 해결책이 있습니다. pointer-events: none이미지로 설정 하십시오. 여전히 클릭 가능해야하는 경우 주위에 컨테이너를 추가하여 이벤트를 트리거하십시오.

<img src="myimage.jpg" ondragstart="return false;" />

Firefox에서 테스트했습니다 : 이미지를 제거하고 다시 작동시킵니다! 또한 실행시 투명합니다. 예를 들어

$('.imageContainerClass').mousedown(function() {
    var id = $(this).attr('id');
    $('#'+id).remove();
    $('#'+id).append('Image tag code');
});

편집 : 이것은 IE와 Firefox에서만 이상하게 작동합니다. 또한 draggable = false각 이미지에 추가 했습니다. 여전히 크롬과 사파리의 유령입니다.

편집 2 : 배경 이미지 솔루션이 실제로 가장 좋습니다. 유일한 미묘한 점은 background-size배경 이미지가 변경 될 때마다 속성을 재정의해야한다는 것입니다! 또는, 그것은 내 편에서 본 것입니다. 더 좋은 점은 imgIE에서 이미지 크기를 조정하지 못한 IE의 일반 태그에 문제가 있다는 것입니다. 이제 이미지의 치수가 올바른지 확인하십시오. 단순한:

$(id).css( 'background-image', url('blah.png') );
$(id).css( 'background-size', '40px');

또한 다음 사항을 고려하십시오.

background-Repeat:no-repeat;
background-Position: center center;

항목을 드래그 할 때 표시되는 이미지를 설정할 수 있습니다. Chrome에서 테스트했습니다.

setDragImage

사용하다

onclick = myFunction();
myFunction(e) {
    e.dataTransfer.setDragImage(someImage, xOffset, yOffset);
}

또는 이미 답변에서 언급했듯이 draggable="false"요소를 전혀 드래그 할 수없는 경우 아무런 문제가없는 경우 HTML 요소를 설정할 수 있습니다 .

모든 브라우저 접두사를 사용하여 선택하거나 드래그하지 않는 Be-all-end-all

-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
-ms-user-select: none;
user-select: none;

-webkit-user-drag: none;
-khtml-user-drag: none;
-moz-user-drag: none;
-o-user-drag: none;
-ms-user-drag: none;
user-drag: none;

draggable속성을로 설정할 수도 있습니다 false. 인라인 HTML : draggable="false", Javascript : elm.draggable = false또는 jQuery : 로이를 수행 할 수 있습니다 elm.attr('draggable', false).

onmousedown함수를로 처리 할 수도 있습니다 return false. 인라인 HTML : onmousedown="return false", Javascript : elm.onmousedown=()=>return false;또는 jQuery를 사용 하여이 작업을 수행 할 수 있습니다 .elm.mousedown(()=>return false)

이 작업은 저에게 약간의 라이트 박스 스크립트를 사용합니다.

.nodragglement {
    transform: translate(0px, 0px)!important;
}