HTML öğelerinde Sürükle ve Bırak devre dışı bırakılsın mı?

109

Tam özellikli bir pencereleme sistemi uygulamaya çalıştığım bir web uygulaması üzerinde çalışıyorum. Şu anda çok iyi gidiyor, sadece küçük bir sorunla karşılaşıyorum. Bazen uygulamamın bir bölümünü (çoğu zaman yeniden boyutlandırma işlemini tetiklemesi gereken penceremin köşe bölmesini) sürüklemeye gittiğimde, web tarayıcısı akıllı hale geliyor ve bir şeyi sürükleyip bırakmak istediğimi düşünüyor. Sonuç olarak, tarayıcı sürükle ve bırak işini yaparken eylemim beklemeye alınır.

Tarayıcının sürükle ve bırak özelliğini devre dışı bırakmanın kolay bir yolu var mı? İdeal olarak, kullanıcı belirli öğelere tıklarken bunu kapatabilmeyi, ancak kullanıcıların pencerelerimin içeriğinde tarayıcılarının normal işlevlerini kullanmaya devam edebilmeleri için yeniden etkinleştirebilmeyi istiyorum. JQuery kullanıyorum ve onu dokümanlara göz atarken bulamasam da, saf bir jQuery çözümü biliyorsanız mükemmel olurdu.

Kısaca: Kullanıcım fare düğmesi basılıyken tarayıcı metin seçimini ve sürükle ve bırak işlevlerini devre dışı bırakmam ve kullanıcı fareyi bıraktığında bu işlevi geri yüklemem gerekiyor.

— Nicholas Flynt
kaynak

2

@ SyntaxError'ın cevabının (aşağıda, 100+ oy), sürükleme dışı işlemleri etkilemediği için seçilen cevap olması gerektiğini öne sürüyorum.

— Shaun Wilson

78

Fare indirme olayında varsayılanı önlemeyi deneyin:

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

veya

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

— Sergey Ilinsky
kaynak

2

+1 - ancak bu, :activesözde sınıfın öğeye uygulanmasını engellediği Firefox'ta (6.0 ve altı) talihsiz bir yan etkiye sahiptir . Bu, bağlantılarım için gerçekten kullanamayacağım anlamına geliyor.

— Andy E

3

Üzgünüm, bu korkunç. Aşağıdaki cevaba bakın.

— Madbreaks

216

Bu şey çalışıyor ..... Deneyin.

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

Umarım yardımcı olur. Teşekkürler

— Sözdizimi hatası
kaynak

6

Harika çalışıyor! (Nitelikler bir <div>öğeye de yerleştirilebilir .)

— VasiliNovikov

4

bu cevaba oy verdi. Fare indirme yanıtı IMO çok kısadır (diğer durumlar için fare indirme olayını kullanabilirsiniz). Bu cevap mükemmel bir şekilde çalıştı :)

— Daniel van Dommele 04

4

Bu gerçekten çok daha iyi bir cevap, fareyi basılı

— tutarken

Tıklama eylemini etkilemeyeceği için bu kabul edilen cevap olmalıdır.

— rafaelmorais

Bu, bir copy pastedinleyici ile birleştirildiğinde, bir kullanıcıyı sayfanın diğer bölümlerini olumsuz etkilemeden bir şeyi yapıştırmak / sürüklemek yerine girdiyi yazmaya zorlamak için mükemmel bir çözüm gibi görünüyor.

— Daniel Bonnell

21

draggable="false"Öznitelik kullanarak sürüklemeyi devre dışı bırakabilirsiniz .
http://www.w3schools.com/tags/att_global_draggable.asp

— icl7126
kaynak

Chrome 59'da bir cazibe gibi çalışıyor

— kashiraja

1

Bu, kabul edilen cevap, JS olmayan, tüm tarayıcılarda desteklenen basit HTML özelliği olmalıdır: developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/…

— chris

1

bu en iyi cevap

— Argun

12

Bu işe yarayabilir: Metin, resim ve temelde her şey için css3 ile seçimi devre dışı bırakabilirsiniz.

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

Tabii ki sadece yeni tarayıcılar için. Daha fazla ayrıntı için kontrol edin:

CSS kullanarak metin seçimi vurgulama nasıl devre dışı bırakılır?

— uydurma
kaynak

Çok teşekkür ederim. Tıklanabilir istiyorum div, ancak sürükleme devre dışı.

— Ionică Bizău

@ Ionică Bizău Bir şeyleri tıklanabilir hale getirmek istiyorsanız, bir düğme veya etiket kullanmak daha iyidir, çünkü fareler ve dokunmatik ekranları olmayan bazı cihazlar bunları tanır ve kullanıcılar için seçilebilir hale getirir.

— Tosh

8

JQuery ile şöyle bir şey olacak:

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

Benim durumumda, kullanıcıyı girişlerdeki bırakma metninden devre dışı bırakmak istedim, bu yüzden "fare aşağı" yerine "bırak" kullandım.

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

Bunun yerine event.preventDefault () yanlış döndürebilirsiniz. İşte fark.

Ve kod:

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

— Victor Romano
kaynak

2

Bu, Web uygulamalarımda her zaman kullandığım bir keman:

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

Uygulamanızdaki herhangi bir şeyin sürüklenip bırakılmasını önleyecektir. Tur ihtiyacına bağlı olarak vücut seçiciyi çocukların sürüklenmemesi gereken herhangi bir konteyner ile değiştirebilirsiniz .

— Lis
kaynak

0

bunu dene

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

— crazyjune
kaynak

0

İçin inputelemanları, bu cevap benim için çalışıyor.

Bunu Angular 4'te özel bir girdi bileşenine uyguladım, ancak saf JS ile uygulanabileceğini düşünüyorum.

HTML

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

Bileşen tanımı (JS):

export class CustomInputComponent { 

  //component construction and attribute definitions

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

— Tito Leiva
kaynak

0

@ SyntaxError yanıtını kullanarak, https://stackoverflow.com/a/13745199/5134043

Bunu React'te yapmayı başardım; anlayabilmemin tek yolu ondragstart ve ondrop yöntemlerini bir ref'e eklemekti, şöyle:

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

  return (
    <div ref={panelManagerBody}>

— kriskate
kaynak

0

Onu burada bırakacağım. Her şeyi denedikten sonra bana yardımcı oldu.

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

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

— checknov
kaynak

-1

Bu JQuery Benim İçin Çalıştı: -

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

— Piyush
kaynak