LeftyX LeftyX - 1 year ago 99
jQuery Question

jQuery UI draggable and text selection

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 Source

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:


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

//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);

        //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);
        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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download