Question

我正在使用jQuery 1.8.3和jQuery UI 1.9.2 我的Web应用程序有一些可拖动的元素，我想允许用户在包含的元素中选择一些文本我已经看到关于这个话题还有其他一些问题我跟随的另一条路径是使用鼠标右键单击并使用我找到的一些文本选择插件。我仍然无法使其发挥作用。

可拖动/可排序元素似乎不允许文本选择或拦截鼠标（点击）事件。

有什么想法吗？

Answer 1

我相信您的方法是正确的，您可以使用右键单击来复制某些div中的文本。

E.g。用：

<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不一致。
但它应该适用于您的开发环境。

Answer 2

使用mouseenter事件从父元素中删除可拖动类，以便子元素选择文本。然后使用mouseleave为子元素重新添加父元素上的可拖动类。

jQuery UI可拖动和文本选择

2 个答案: