Wyłączyć przeciąganie i upuszczanie elementów HTML?

109

Pracuję nad aplikacją internetową, dla której próbuję wdrożyć w pełni funkcjonalny system okienkowy. W tej chwili wszystko idzie bardzo dobrze, napotykam tylko jeden drobny problem. Czasami, gdy idę przeciągnąć część mojej aplikacji (najczęściej narożny element div mojego okna, który ma wywołać operację zmiany rozmiaru), przeglądarka internetowa staje się sprytna i myśli, że chcę coś przeciągnąć i upuścić. Rezultat końcowy: moja akcja zostaje wstrzymana, podczas gdy przeglądarka wykonuje operację przeciągania i upuszczania.

Czy istnieje łatwy sposób na wyłączenie funkcji przeciągania i upuszczania w przeglądarce? Idealnie chciałbym móc go wyłączyć, gdy użytkownik klika określone elementy, ale włączyć go ponownie, aby użytkownicy nadal mogli korzystać z normalnych funkcji przeglądarki w zawartości moich okien. Używam jQuery i chociaż nie mogłem go znaleźć, przeglądając dokumenty, jeśli znasz czyste rozwiązanie jQuery, byłoby doskonałe.

W skrócie: muszę wyłączyć zaznaczanie tekstu w przeglądarce oraz funkcje przeciągania i upuszczania, gdy mój użytkownik ma wciśnięty przycisk myszy, i przywrócić tę funkcjonalność, gdy użytkownik zwolni mysz.

— Nicholas Flynt
źródło

2

Promowałbym, że odpowiedź @ SyntaxError (poniżej, ponad 100 głosów) powinna być wybraną odpowiedzią, ponieważ nie ma to wpływu na operacje bez przeciągania.

— Shaun Wilson

78

Spróbuj zapobiec domyślnemu zdarzeniu wyciszenia myszy:

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

lub

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

— Sergey Ilinsky
źródło

2

+1 - ma to jednak niefortunny efekt uboczny w Firefoksie (6.0 i niższych), gdzie zapobiega zastosowaniu :activepseudoklasy do elementu. Oznacza to, że tak naprawdę nie mogę go używać do moich linków.

— Andy E

3

Przepraszam, to straszne. Zobacz odpowiedź poniżej.

— Madbreaks

216

To działa ..... Spróbuj.

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

mam nadzieję, że to pomoże. Dzięki

— Błąd składni
źródło

6

Działa świetnie! (Atrybuty można również umieszczać na <div>elemencie.)

— VasiliNovikov

4

głosował za tą odpowiedzią. IMO odpowiedzi na kurs myszy jest zbyt krótkie (w innych przypadkach możesz użyć zdarzenia wyciszenia kursora). Ta odpowiedź zadziałała idealnie :)

— Daniel van Dommele

4

To jest rzeczywiście o wiele lepsza odpowiedź, ponieważ posiadanie funkcji „PreventDefault ()” przy wciśniętym

— klawiszu

Powinna to być zaakceptowana odpowiedź, ponieważ nie wpłynie to na kliknięcie.

— rafaelmorais

To w połączeniu z copy pasteodbiornikiem wydaje się idealnym rozwiązaniem, aby zmusić użytkownika do wpisywania danych wejściowych zamiast wklejania / przeciągania czegoś bez negatywnego wpływu na inne części strony.

— Daniel Bonnell

21

Możesz wyłączyć przeciąganie, używając draggable="false"atrybutu.
http://www.w3schools.com/tags/att_global_draggable.asp

— icl7126
źródło

Działa jak urok w Chrome 59

— kashiraja

1

Powinna to być akceptowana odpowiedź, bez JS, prosty atrybut HTML, który jest obsługiwany we wszystkich przeglądarkach: developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/…

— chris

1

to najlepsza odpowiedź

— Argun

12

To może zadziałać: możesz wyłączyć zaznaczanie za pomocą css3 dla tekstu, obrazu i zasadniczo wszystkiego.

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

Oczywiście tylko dla nowszych przeglądarek. Aby uzyskać więcej informacji, sprawdź:

Jak wyłączyć podświetlanie zaznaczenia tekstu za pomocą CSS?

— Bzdury
źródło

Dziękuję bardzo. Chcę klikać div, ale z wyłączonym przeciąganiem.

— Ionică Bizău

@ Ionică Bizău Jeśli chcesz, aby elementy były klikalne, lepiej użyj przycisku lub tagu, ponieważ niektóre urządzenia bez myszy i ekranów dotykowych rozpoznają je i umożliwią użytkownikom wybór.

— Tosh

8

Z jQuery będzie to coś takiego:

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

W moim przypadku chciałem uniemożliwić użytkownikowi upuszczanie tekstu na wejściach, więc użyłem „drop” zamiast „mousedown”.

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

Zamiast event.preventDefault () możesz zwrócić false. Oto różnica.

A kod:

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

— Victor Romano
źródło

2

To jest skrzypce, których zawsze używam w moich aplikacjach internetowych:

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

Zapobiegnie to przeciąganiu i upuszczaniu czegokolwiek w Twojej aplikacji. W zależności od potrzeb wycieczki możesz zastąpić selektor nadwozia dowolnym pojemnikiem, którego dzieci nie powinny ciągnąć.

— Lis
źródło

0

Spróbuj tego

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

— crazyjune
źródło

0

W przypadku inputelementów ta odpowiedź działa dla mnie.

Zaimplementowałem go na niestandardowym komponencie wejściowym w Angular 4, ale myślę, że można go zaimplementować za pomocą czystego JS.

HTML

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

Definicja komponentu (JS):

export class CustomInputComponent { 

  //component construction and attribute definitions

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

— Tito Leiva
źródło

0

używając odpowiedzi @ SyntaxError, https://stackoverflow.com/a/13745199/5134043

Udało mi się to zrobić w React; jedynym sposobem, w jaki mogłem się zorientować, było dołączenie metod ondragstart i ondrop do ref, na przykład:

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

  return (
    <div ref={panelManagerBody}>

— kriskate
źródło

0

Zostawię to tutaj. Pomógł mi po tym, jak wszystkiego spróbowałem.

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

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

— checknov
źródło

-1

To JQuery działało dla mnie: -

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

— Piyush
źródło