고스트 이미지의 드래그를 방지하는 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);
        }
    });