6

ブラウザからテキストエディタにドラッグしたときに、ドラッグした要素の上または中に隠されたテキストがエディタに貼り付けられるhtml要素をどのように作成できますか？

私の最初の考えは、アンカータグでhref属性を使用することでした。

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

これはChromeでうまく機能しますが、firefoxとsafariはhref値からスペースを削除し、コピーされたメッセージを使用できなくします。

何か案は？

4

2 に答える 2

3

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-28T20:17:05.450 に答える
1

dataTransferメソッドをサポートしていない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 }

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、およびすべての最新のブラウザーで動作します）

編集：以下のコメントでフィドルを更新しました。

于 2012-11-29T03:57:53.770 に答える