Sortable w/ Selectable Text

Question

Is it possible to be able to have sortable elements, but still allow users to copy/paste the text inside the elements?

<div class="sortable">
   <div class="pseudo-sortable">Foo</div>
   <div class="pseudo-sortable">Bar</div>
   <div>other stuff that i don't care if a user 
        can't copy (maybe images or buttoms)</div>
</div>

I can easily do:

$('.sortable').sortable({cancel: '.pseudo-sortable'});

This will allow me to select the text in the browser and copy/paste if I want. However, this also makes it so that the person can't drag/drop. So I think what I'd like is to start off with the cancel but if the mouse goes a certain distance outside the container, then the pseudo-sortables are no longer canceled. Does that make sense?

If this is not possible my last option would be to apply a trigger that switches containers between sortable and non-sortable, so that they can select the text, but I'd prefer to minimize ui clicks.

Answer 1

What about putting your text in a <span>?

HTML

<ul id="sortable">
    <li><span>Item 1</span></li>
    <li><span>Item 2</span></li>
    <li><span>Item 3</span></li>
    <li><span>Item 4</span></li>
    <li><span>Item 5</span></li>
    <li><span>Item 6</span></li>
    <li><span>Item 7</span></li>
</ul>

jQuery

$("#sortable").sortable({
    revert: true,
    cancel: "#sortable li span"
});

Try it here: http://jsfiddle.net/6uXx8/

Answer 2

Try adding a handle. The idea is that you can only start dragging the item from the handle, which could be, for example, an icon inside the element.