HTML 페이지에서 이미지 드래그 비활성화

195

내 페이지에 이미지를 넣어야합니다. 해당 이미지의 드래그를 비활성화하고 싶습니다. 나는 많은 것을 시도하고 있지만 도움이 없습니다. 누군가 나를 도울 수 있습니까?

이미지 크기를 조정하기 때문에 해당 이미지를 배경 이미지로 유지하고 싶지 않습니다.

— 사용자 1034
소스

15

@AgentConundrum-사용자가 원하는 것을 저장하고 수행하면 아무런 문제가 없습니다. 내 유일한 요구 사항은 해당 이미지를 드래그하지 않는 것입니다.

— 사용자 1034

264

당신은 이것을 좋아할 수 있습니다 ...

document.getElementById('my-image').ondragstart = function() { return false; };

작동하는지 확인하십시오 (또는 작동하지 않습니다)

jQuery를 사용하고있는 것 같습니다.

$('img').on('dragstart', function(event) { event.preventDefault(); });

— 알렉스
소스

9

@alex-이미지를 드래그하지 않는 목적은 이미지를 훔치지 않는 것입니다. 목적은 완전히 다릅니다. 그 이미지를 정렬 가능하고 놓을 수 있도록 만들고 있습니다. 설명하는 데 시간이 오래 걸립니다.

— 사용자 1034

2

@alex-ondragstart는 브라우저와 무관합니까?

— 사용자 1034

1

@AdamMerrifield $(document)대신 시도$(window)

— rybo111

2

방금 jQuery를 단순화 할 수있는 방법을 알아 $('img').on('dragstart', false);

— 냈습니다

2

@alex 처리기 :The value false is also allowed as a shorthand for a function that simply does return false.

— Adam Merrifield

174

CSS 전용 솔루션 : 사용 pointer-events: none

https://developer.mozilla.org/en-US/docs/CSS/pointer-events

— 미황
소스

3

그러나 이것은 FF atastast에서 이상한 선택 효과로 이어집니다. 여전히 거짓을 반환하는 것이 좋습니다.

— Bhumi Singhal

이미지를 링크로 사용할 때는 사용되지 않습니다.

— Nilesh patel

3

이 같은 외모는 IE (모든 버전)에서 작동 표시되지 않습니다 : caniuse.com/pointer-events를

— 저스틴 태너에게

8

또한 CSS 유일한 해결책은 : 요소 배치 를 통해 을 img.

— alex

6

-1 ! 이는 모든 ponter 이벤트를 방지하기 위해 사용되어야합니다 (이미지를 업로드 할 때와 같이 끌어 놓기 포함). 자바 스크립트 솔루션을 사용하십시오!

— 거부 거부 Vitali

130

이미지 태그에 draggable = "false"를 추가하십시오.

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

그러나 IE8 이하는 지원하지 않습니다.

— dmo
소스

Magento를 사용하고 있으므로 내 div는 다음과 같습니다. <div class = "product-img-box"> <? php echo $ this-> getChildHtml ( 'media')?> </ div> 마우스 오른쪽 버튼을 클릭하고 드래그 할 수 없도록 제한하는 방법 내 이미지 사업부 @dmo

— Gem

41

window.ondragstart = function() { return false; }

— 벤
소스

4

+1 다운 보트를 이해하지 못합니다. 특별한 솔루션 일뿐 아니라 모든 이미지를 드래그하는 것을 막는 최고의 솔루션은 아닙니다. 그러나 그것은 올바른 방향을 보여줍니다 (그리고 그것이 그것을하는 첫 번째 대답이라고 생각합니다)

— Dr.Molle

@DrMolle Steve가 내 답변 에 남긴 (삭제 된 이후) 의견에 대한 응답 일 수 있습니다 .

— alex

2

때때로 사람들은 링크를 북마크 바로 드래그 할 수 있습니다.이 솔루션은이 기능을 제거합니다.

— jClark

33

가장 간단한 크로스 브라우저 솔루션은

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

문제

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

파이어 폭스에서 작동하지 않는다는 것입니다.

— 이말 하 사랑가 페레라
소스

25

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

내 웹 사이트 http://www.namdevmatrimony.in/ 에서 사용했습니다 . 그것은 마술처럼 작동합니다! :)

— 남 데브 결혼
소스

6

그것은 파이어 폭스에 드래그입니다

— 딘 기독교 함대에게

24

나는 나 자신을 시험해 보았고 이것이 효과가 있다는 것을 알았다.

$("img").mousedown(function(){
    return false;
});

이것이 모든 이미지의 드래그를 비활성화 할 것이라고 확신합니다. 그것이 다른 것에 영향을 미치는지 확실하지 않습니다.

— 사용자 1034
소스

3

아! jQuery를 사용한다고 언급했거나 jQuery를 사용할 수 있습니다. jQuery 사용시 +1

— Alex

@alex-죄송합니다. 나는 내 자신을 시도했다. 그리고 그것이 다른 것에 영향을 미치는지 확신하지 못합니다.

— 사용자 1034

당신은 정상입니다! 아니요, 내가 아는 한 여기에있는 일을하는 것은 다른 것에 부정적인 영향을 미치지 않아야합니다.

— Alex

2

이미지가 <a>태그 안에 싸여 있으면 어떻게됩니까? 그런 다음 사용자가 이미지를 클릭하면 링크가 클릭되지 않습니다.

— SeinopSys

감사. Btw, 이것은 또한 event.preventDefault ();와 함께 GWT에서 작동합니다.

— Johanna

14

이 답변을 참조하십시오 ; Chrome 및 Safari에서는 다음 스타일을 사용하여 기본 드래그를 비활성화 할 수 있습니다.

-webkit-user-drag: auto | element | none;

Firefox 및 IE (10+)에 대해 사용자 선택 을 시도 할 수 있습니다 .

-moz-user-select: none | text | all | element
-ms-user-select: none | text | all | element

— 무
소스

11

드래그 할 수없는 각 이미지에 img태그 내에서 다음을 추가 할 수 있습니다 .

onmousedown="return false;"

예 :

img src="Koala.jpg" onmousedown="return false;"

— 보보
소스

10

이 코드는 원하는 것을 정확하게 수행합니다. 이벤트에 의존하는 다른 작업을 허용하면서 이미지가 드래그되는 것을 방지합니다.

$("img").mousedown(function(e){
    e.preventDefault()
});

— 로버트
소스

9

ondragstart="return false;"이미지 태그에서 직접 사용하십시오 .

<img src="http://image-example.png" ondragstart="return false;"/>

여러 이미지가있는 경우 <div>태그에 싸서 :

<div ondragstart="return false;">
   <img src="image1.png"/>
   <img scr="image2.png"/>
</div>

모든 주요 브라우저에서 작동합니다.

— 얀
소스

8

내 이미지는 ajax를 사용하여 생성되었으므로 windows.load에서 사용할 수 없습니다.

$("#page").delegate('img', 'dragstart', function (event) { event.preventDefault(); });

이렇게하면 동작을 차단하는 섹션을 제어 할 수 있으며 하나의 이벤트 바인딩 만 사용하며 아무 것도 할 필요없이 향후 ajax 생성 이미지에 작동합니다.

jQuery의 새로운 on바인딩으로 :

$('#page').on('dragstart', 'img', function(event) { event.preventDefault(); }); (감사합니다 @ialphan)

— 구 자르트
소스

1

.on을 사용하면 다음과 같습니다. $ (document) .on ( 'dragstart', 'img', function (e) {e.preventDefault ();});

— ialphan

이것이 올바른 해결책입니다. img현재 또는 미래의 무제한 요소에 대한 하나의 이벤트 바인딩 . 가장 덜 집중적이며 가장 견고합니다.

— bearfriend

5

<img draggable="false" src="images/testimg1.jpg" alt=""/>

— 무스타파
소스

4

훌륭한 솔루션, 충돌과 관련된 작은 문제가 하나 있습니다. 다른 사람이 다른 js 라이브러리와 충돌하는 경우 단순히 충돌을 허용하지 않습니다.

var $j = jQuery.noConflict();$j('img').bind('dragstart', function(event) { event.preventDefault(); });

이것이 누군가를 돕기를 바랍니다.

— 폴
소스

3

글쎄, 여기에있는 답변이 모두에게 도움이되었는지 아닌지는 모르겠지만 HTML 페이지에서 텍스트를 드래그하고 선택하지 못하게하는 데 도움이되는 간단한 인라인 CSS 트릭이 있습니다.

당신에 <body>태그 추가 ondragstart="return false". 이미지 드래그를 비활성화합니다. 그러나 텍스트 선택을 비활성화하려면을 추가하십시오 onselectstart="return false".

코드는 다음과 같습니다. <body ondragstart="return false" onselectstart="return false">

— 아비 섹 다스
소스

3

내 솔루션을 최고로 생각할 수 있습니다. e.preventDefault () 및 ondragstart 이벤트 가 지원 되지 않으므로 대부분의 답변은 IE8과 같은 이전 브라우저와 호환되지 않습니다 . 브라우저와 호환 가능하게하려면 이 이미지에 대한 mousemove 이벤트 를 차단해야합니다 . 아래 예를 참조하십시오.

jQuery

$("#my_image").mousemove( function(e) { return false } ); // fix for IE
$("#my_image").attr("draggable", false); // disable dragging from attribute

jQuery없이

var my_image = document.getElementById("my_image");
my_image.setAttribute("draggable", false);

if (my_image.addEventListener) {
   my_image.addEventListener("mousemove", function(e) { return false });
} else if (my_image.attachEvent) {
   my_image.attachEvent("onmousemove", function(e) { return false });
}

IE8에서도 테스트 및 작동

— 코드 젬
소스

3

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

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

— 오 미드 파르 비드
소스

1

Firefox에서 작동하지 않는 것 같습니다 (Mac Firefox 69 사용)

— Ben Wheeler

2

글쎄, 이것은 가능하며 게시 된 다른 답변은 완벽하게 유효하지만 무차별 대입 방식을 취하고 mousedown이미지 의 기본 동작을 막을 수 있습니다 . 이미지 드래그를 시작하는 것입니다.

이 같은:

window.onload = function () {  
    var images = document.getElementsByTagName('img');   
    for (var i = 0; img = images[i++];) {    
        img.ondragstart = function() { return false; };
    }  
};

— 알렉스
소스

2

document.getElementById('#yourImageId').addEventListener('dragstart', function(e) {
     e.preventDefault();
});

이 Plunker에서 작동 http://plnkr.co/edit/HbAbJkF0PVLIMjTmEZml

— dtothefp
소스

2

이를 위해 인라인 코드를 사용할 수 있습니다

<img draggable="false" src="http://www.ourkanpur.com/images/logo.png">

스 니펫 확장

두 번째 옵션은 외부 또는 페이지 CSS 사용

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

<img src="http://www.ourkanpur.com/images/logo.png">

스 니펫 확장

모두 제대로 작동 이 사이트에 외부 CSS를 사용하고 있습니다 (여기를 클릭)

— 아비 셰크 카말
소스

이 파이어 폭스에서 작동하는 것 중 어느 것도 (69 맥 파이어 폭스를 사용하지 않음)

— 벤 휠러

2

jQuery :

$('body').on('dragstart drop', function(e){
    e.preventDefault();
    return false;
});

본체 선택기를 어린이가 끌어서 놓지 못하게하려는 다른 컨테이너로 교체 할 수 있습니다 .

— 리스
소스

1

대답은 간단합니다.

<body oncontextmenu="return false"/>-오른쪽 클릭 <body ondragstart="return false"/>비활성화-마우스 끌기 <body ondrop="return false"/>비활성화-마우스 놓기 비활성화

— 이득
소스

-1

여기에 표시된 CSS 속성을 수행하고 다음 자바 스크립트로 ondragstart를 모니터링했습니다.

handleDragStart: function (evt) {
    if (evt.target.nodeName.match(/^(IMG|DIV|SPAN|A)$/i)) {
      evt.preventDefault();
      return false;
    }
  },

— 알로 쿠스
소스

-2

내 대답 에서 훔쳐서 이미지 위에 동일한 크기의 완전히 투명한 요소를 추가하십시오. 이미지 크기를 조정할 때 요소의 크기를 조정하십시오.

이것은 대부분의 브라우저, 심지어 오래된 브라우저에서도 작동합니다.

— 사블 포스
소스