JS를 사용하지 않고 이미지를 드래그하거나 선택하지 못하도록 방지

JS를 사용하지 않고 이미지를 드래그하거나 선택하지 못하도록 방지

---

누구나 자바 스크립트에 의존하지 않고 Firefox에서 이미지를 드래그 할 수없고 선택 할 수 없도록 만드는 방법을 알고 있습니까? 사소한 것처럼 보이지만 여기에 문제가 있습니다.

1) Firefox에서 끌어서 강조 표시 할 수 있습니다.

<img src="...">

2) 따라서 이것을 추가하지만 드래그하는 동안 이미지를 여전히 강조 표시 할 수 있습니다.

<img src="..." draggable="false">

3) 따라서 강조 문제를 해결하기 위해 이것을 추가하지만 직관적으로 이미지를 다시 드래그 할 수있게됩니다. 이상하다, 알고있다! FF 16.0.1 사용

<img src="..." draggable="false" style="-moz-user-select: none;">

그렇다면 왜 "-moz-user-select : none"을 추가하면 "draggable = false"를 능가 할 수 없는지 아십니까? 물론 웹킷은 예상대로 작동합니다. Interwebs에는 이것에 대해 아무것도 없습니다 ... 우리가 이것에 대해 약간의 빛을 비추면 좋을 것입니다.

감사!!

편집 : 이것은 UI 요소가 실수로 드래그되는 것을 방지하고 사용성을 향상시키는 것입니다. 복사 방지 체계에서 일부 절충 시도는 아닙니다 :-)

---

다음 CSS 속성을 이미지로 설정하십시오.

user-drag: none; 
user-select: none;
-moz-user-select: none;
-webkit-user-drag: none;
-webkit-user-select: none;
-ms-user-select: none;

---

솔루션을 공유하는 것을 잊어 버렸습니다 .JS를 사용하지 않고이를 수행 할 수있는 방법을 찾을 수 없었습니다. @Jeffery A Wooden에서 제안한 CSS가 다루지 않는 코너 사례가 있습니다.

이것은 모든 UI 컨테이너에 적용되며 모든 하위 요소에서 반복되므로 각 요소에 적용 할 필요가 없습니다.

CSS :

.unselectable {
    /* For Opera and <= IE9, we need to add unselectable="on" attribute onto each element */
    /* Check this site for more details: http://help.dottoro.com/lhwdpnva.php */
    -moz-user-select: none; /* These user-select properties are inheritable, used to prevent text selection */
    -webkit-user-select: none;
    -ms-user-select: none; /* From IE10 only */
    user-select: none; /* Not valid CSS yet, as of July 2012 */

    -webkit-user-drag: none; /* Prevents dragging of images/divs etc */
    user-drag: none;
}

JS :

var makeUnselectable = function( $target ) {
    $target
        .addClass( 'unselectable' ) // All these attributes are inheritable
        .attr( 'unselectable', 'on' ) // For IE9 - This property is not inherited, needs to be placed onto everything
        .attr( 'draggable', 'false' ) // For moz and webkit, although Firefox 16 ignores this when -moz-user-select: none; is set, it's like these properties are mutually exclusive, seems to be a bug.
        .on( 'dragstart', function() { return false; } );  // Needed since Firefox 16 seems to ingore the 'draggable' attribute we just applied above when '-moz-user-select: none' is applied to the CSS 

    $target // Apply non-inheritable properties to the child elements
        .find( '*' )
        .attr( 'draggable', 'false' )
        .attr( 'unselectable', 'on' ); 
};

이것은 필요한 것보다 훨씬 복잡했습니다.

---

pointer-eventsCSS 에서 속성을 사용하고 '없음'과 동일하게 설정할 수 있습니다

img {
    pointer-events: none;
}

편집

이벤트를 차단 (클릭)합니다. 더 나은 해결책은

<img draggable="false" (dragstart)="false;" class="unselectable">

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

---

Depending on the situation, it is often helpful to make the image a background image of a div with CSS.

<div id='my-image'></div>

Then in CSS:

#my-image {
    background-image: url('/img/foo.png');
    width: ???px;
    height: ???px;
}

See this JSFiddle for a live example with a button and a different sizing option.

---

You could probably just resort to

<img src="..." style="pointer-events: none;">

---

You could set the image as a background image. Since it resides in a div, and the div is undraggable, the image will be undraggable:

<div style="background-image: url("image.jpg");">
</div>

---

A generic solution especially for Windows Edge browser (as the -ms-user-select: none; CSS rule doesn't work):

window.ondragstart = function() {return false}

Note: This can save you having to add draggable="false" to every img tag when you still need the click event (i.e. you can't use pointer-events: none), but don't want the drag icon image to appear.

---

I created a div element which has the same size as the image and is positioned on top of the image. Then, the mouse events do not go to the image element.

참고URL : https://stackoverflow.com/questions/12906789/preventing-an-image-from-being-draggable-or-selectable-without-using-js