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

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

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

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

这在chrome中非常有效，但firefox和safari会从href值中删除空格，从而导致复制的消息无法使用

---

有什么想法吗？

您希望在

dragstart

事件中将数据设置为任意值，而不是操纵浏览器拖动文本/链接/图像的默认行为

例如，使用隐藏内容中的文本：

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

---

这里有一个工作

对于10以下不支持数据传输方法的IE版本，我发现了另一个有点黑客的方法来实现这一点

基本上，您可以使用css使文本不可见，然后使用js在悬停的背景中选择它

HTML

​ JS

在这里，它与Anson的解决方案和一点功能检测相结合： http://jsfiddle.net/zaqx/PB6XL/ （适用于IE8、IE9和所有现代浏览器）

---

编辑：在下面的评论中更新了Fiddle。

在将字符串放入href之前，您是否尝试过对字符串进行URI编码？不确定如何拖动，但复制和粘贴可以使用JS。看看这个JSFIDLE：可能会有帮助吗？@andrew URI encoding将空格替换为%20，这不是非常有用。@ReLeaf有趣的想法，我认为解决方案可能就是这样或类似的，再加上监听拖动事件：很棒的解决方案。非常感谢。提出了一个在IE8、IE9中运行良好的回退方案，并将其添加为下面扩展代码的另一个答案。感谢分享更完整的答案！谢谢你添加这个。考虑用特征检测代替浏览器检测，如<代码>（文档.Boo.CealTeExTange）< /C>。这将验证您的代码，因为将来的浏览器版本可能会提供不同的方法。请参阅这些方法中的一个。很棒的文章。以下是根据您的建议更新的小提琴：在IE8、IE9、Opera、Chrome、FF、Safari中测试

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

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