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

对于不支持dataTransfer方法的低于10的IE版本，我发现了另一种有点hacky方法来实现这项工作。

基本上你用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和所有现代浏览器）

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

可以从浏览器拖动的隐藏文字？

2 个答案: