ContentEditable DIV - wyłączanie przeciągania i upuszczania

Czy można wyłączyć funkcję "przeciągnij i upuść" dla elementów, dla których atrybut contentEditable ma wartość true.ContentEditable DIV - wyłączanie przeciągania i upuszczania

Mam następującą stronę HTML.

<!DOCTYPE html> 
<html><meta charset="utf-8"><head><title>ContentEditable</title></head> 
<body> 
    <div contenteditable="true">This is editable content</div> 
    <span>This is not editable content</span> 
    <img src="bookmark.png" title="Click to do foo" onclick= "foo()"> 
    </span> 
</body> 
</html>

Główny problem mam skierowane jest to, że jest możliwe, aby przeciągnąć i upuścić obraz do div i zostanie skopiowana (wraz z tytułem i obsługi kliknięcie)

Źródło

2010-06-13 sonofdelphi

interesujący, I don zna się na interfejsie przeciągania i upuszczania na tyle dobrze, aby się upewnić, ale wygląda na to, że jest tu jakiś błąd. I nieco zmodyfikowany kod dodanie obsługi dla zdarzenia drop na edytowalny Gr:

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>ContentEditable</title> 
</head> 
<body> 
    <div contenteditable="true" ondrop="window.alert('dropped!');return false;">This is editable content</div> 
    <span>This is not editable content</span> 
    <span> 
     <img src="bookmark.png" title="Click to do foo" onclick="foo()"> 
    </span> 
</body> 
</html>

mam testów Firefox 3.7 alpha: gdybym przeciągnij obraz na środku tekstu Zdarzenie, Otrzymuję alert, a return false zatrzymuje zrzucanie obrazu. Jeśli jednak przeciągnę do początku tekstu, zdarzenie nie zostanie wywołane, ale obraz zostanie wstawiony do elementu div. Pamiętaj, że w Firefoksie 3.6 i Chromium 6.0 wydarzenie się nie uruchamia, więc albo zupełnie źle zrozumiałem, jak to działa, albo nic z tego nie działa wystarczająco dobrze, by na nim polegać.

Źródło

2010-06-16 22:07:27 robertc

W przeglądarce Chrome i Firefox należy anulować wydarzenie ondragover, aby zdarzenie miało się odbyć w trybie ondrag. Polecam również anulowanie zdarzeń ondragenter i ondragleave tylko po to, aby się upewnić.

http://jsbin.com/itugu/2

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>ContentEditable</title> 
</head> 
<body> 
    <div contenteditable="true" ondragenter="return false;" ondragleave="return false;" ondragover="return false;" ondrop="window.alert('dropped!');return false;">This is editable content</div> 
    <span>This is not editable content</span> 
    <span> 
     <img src="bookmark.png" title="Click to do foo" onclick="foo()"> 
    </span> 
</body> 
</html>

Takie zachowanie nie jest błąd; w specyfikacji HTML5 jest napisane, że ondragover musi zostać anulowane, aby ondrag mógł zostać uruchomiony. Nie ma sensu robić tego w ten sposób, więc mam nadzieję, że wkrótce się to zmieni. Zobacz http://www.quirksmode.org/blog/archives/2009/09/the_html5_drag.html

Źródło

2010-06-26 18:58:43 Na7coldwater

Poniższy urywek będzie zapobiec div od otrzymania przeciągać treść:

jQuery('div').bind('dragover drop', function(event){ 
    event.preventDefault(); 
    return false; 
});

I (and several others) znaleźć tego API, aby być dziwne i sprzeczne z intuicją, ale to ma zapobiec contentEditable od otrzymania przeciągnięty treści we wszystkich przeglądarkach z wyjątkiem IE8 (w tym IE9 beta). Na razie nie mogę zapobiec akceptacji contentu przez IE8.

Zaktualizuję tę odpowiedź, jeśli znajdę sposób na zrobienie tego.

Źródło

2010-10-13 18:49:32 brad

To nie działa na FF/Chrome –

pracował w Chrome dla mnie. – user984003

Zapobieganie dragorze nie działa na mnie w FF/Chrome @ Mac. Zapobieganie spadkowi nie. – Reinmar

Czy można wyłączyć wszystkie mousedown zdarzenia na obrazie?

$('img').on('mousedown', function(){ 
    return false; 
});

Źródło

2013-09-25 14:01:53 Dries

znalazłem, że muszę ustawić dropEffect do „none” zarówno dragenter i dragover odrzucić przeciągania. Jeśli nie wiążą dragenter, kursor będzie migać, gdy przeciągnij wchodzi element, więc kod byłoby:

<div contenteditable="true" ondragenter="event.preventDefault(); event.dataTransfer.dropEffect = 'none'" ondragover="event.preventDefault(); event.dataTransfer.dropEffect = 'none'">This is editable content</div> 
 
<span>This is not editable content</span> 
 
<img src="bookmark.png" title="Click to do foo" onclick= "foo()">

Źródło

2015-04-02 07:29:49

ContentEditable DIV - wyłączanie przeciągania i upuszczania

Odpowiedz

Powiązane problemy