Tarayıcıdan sürüklenebilen gizli metin?

Question

nasıl bir metin düzenleyiciye tarayıcıdan sürüklenen veya sürüklenen eleman metin gizli zaman editörü yapıştırılabilir olacağı bir html öğesi oluşturabilirim?

ilk düşüncem bağlantı etiketi üzerinde href niteliğini kullanmaktı:

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

Bu krom büyük çalışır, ancak firefox ve safari kopyalanan mesaj kullanılmaz hale getiriyor href değeri boşluk kaldırmak.

Herhangi bir fikrin var mı?

Answer 1

yerine metin/bağlantılar/resimler sürüklenirken için tarayıcının varsayılan davranışını etkilemeye yerine, dragstart olay keyfi bir şeye veri ayarlamak istiyorum.

Örneğin

, gizli #content gelen metni kullanın: dataTransfer yöntemini desteklemeyen 10'un altındaki IE sürümleri için JSFiddle

Answer 2

çalışıyor İşte

$('[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'); 
}); 

, ben keşfettim Bu işi yapmak için başka bir şekilde hacky yolu.

Temel olarak css ile görünmez metin daha sonra vurgulu arka planda seçmek için js kullanmaya dikkat edin.

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'); 
    }); 

İşte

o Anson'ın çözümü ve küçük özellik algılama ile birleştirilir: http: // jsfiddle .net/zaqx/PB6XL/ (IE8, IE9 ve tüm modern tarayıcılarda çalışır)

DÜZENLEME: Aşağıdaki yorumlarda Fiddle güncellendi.