Question

I am using jQuery 1.8.3 and jQuery UI 1.9.2.
My web application has got some draggable elements and I would like to allow the user to select some text in the contained elements.
I’ve seen there are some other questions on this topic.
Another path I am following is use the right-click of the mouse and use some text-selection plug-in I have found.
Still I can’t make it work.

It seems that draggable/sortable elements don’t allow text selection or can intercept mouse (clicks) events.

Any ideas?

Answer 1

I believe your approach is correct and that you can use right-click to copy the text from certain divs.

E.g. with:

<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>

as well as including jquery-ui, the following JavaScript should allow you to use left-click to drag and drop a div, and right-click to copy the text within the 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;
});

I have a jsfiddle for this but I think the SWF copy with ZeroClipboard doesn’t agree with jsfiddle.
But it should work in your development environment.