ContentEditable DIV - deaktivieren der drag-and-drop

Ist es möglich, deaktivieren Sie die drag-und-drop-Funktion auf die Elemente, die das contentEditable-Attribut auf true festgelegt.

Habe ich die folgende HTML-Seite.

<!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>

Das Hauptproblem, das ich bin vor ist, dass es möglich ist, per drag-and-drop das Bild in das DIV und es kopiert wird (zusammen mit dem Titel und den click-handler)

InformationsquelleAutor der Frage sonofdelphi | 2010-06-13

26

Dem folgenden snippet wird verhindern, dass deine div-Empfang geschleppt Inhalt:
```
jQuery('div').bind('dragover drop', function(event){
    event.preventDefault();
    return false;
});
```
Ich (und einige andere) finden diese api ist merkwürdig und counter-intuitive, aber es verhindert eine contenteditable, die von der empfangenden gezogen, der Inhalt in allen Browsern außer dem IE8 (einschließlich IE9 beta). Als der noch, ich kann nicht verhindern, dass der IE8 von der Annahme contenteditable.

Werde ich aktualisieren diese Antwort, wenn ich einen Weg finden, dies zu tun.

InformationsquelleAutor der Antwort brad
3

Interessant, ich weiß nicht, die drag-and-drop-Schnittstelle gut genug, um sicher zu sein, aber es sieht aus wie es irgendeine Art von Fehler hier. Ich veränderte Sie Ihren code leicht zu fügen Sie einen Ereignishandler für das Ereignis drop auf die editierbaren div:
```
<!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>
```
Ich Teste in Firefox 3.7 alpha: wenn ich ziehen Sie das Bild auf der Mitte der text, der das Ereignis ausgelöst wird, bekomme ich eine Warnung, und die return false Stoppt das Bild gelöscht wird. Aber wenn ich ziehen Sie auf, um den Anfang des Textes, die Ereignis nicht ausgelöst, aber das Bild wird eingefügt in die div. Wohlgemerkt, in Firefox 3.6 und Chrom 6.0 das Ereignis nicht ausgelöst, also entweder ich habe komplett falsch verstanden wie es funktioniert oder gar nichts, es funktioniert gut genug, jetzt zu verlassen.

InformationsquelleAutor der Antwort robertc
2

In Chrome und Firefox, Sie haben zum Abbrechen der ondragover Ereignis für die ondrag - Ereignis ausgelöst. Ich würde auch empfehlen, den Abbruch des ondragenter und ondragleave Veranstaltungen nur um sicher zu sein.

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>
```
Dieses Verhalten ist kein bug; in der HTML5-Spezifikation sagt, dass ondragover muss abgebrochen werden, für ondrag Feuer. Es macht keinen Sinn, es zu tun auf diese Weise, so hoffe ich, ändern Sie es bald. Sehen http://www.quirksmode.org/blog/archives/2009/09/the_html5_drag.html

InformationsquelleAutor der Antwort Na7coldwater
0

Wäre es möglich, deaktivieren Sie alle mousedown-events auf dem Bild?
```
$('img').on('mousedown', function(){
    return false;
});
```
InformationsquelleAutor der Antwort Dries

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.