HTML 요소에서 끌어서 놓기를 비활성화 하시겠습니까?

109

나는 완전한 기능을 갖춘 윈도우 시스템을 구현하려는 웹 응용 프로그램에서 작업하고 있습니다. 지금은 매우 잘 진행되고 있습니다. 한 가지 사소한 문제 만 발생하고 있습니다. 때때로 내 응용 프로그램의 일부 (대부분 크기 조정 작업을 트리거하는 내 창의 모서리 div)를 드래그 할 때 웹 브라우저가 영리 해지고 무언가를 드래그 앤 드롭해야한다고 생각합니다. 결과적으로 브라우저가 드래그 앤 드롭 작업을 수행하는 동안 내 작업이 보류됩니다.

브라우저의 드래그 앤 드롭을 비활성화하는 쉬운 방법이 있습니까? 이상적으로는 사용자가 특정 요소를 클릭하는 동안이 기능을 끌 수 있지만 다시 활성화하여 사용자가 내 창 콘텐츠에서 브라우저의 정상적인 기능을 계속 사용할 수 있도록하고 싶습니다. 나는 jQuery를 사용하고 있으며 문서를 찾아 볼 수는 없지만 순수한 jQuery 솔루션을 알고 있다면 훌륭 할 것입니다.

간단히 말해서, 사용자가 마우스 버튼을 누른 상태에서 브라우저 텍스트 선택 및 끌어서 놓기 기능을 비활성화하고 사용자가 마우스를 놓으면 해당 기능을 복원해야합니다.

— 니콜라스 플린트
소스

2

나는 드래그하지 않는 작업에 영향을 미치지 않으므로 @SyntaxError의 답변 (아래, 100 개 이상의 투표)이 선택된 답변이어야한다고 홍보합니다.

— 숀 윌슨

78

mousedown 이벤트에서 기본값을 방지하십시오.

<div onmousedown="event.preventDefault ? event.preventDefault() : event.returnValue = false">asd</div>

또는

<div onmousedown="return false">asd</div>

— 세르게이 일 린스키
소스

2

+1-그러나 이것은 Firefox (6.0 이하)에서 :active의사 클래스가 요소에 적용되는 것을 방지하는 불행한 부작용이 있습니다 . 이것은 내 링크에 실제로 사용할 수 없음을 의미합니다.

— Andy E

3

죄송합니다. 끔찍합니다. 아래 답변을 참조하십시오.

— Madbreaks

216

이건 작동합니다 ..... 해보세요.

<BODY ondragstart="return false;" ondrop="return false;">

도움이되기를 바랍니다. 감사

— SyntaxError
소스

6

잘 작동합니다! (속성이 배치 될 수 <div>도 소자.)

— VasiliNovikov

4

이 답변에 투표했습니다. mousedown 답변 IMO가 너무 짧습니다 (다른 경우에는 mousedown 이벤트를 사용할 수 있습니다). 이 답변은 완벽하게 정상적으로 :) 근무

— 다니엘 반 Dommele에게

4

이것은 실제로 훨씬 더 나은 대답입니다. 마우스를

— 눌렀을 때

클릭 동작에 영향을주지 않으므로이 답변이 허용되어야합니다.

— rafaelmorais

이것은 copy paste리스너 와 결합 하여 페이지의 다른 부분에 악영향을주지 않고 무언가를 붙여 넣거나 드래그하는 대신 사용자가 입력을 강제로 입력하도록하는 완벽한 솔루션처럼 보입니다.

— Daniel Bonnell

21

draggable="false"속성 을 사용하여 끌기를 비활성화 할 수 있습니다 .
http://www.w3schools.com/tags/att_global_draggable.asp

— icl7126
소스

59 크롬의 매력처럼 작동

— kashiraja

1

모든 브라우저에서 지원되는 JS가 아닌 간단한 HTML 속성으로 허용되는 답변이어야합니다. developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/…

— chris

1

이것이 최고의 답변입니다

— Argun

12

이것은 작동 할 수 있습니다 : 텍스트, 이미지 및 기본적으로 모든 것에 대해 css3로 선택을 비활성화 할 수 있습니다.

.unselectable {
   -moz-user-select: -moz-none;
   -khtml-user-select: none;
   -webkit-user-select: none;

   /*
     Introduced in IE 10.
     See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/
   */
   -ms-user-select: none;
   user-select: none;
}

물론 최신 브라우저에만 해당됩니다. 자세한 내용은 다음을 확인하십시오.

CSS를 사용하여 텍스트 선택 강조 표시를 비활성화하는 방법은 무엇입니까?

— 쓸 데 없는 말
소스

정말 고맙습니다. 클릭 가능한 div을 원하지만 드래그가 비활성화되어 있습니다.

— Ionică Bizău

@ Ionică Bizău 무언가를 클릭 할 수있게하려면 버튼이나 태그를 사용하는 것이 좋습니다. 마우스와 터치 스크린이없는 특정 장치가이를 인식하고 사용자가 선택할 수 있도록하기 때문입니다.

— Tosh

8

jQuery를 사용하면 다음과 같습니다.

$(document).ready(function() {
  $('#yourDiv').on('mousedown', function(e) {
      e.preventDefault();
  });
});

제 경우에는 입력에서 텍스트를 드롭하지 못하도록 사용자를 비활성화하고 싶었으므로 "마우스 다운"대신 "드롭"을 사용했습니다.

$(document).ready(function() {
  $('input').on('drop', function(event) {
    event.preventDefault();
  });
});

대신 event.preventDefault () false를 반환 할 수 있습니다. 차이점이 있습니다.

그리고 코드 :

$(document).ready(function() {
  $('input').on('drop', function() {
    return false;
  });
});

— 빅터 로마노
소스

2

이것은 내 웹 응용 프로그램에서 항상 사용하는 바이올린입니다.

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

앱의 모든 항목이 드래그 앤 드롭되는 것을 방지합니다. 투어 필요에 따라 바디 선택기를 어린이가 드래그해서는 안되는 컨테이너로 대체 할 수 있습니다 .

— Lis
소스

0

이 시도

$('#id').on('mousedown', function(event){
    event.preventDefault();
}

— 미친
소스

0

위해 input요소, 이 대답은 나를 위해 작동합니다.

Angular 4의 사용자 지정 입력 구성 요소에 구현했지만 순수한 JS로 구현할 수 있다고 생각합니다.

HTML

<input type="text" [(ngModel)]="value" (ondragenter)="disableEvent($event)" 
(dragover)="disableEvent($event)" (ondrop)="disableEvent($event)"/>

구성 요소 정의 (JS) :

export class CustomInputComponent { 

  //component construction and attribute definitions

  disableEvent(event) {
    event.preventDefault();
    return false;
  }
}

— 티토 레이 바
소스

0

@SyntaxError의 답변 사용, https://stackoverflow.com/a/13745199/5134043

저는 React에서이 작업을 수행했습니다. 내가 알아낼 수있는 유일한 방법은 ondragstart 및 ondrop 메소드를 ref에 다음과 같이 첨부하는 것입니다.

  const panelManagerBody = React.createRef<HTMLDivElement>();
  useEffect(() => {
    if (panelManagerBody.current) {
      panelManagerBody.current.ondragstart = () => false;
      panelManagerBody.current.ondrop = () => false;
    }
  }, [panelManagerBody]);

  return (
    <div ref={panelManagerBody}>

— 크리 스케이트
소스

0

여기에 그대로 두겠습니다. 내가 모든 것을 시도한 후에 나를 도왔습니다.

   $(document.body).bind("dragover", function(e) {
        e.preventDefault();
        return false;
   });

   $(document.body).bind("drop", function(e){
        e.preventDefault();
        return false;
   });

— 체크 노브
소스

-1

이 JQuery는 나를 위해 일했습니다.

$(document).ready(function() {
  $('#con_image').on('mousedown', function(e) {
      e.preventDefault();
  });
});

— Piyush
소스