Versteckter Text, der aus dem Browser gezogen werden kann?

Question

Wie können Sie ein HTML-Element erstellen, das, wenn es aus dem Browser in einen Texteditor gezogen wird, versteckter Text auf oder in dem gezogenen Element in den Editor eingefügt wird?

Mein erster Gedanke war, das href-Attribut auf dem Anker-Tag zu verwenden:

<a href="hidden message text here">Drag me into a text editor!</a> 

Dies funktioniert gut in Chrom, aber Firefox und Safari Leerzeichen entfernen vom href Wert, der die kopierte Nachricht unbrauchbar macht.

Irgendwelche Ideen?

Answer 1

Anstatt das Standardverhalten des Browsers zum Ziehen von Text/Links/Bildern zu ändern, möchten Sie die Daten im Ereignis dragstart auf einen beliebigen Wert setzen.

Verwenden Sie zum Beispiel den Text aus einer versteckten #content:

$('[draggable]').on('dragstart', function(e) { 
    var content = $(this).find('#content').text(); // Can be anything you want! 
    e.originalEvent.dataTransfer.setData('text/plain', content); 
    $(this).addClass('dragging'); 
}); 

hier ein JSFiddle arbeiten

Answer 2

Für Versionen von IE unter 10, die die Daten-Transfer-Methode nicht unterstützen, habe ich entdeckt, ein weiterer etwas hacky Weg, um dies zu arbeiten.

Grundsätzlich machen Sie Text unsichtbar mit CSS und verwenden Sie dann js, um es im Hintergrund bei Hover auswählen.

HTML

<div id="drag_area" draggable="true"> 
    <div id="text"> 
     hidden text 
    </div> 
</div>​ 

CSS

#text { filter:alpha(opacity=0); opacity:0; 
     overflow:hidden; z-index:100000; width:180px; height:50px } 

JS

function selectText(elementID) { 
     var text = document.getElementById(elementID); 
     if ($.browser.msie) { 
      var range = document.body.createTextRange(); 
      range.moveToElementText(text); 
      range.select();   
     } else if ($.browser.mozilla || $.browser.opera) { 
      var selection = window.getSelection(); 
      var range = document.createRange(); 
      range.selectNodeContents(text); 
      selection.removeAllRanges(); 
      selection.addRange(range); 
     } else { 
      var selection = window.getSelection(); 
      selection.setBaseAndExtent(text, 0, text, 1); 
     } 
    } 
    $('#drag_area').hover(function(){ 
     selectText('text'); 
    }); 

Hier wird mit Anson-Lösung und ein kleines Feature Erkennung kombiniert: http: // jsfiddle .net/zaqx/PB6XL/ (funktioniert in IE8, IE9 und allen modernen Browsern)

EDIT: Fiddle in den Kommentaren unten aktualisiert.