可以從瀏覽器中拖動的隱藏文字？

如何創建一個HTML元素，當從瀏覽器拖動到文本編輯器中時，拖動元素上或上的隱藏文本將被粘貼到編輯器中？可以從瀏覽器中拖動的隱藏文字？

我首先想到的是使用href屬性錨標記：

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

此工程在鉻很大，但Firefox和Safari來自這使得複製信息不可用href值中的空格。

任何想法？

來源

2012-11-28 Zaqx

在將它放入href之前，您是否嘗試過對字符串進行URI編碼？ –

不知道如何做拖動，但複製和粘貼與JS工作。看看這個jsFiddle：http://jsfiddle.net/jRXMf/也許這將有助於？ – ReLeaf

@andrew URI編碼會用％20替換空格，這不是非常有用。 – Zaqx

您不希望操縱瀏覽器拖動文本/鏈接/圖像的默認行爲，而是要將數據設置爲dragstart事件中的任意值。

例如，使用從一個隱藏#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'); 
});

下面是一個工作JSFiddle

來源

2012-11-28 20:17:05 Anson

真棒解決方案。謝謝！ – Zaqx

想出了一個可以在IE8，IE9中運行良好的回退功能，並將其作爲下面擴展代碼的另一個答案添加到此處。 – Zaqx

感謝您分享更完整的答案！ – Anson

對於低於10 IE版本不支持的數據傳遞方法，我發現另一個有點冒險的方式來完成這項工作。

基本上你用css使文本不可見，然後使用js在懸停的背景中選擇它。

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 }

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

這與安森的解決方案和一個小功能的檢測相結合： ~~HTTP：//的jsfiddle .net/zaqx/PB6XL/~~ （適用於IE8，IE9和所有現代瀏覽器）

編輯：更新小提琴在下面的評論。

來源

2012-11-29 03:57:53 Zaqx

感謝您的加入。考慮用功能檢測替換瀏覽器檢測，例如'if（document.body.createTextRange）'。由於未來的瀏覽器版本可能會提供不同的方法，因此這將會驗證您的代碼。參見[Nicholas Zakas的詳細比較]（http://www.nczonline.net/blog/2009/12/29/feature-detection-is-not-browser-detection/）這些方法。 – Anson

真棒文章。以下是根據您的建議更新的小提琴：http：// jsfiddle。net/zaqx/PB6XL/7 /測試IE8，IE9，Opera，Chrome，FF，Safari – Zaqx

可以從瀏覽器中拖動的隱藏文字？

回答

相關問題