Nonaktifkan Seret dan Lepas pada elemen HTML?

109

Saya sedang mengerjakan aplikasi web yang saya coba implementasikan dengan sistem windowing berfitur lengkap. Saat ini berjalan sangat baik, saya hanya mengalami satu masalah kecil. Kadang-kadang ketika saya menyeret bagian dari aplikasi saya (paling sering div sudut jendela saya, yang seharusnya memicu operasi pengubahan ukuran) browser web menjadi pintar dan mengira saya bermaksud menyeret dan melepaskan sesuatu. Hasil akhirnya, tindakan saya ditunda saat browser melakukan hal seret dan lepas.

Adakah cara mudah untuk menonaktifkan seret dan lepas browser? Idealnya saya ingin dapat mematikannya saat pengguna mengklik elemen tertentu, tetapi mengaktifkannya kembali sehingga pengguna masih dapat menggunakan fungsi normal browser mereka pada konten jendela saya. Saya menggunakan jQuery, dan meskipun saya tidak dapat menemukannya saat menjelajahi dokumen, jika Anda mengetahui solusi jQuery murni, itu akan sangat baik.

Singkatnya: Saya perlu menonaktifkan pemilihan teks browser dan fungsi drag-and-drop saat pengguna saya menekan tombol mouse, dan memulihkan fungsionalitas itu saat pengguna melepaskan mouse.

— Nicholas Flynt
sumber

2

saya akan mempromosikan bahwa jawaban @ SyntaxError (di bawah, 100+ suara) harus menjadi jawaban yang dipilih, karena tidak mempengaruhi operasi non-seret.

— Shaun Wilson

78

Coba cegah default pada acara mousedown:

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

atau

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

— Sergey Ilinsky
sumber

2

+1 - namun, ini memiliki efek samping yang tidak menguntungkan di Firefox (6.0 dan yang lebih rendah) di mana hal ini mencegah :activepseudo-class diterapkan ke elemen tersebut. Ini berarti saya tidak dapat menggunakannya untuk tautan saya.

— Andy E

3

Maaf, ini sangat buruk. Lihat jawaban di bawah ini.

— Madbreaks

216

Hal ini berhasil ..... Cobalah.

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

semoga membantu. Terima kasih

— Kesalahan sintaks
sumber

6

Bekerja dengan baik! (Atribut juga dapat ditempatkan pada <div>elemen.)

— VasiliNovikov

4

memilih jawaban ini. IMO jawaban mousedown terlalu pendek (Anda dapat menggunakan acara mousedown untuk kasus lain). Jawaban ini bekerja dengan baik :)

— Daniel van Dommele

4

Ini memang jawaban yang jauh lebih baik, memiliki 'preventDefault ()' pada mouse ke bawah memiliki terlalu banyak efek samping (misalnya, mencegah fokus / tidak fokus input teks formulir)

— Jecimi

Ini harus menjadi jawaban yang diterima, karena ini tidak akan mempengaruhi tindakan klik.

— rafaelmorais

Ini digabungkan dengan copy pastependengar sepertinya solusi sempurna untuk memaksa pengguna mengetik masukan daripada menempel / menyeret sesuatu tanpa mempengaruhi bagian lain dari halaman.

— Daniel Bonnell

21

Anda dapat menonaktifkan penarikan hanya dengan menggunakan draggable="false"atribut.
http://www.w3schools.com/tags/att_global_draggable.asp

— icl7126
sumber

Berfungsi seperti pesona di Chrome 59

— kashiraja

1

Ini harus menjadi jawaban yang diterima, bukan JS, atribut HTML sederhana yang didukung di semua browser: developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/…

— chris

1

ini adalah jawaban terbaik

— Argun

12

Ini mungkin berhasil: Anda dapat menonaktifkan pemilihan dengan css3 untuk teks, gambar, dan pada dasarnya semuanya.

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

Tentu saja hanya untuk browser yang lebih baru. Untuk lebih jelasnya periksa:

Bagaimana cara menonaktifkan penyorotan pemilihan teks menggunakan CSS?

— Omong kosong
sumber

Terima kasih banyak. Saya ingin dapat diklik div, tetapi dengan drag dinonaktifkan.

— Ionică Bizău

@ Ionică Bizău Jika Anda ingin membuat sesuatu dapat diklik, lebih baik menggunakan tombol atau tag, karena perangkat tertentu tanpa mouse dan layar sentuh akan mengenali ini dan membuatnya dapat dipilih oleh pengguna.

— Tosh

8

Dengan jQuery akan menjadi seperti itu:

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

Dalam kasus saya, saya ingin menonaktifkan pengguna dari teks drop di input jadi saya menggunakan "drop", bukan "mousedown".

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

Sebagai gantinya event.preventDefault () Anda bisa mengembalikan false. Inilah perbedaannya.

Dan kodenya:

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

— Victor Romano
sumber

2

Ini adalah biola yang selalu saya gunakan dengan aplikasi Web saya:

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

Ini akan mencegah apa pun di aplikasi Anda diseret dan dijatuhkan. Bergantung pada kebutuhan tur, Anda dapat mengganti pemilih tubuh dengan penampung apa pun yang tidak boleh diseret oleh anak-anak.

— Lis
sumber

0

coba ini

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

— crazyjune
sumber

0

Untuk inputelemen, jawaban ini berhasil untuk saya.

Saya menerapkannya pada komponen input khusus di Angular 4, tapi saya pikir itu bisa diimplementasikan dengan JS murni.

HTML

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

Definisi komponen (JS):

export class CustomInputComponent { 

  //component construction and attribute definitions

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

— Tito Leiva
sumber

0

menggunakan jawaban @ SyntaxError, https://stackoverflow.com/a/13745199/5134043

Saya telah berhasil melakukan ini di React; satu-satunya cara yang bisa saya ketahui adalah dengan memasang metode ondragstart dan ondrop ke referensi, seperti:

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

  return (
    <div ref={panelManagerBody}>

— Kriskate
sumber

0

Saya akan tinggalkan saja di sini. Membantu saya setelah saya mencoba segalanya.

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

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

— checknov
sumber

-1

JQuery ini Bekerja untuk saya: -

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

— Piyush
sumber