2

jQuery 1.8.3 と jQuery UI 1.9.2 を使用しています。
私の Web アプリケーションにはドラッグ可能な要素がいくつかあり、ユーザーが含まれている要素内のテキストを選択できるようにしたいと考えています。
このトピックに関する他の質問があるのを見てきました。
私がたどっているもう 1 つの方法は、マウスの右クリックを使用し、見つけたテキスト選択プラグインを使用することです。それでも私はそれを機能させることはできません。

ドラッグ可能/並べ替え可能な要素では、テキストの選択が許可されていないか、マウス (クリック) イベントをインターセプトできるようです。

何か案は？

4

2 に答える 2

2

あなたのアプローチは正しく、右クリックを使用して特定の div からテキストをコピーできると思います。

例:

<script src="http://cachedcommons.org/cache/zero-clipboard/1.0.7/javascripts/zero-clipboard-min.js" type="text/javascript"></script>
<div id="dragme" class="temp">Draggable Text</div>

jquery-ui を含めるだけでなく、次の JavaScript では、左クリックを使用して div をドラッグ アンド ドロップし、右クリックして div 内のテキストをコピーできるようにする必要があります。

$("#dragme").draggable();

$.event.special.rightclick = {
    bindType: "contextmenu",
    delegateType: "contextmenu"
};

ZeroClipboard.setMoviePath('http://zeroclipboard.googlecode.com/svn/trunk/ZeroClipboard10.swf');
//Create a new clipboard client
var clip = new ZeroClipboard.Client();

$(document).on("rightclick", ".ui-draggable", function() {

        //Grab the text from the parent row of the icon
        var txt = $(this).text();
        alert("Copying text: "+txt);
        clip.setText(txt);
        clip.glue(this);

        //Add a complete event to let the user know the text was copied
        clip.addEventListener('complete', function(client, text) {
            alert("Copied text to clipboard:\n" + text);
        });
        clip.hide();
        return false;
});

これにはjsfiddleがありますが、ZeroClipboardを使用したSWFコピーはjsfiddleに同意しないと思います。
ただし、開発環境では機能するはずです。

于 2012-11-28T23:01:39.987 に答える
1

子要素がテキストを選択するために on mouseenter イベントを使用して、親要素からドラッグ可能なクラスを削除します。次に、子要素に on mouseleave を使用して、親要素にドラッグ可能なクラスを再度追加します。

于 2016-09-06T04:30:03.220 に答える