javascript - 可以从浏览器中拖动的隐藏文本？

Question

如何创建一个 html 元素，当从浏览器拖动到文本编辑器时，拖动元素上或拖动元素中的隐藏文本将粘贴到编辑器中？

我的第一个想法是在锚标签上使用 href 属性：

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

这在 chrome 中效果很好，但是 firefox 和 safari 会从 href 值中删除空格，这会使复制的消息无法使用。

有任何想法吗？

Answer 1

您不想操纵浏览器拖动文本/链接/图像的默认行为，而是希望将数据设置为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

Answer 2

对于 10 以下不支持 dataTransfer 方法的 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 }

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

这里结合了 Anson 的解决方案和一点特征检测：http: //jsfiddle.net/zaqx/PB6XL/ （适用于 IE8、IE9 和所有现代浏览器）

编辑：在下面的评论中更新了小提琴。