Drag-and-Drop auf contentEditable Elemente

StackOverflow https://stackoverflow.com/questions/3006623

Frage

Es gibt zahlreiche WYSIWYG-Editoren im Internet zur Verfügung, aber ich bin noch ein, dass Geräte eine gewisse Form von Drag-and-Drop-Implementierung zu finden.

Es ist leicht, den eigenen Editor zu erstellen, aber ich möchte den Benutzer zu ziehen Elemente in der Lage sein (dh. Token) von außerhalb des editierbaren Bereich und haben sie es an einem Ort ihrer Wahl in den editierbaren Bereich fallen.

Es ist leicht zu injizieren html an einer bestimmten Stelle eines bearbeitbaren Elements, aber wie bestimmt eine, wo sollte die caret sein, wenn der Benutzer ein DIV über ein Element in dem editierbaren Bereich ziehen. Um noch besser zu veranschaulichen, was ich versuche das folgende Szenario zu erklären, sehen.

Der editierbare Bereich (entweder ein IFRAME im Bearbeitungsmodus oder ein DIV mit seinem contentEditable Attribute auf true) bereits enthält den folgenden Text:

"Lieber, bitte beachten Sie ...."

Der Benutzer zieht nun ein Element, was etwa Token aus einer Liste von Elementen, über den bearbeitbaren Bereich, die Cursor über den Text zu bewegen, bis die gerade vor dem Komma erscheint Caret (,) in dem Text, wie oben gezeigt. Wenn der Benutzer an dieser Stelle die Maustaste los, HTML injiziert werden, die in etwa wie folgt führen:

"Lieber {UserFirstName}, bitte beachten Sie ...".

Ich weiß nicht, ob jemand jemals etwas ähnlich wie dies geschehen ist, oder zumindest wissen, wie man über das Tun dies mit JavaScript gehen.

Jede Hilfe wird sehr geschätzt.

War es hilfreich?

Lösung

Dies ist mein Ansatz, um die Ausgabe von benutzerdefinierten Drag-Elementen auf editierbare Elemente zu lösen. Das große Problem ist, dass man nicht den Text des Mauszeigers Offset bestimmen kann, wenn sie über das bearbeitbare Element schweben. Ich habe versucht, einen Mausklick fälscht den Cursor an die gewünschte Position zu setzen, aber das hat nicht funktioniert. Selbst wenn es so wäre, würde man nicht visuell die Platzierung des caret sieht beim Ziehen, sondern nur der daraus resultierende Rückgang.

Da eine Maus über Ereignisse zu Elementen und nicht Text-Knoten binden kann, kann man das bearbeitbare Element gesetzt vorübergehend nicht bearbeitet werden. Alle Elemente und wickeln Sie jeden Text-Knoten in einer Spanne, um nicht den Fluss des Textes zu brechen. Jeder Bereich sollte einen Klassennamen gegeben werden, damit wir sie wieder finden kann.

Nach der Verpackung, sollte man wieder alle die verpackten Text-Knoten finden und jedes Zeichen mit einer anderen Spanne mit einem Klassennamen wickelt, dass man sie wieder finden kann.

Mit einer Veranstaltung Delegation kann ein Ereignis in das Haupt bearbeitbare Element hinzufügen, um einen Stil zu jedem Zeichen Spannweite gilt, die die Cursor angezeigt werden, ein blinkende GIF-Bild als Hintergrund.

Auch Ereignis Delegation verwenden, sollte man ein Ereignis für das Maus-up-Ereignis (Drop-Ereignis) auf jedem Charakter. Man kann nun den Offset unter Verwendung der Zeichen Span Position (Offset) innerhalb der übergeordneten (gewickelten Text-node) bestimmen. Man kann rückgängig gemacht werden jetzt alle die Verpackung, einen Verweis auf die Beibehaltung berechnet versetzt und während Lösen der Verpackung einen Verweis auf den geltenden Text-Knoten zu halten.

Mit den Bereich & Auswahlobjekte des Browsers kann man nun die Auswahl stellen Sie den berechneten Offset auf den geltenden Text-Knoten und inject der erforderlichen HTML an der neu eingestellten Auswahl (Cursor-Position) mit, et Viola!

Hier folgt ein Ausschnitt jQuery verwenden, die textnodes finden, wickeln Sie sie: 

editElement.find("*:not(.text-node)").contents().filter(function(){ 
    return this.nodeType != 1;
}).wrap("<span class=\"text-node\"/>");

Um jeden Text-Knoten zu finden und jedes Zeichen wickeln, zu verwenden: 

editElement.find(".text-node").each(function()
{
    var textnode = $(this), text = textnode.text(), result = [];

    for (var i = 0; i < text.length; i++) result.push(text.substr(i, 1));

    textnode.html("<span class=\"char\">" 
        + result.join("</span><span class=\"char\">") + "</span>");
});

die Verpackung rückgängig zu machen: 

editElement.find(".text-node").each(function()
{
    this.parentNode.replaceChild(document.createTextNode($(this).text()), this);
});

Hope dieser Ansatz hilft diese mit ähnlichen Herausforderungen

Andere Tipps

Wenn ich verstehe, was Sie sagen, dann ist dies nur einfacher Drag & Drop. Die Lösung unten sollte für FIREFOX auf die beste Antwort nahe sein. Ich bin sicher, es gibt verschiedene Funktionen für den Internet Explorer. Zum http://www.html5rocks.com/en/tutorials/dnd/basics/ für mehr Hilfe.

Stellen Sie das „ziehbar“ Attribut des Objekts, das Sie ziehen möchten, und das Objekt des „onDragStart“ Methode „drag“ gesetzt oder was auch immer Ihre Funktion aufgerufen wird. 

// You can set this to 'text/plain' if you don't want to insert HTML content
var internalDNDType = 'text/html';

function dragStartHandler(event) {
  // This is whatever html data you want to insert.
  var textContent = "<b>"+userFirstName+"</b>";

  event.dataTransfer.setData(internalDNDType, textContent);
  event.dataTransfer.effectAllowed = 'copy';
}

function dragEnterHandler(event)
{
  event.preventDefault();
  return false;
}

function dragOverHandler(event)
{
  event.preventDefault();
  return false;
}

function dropHandler(event) {
  event.preventDefault();
  event.stopPropogation();
  return false;
}

Zur Zeit ein HTML5-API entwickelt wird, dies zu tun, aber leider nicht IE unterstützt es nicht Edit:. Offenbar IE tut tatsächlich unterstützt Drag & Drop, aber ich bin nicht sehr vertraut mit, wie Es klappt. Versuchen Sie googeln "IE drag and drop".

Versuchen Sie an diesen Stellen suchen:

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top