복붙노트

[JQUERY] HTML 요소를 드래그 앤 드롭 사용 중지 하시겠습니까?

JQUERY

HTML 요소를 드래그 앤 드롭 사용 중지 하시겠습니까?

해결법

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

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

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

    또는

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

  2. 2.이것은 작동합니다. 시도 해봐.

    이것은 작동합니다. 시도 해봐.

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

  3. 3.draggable = "false"속성을 사용하여 단순히 드래그를 비활성화 할 수 있습니다. http://www.w3schools.com/tags/att_global_draggable.asp.

    draggable = "false"속성을 사용하여 단순히 드래그를 비활성화 할 수 있습니다. http://www.w3schools.com/tags/att_global_draggable.asp.

  4. 4.이 작업은 다음과 같이 작동 할 수 있습니다. 텍스트, 이미지 및 기본적으로 모든 경우 CSS3로 선택을 비활성화 할 수 있습니다.

    이 작업은 다음과 같이 작동 할 수 있습니다. 텍스트, 이미지 및 기본적으로 모든 경우 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를 사용하여 텍스트 선택 강조 표시를 비활성화하는 방법은 무엇입니까?

  5. 5.jquery와 함께 그것은 그런 것입니다 :

    jquery와 함께 그것은 그런 것입니다 :

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

    내 경우에는 입력의 텍스트를 드롭 다운로드하지 않아 "MouseDown"대신 "드롭"을 사용했습니다.

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

    대신이 Event.preventDefault () false를 반환 할 수 있습니다. 다음은 차이점입니다.

    코드와 코드 :

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

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

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

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

    앱에서 끌어오고 삭제되는 것을 방지 할 것입니다. 투어 요구 사항에 따라 신체 선택기를 어린이를 드래그하지 않아야하는 컨테이너로 바디 선택기를 교체 할 수 있습니다.

  7. 7.이 시도

    이 시도

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

  8. 8.입력 요소의 경우,이 답변은 나를 위해 작동합니다.

    입력 요소의 경우,이 답변은 나를 위해 작동합니다.

    나는 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;
  }
}

  9. 9.@ syntaxerror의 답변을 사용하여 https://stackoverflow.com/a/13745199/5134043.

    @ syntaxerror의 답변을 사용하여 https://stackoverflow.com/a/13745199/5134043.

    반응 에서이 작업을 수행 할 수있었습니다. 내가 알아낼 수있는 유일한 방법은 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}>

  10. 10.나는 그냥 여기에 남겨 둘 것이다. 모든 것을 시도한 후에 나를 도왔습니다.

    나는 그냥 여기에 남겨 둘 것이다. 모든 것을 시도한 후에 나를 도왔습니다.

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

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

  11. 11.질문은 오래되었지만 너무 늦은 것은 결코 늦지 않았습니다.

    질문은 오래되었지만 너무 늦은 것은 결코 늦지 않았습니다.

    $(document).ready(function() {
  //prevent drag and drop
  const yourInput = document.getElementById('inputid');
  yourInput.ondrop = e => e.preventDefault();

  //prevent paste
  const Input = document.getElementById('inputid');
  Input.onpaste = e => e.preventDefault();
});

  12. 12.이 jquery는 나를 위해 일했습니다 : -

    이 jquery는 나를 위해 일했습니다 : -

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

    13. from https://stackoverflow.com/questions/704564/disable-drag-and-drop-on-html-elements by cc-by-sa and MIT license

'JQUERY' 카테고리의 다른 글

[JQUERY] 오류 : 액세스 제어 허용 헤더에서는 요청 헤더 필드 콘텐츠 형식이 허용되지 않습니다.  (0) 2020.10.30
[JQUERY] SetTimeout / ClearTimeout 문제  (0) 2020.10.30
[JQUERY] ASP.NET WebForms를 사용하여 Ajax 용 jQuery를 사용합니다  (0) 2020.10.30
[JQUERY] 세트 가시성의 jQuery .hide ()의 등가 : 숨겨진  (0) 2020.10.30
[JQUERY] 데이터 속성 JQuery와에 잘못된 값을 얻을  (0) 2020.10.30
,

티스토리툴바