Tắt tính năng Kéo và thả trên các phần tử HTML?

109

Tôi đang làm việc trên một ứng dụng web mà tôi đang cố gắng triển khai hệ thống cửa sổ đầy đủ tính năng. Hiện tại, mọi chuyện đang diễn ra rất tốt, tôi chỉ gặp một vấn đề nhỏ. Đôi khi khi tôi kéo một phần ứng dụng của mình (thường là phần góc của cửa sổ, nơi được cho là sẽ kích hoạt hoạt động thay đổi kích thước), trình duyệt web sẽ thông minh và nghĩ rằng tôi muốn kéo và thả thứ gì đó. Kết quả cuối cùng, hành động của tôi bị tạm dừng trong khi trình duyệt thực hiện thao tác kéo và thả.

Có cách nào dễ dàng để tắt tính năng kéo và thả của trình duyệt không? Lý tưởng nhất là tôi muốn có thể tắt nó trong khi người dùng đang nhấp vào một số phần tử nhất định, nhưng bật lại nó để người dùng vẫn có thể sử dụng chức năng bình thường của trình duyệt trên nội dung cửa sổ của tôi. Tôi đang sử dụng jQuery và mặc dù tôi không thể tìm thấy nó khi duyệt các tài liệu, nhưng nếu bạn biết một giải pháp jQuery thuần túy thì nó sẽ rất tuyệt vời.

Tóm lại: Tôi cần tắt chức năng chọn và kéo và thả văn bản của trình duyệt trong khi người dùng của tôi hạ nút chuột và khôi phục chức năng đó khi người dùng thả chuột.

— Nicholas Flynt
nguồn

2

tôi sẽ quảng cáo rằng câu trả lời của @ SyntaxError (bên dưới, hơn 100 phiếu bầu) phải là câu trả lời được chọn, vì nó không ảnh hưởng đến các hoạt động không kéo.

— Shaun Wilson

78

Thử ngăn mặc định đối với sự kiện tạm dừng:

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

hoặc là

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

— Sergey Ilinsky
nguồn

2

+1 - tuy nhiên, điều này có tác dụng phụ đáng tiếc trong Firefox (6.0 trở xuống), nơi nó ngăn cản việc :activeáp dụng lớp giả cho phần tử. Điều này có nghĩa là tôi thực sự không thể sử dụng nó cho các liên kết của mình.

— Andy E

3

Xin lỗi, điều này thật tồi tệ. Xem câu trả lời bên dưới.

— Madbreaks

216

Điều này hoạt động ..... Hãy thử nó.

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

hy vọng nó giúp. Cảm ơn

— Lỗi cú pháp
nguồn

6

Hoạt động tuyệt vời! (Thuộc tính có thể được đặt trên một <div>yếu tố, quá.)

— VasiliNovikov

4

đã bình chọn cho câu trả lời này. IMO trả lời mousedown quá ngắn (bạn có thể sử dụng sự kiện mousedown cho các trường hợp khác). Câu trả lời này hoạt động hoàn toàn tốt :)

— Daniel van Dommele

4

Đây thực sự là một câu trả lời tốt hơn, có 'preventDefault ()' trên xuống chuột đã quá nhiều tác dụng phụ (cho ví dụ như ngăn chặn tập trung / Không tập trung đầu vào dưới dạng văn bản)

— Jecimi

Đây phải là câu trả lời được chấp nhận, vì điều này sẽ không ảnh hưởng đến hành động nhấp chuột.

— rafaelmorais

Điều này kết hợp với trình copy pastenghe có vẻ như là giải pháp hoàn hảo để buộc người dùng phải nhập dữ liệu đầu vào thay vì dán / kéo nội dung nào đó vào mà không ảnh hưởng xấu đến các phần khác của trang.

— Daniel Bonnell

21

Bạn có thể tắt tính năng kéo đơn giản bằng cách sử dụng draggable="false"thuộc tính.
http://www.w3schools.com/tags/att_global_draggable.asp

— icl7126
nguồn

Công trình như một say mê trong Chrome 59

— kashiraja

1

Đây phải là câu trả lời được chấp nhận, không phải JS, thuộc tính HTML đơn giản được hỗ trợ trên tất cả các trình duyệt: developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/…

— chris

1

đây là câu trả lời hay nhất

— Argun

12

Điều này có thể hoạt động: Bạn có thể tắt tính năng chọn bằng css3 cho văn bản, hình ảnh và về cơ bản là mọi thứ.

.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;
}

Tất nhiên chỉ dành cho các trình duyệt mới hơn. Để biết thêm chi tiết, hãy kiểm tra:

Làm cách nào để tắt đánh dấu vùng chọn văn bản bằng CSS?

— Tosh
nguồn

Cảm ơn bạn rất nhiều. Tôi muốn có thể nhấp div, nhưng với tính năng kéo bị vô hiệu hóa.

— Ionică Bizău 17/10/12

@ Ionică Bizău Nếu bạn muốn làm cho mọi thứ có thể nhấp được, tốt hơn nên sử dụng một nút hoặc một thẻ, vì một số thiết bị không có chuột và màn hình cảm ứng sẽ nhận ra những thứ này và làm cho chúng có thể lựa chọn cho người dùng.

— Tosh

8

Với jQuery, nó sẽ giống như vậy:

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

Trong trường hợp của tôi, tôi muốn vô hiệu hóa người dùng thả văn bản trong các đầu vào nên tôi đã sử dụng "drop" thay vì "mousedown".

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

Thay vào đó event.preventDefault () bạn có thể trả về false. Đây là sự khác biệt.

Và mã:

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

— Victor Romano
nguồn

2

Đây là một thủ thuật mà tôi luôn sử dụng với các ứng dụng Web của mình:

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

Nó sẽ ngăn mọi thứ trên ứng dụng của bạn bị kéo và thả. Tùy thuộc vào nhu cầu tham quan, bạn có thể thay thế bộ chọn cơ thể bằng bất kỳ hộp chứa nào mà trẻ em không nên kéo.

— Lis
nguồn

0

thử cái này

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

— crazyjune
nguồn

0

Đối với inputcác yếu tố, câu trả lời này phù hợp với tôi.

Tôi đã triển khai nó trên một thành phần đầu vào tùy chỉnh trong Angular 4, nhưng tôi nghĩ nó có thể được triển khai bằng JS thuần túy.

HTML

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

Định nghĩa thành phần (JS):

export class CustomInputComponent { 

  //component construction and attribute definitions

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

— Tito Leiva
nguồn

0

sử dụng câu trả lời của @ SyntaxError, https://stackoverflow.com/a/13745199/5134043

Tôi đã quản lý để làm điều này trong React; cách duy nhất tôi có thể tìm ra là đính kèm các phương thức ondragstart và ondrop vào một ref, như sau:

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

  return (
    <div ref={panelManagerBody}>

— kriskate
nguồn

0

Tôi sẽ chỉ để nó ở đây. Đã giúp tôi sau khi tôi thử mọi thứ.

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

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

— checknov
nguồn

-1

JQuery này đã làm việc cho tôi: -

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

— Piyush
nguồn