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.

score 19 · Accepted Answer · answered Nov 12 '10 at 19:50

19

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/

answered Nov 12 '10 at 19:50

tinifni

2,372
18
15

So, this allows for the text to be selectable, but not draggable. What I like is for it to be selectable, but it turns into draggable after a certain distance (~100px) outside the container box. – vol7ron Nov 12 '10 at 21:01
What I wanted wasn't easily possible, so I guess this would be the best answer – vol7ron Feb 14 '13 at 13:41

score 1 · Answer 2 · answered Nov 12 '10 at 17:36

1

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.

answered Nov 12 '10 at 17:36

cambraca

27,014
16
68
99

I know that's possible, but I want the whole content, text included, to be draggable. Only, I want it so that the text is also copy/pasteable. So applying a min-distance move before the element becomes draggable if gripped by text. – vol7ron Nov 12 '10 at 18:27
You want a lot ;) but seriously, I stronly suggest you decide whether the text is selectable or draggable; doing both seems awkward and users will be confused IMO. – cambraca Nov 12 '10 at 20:51
Yes, this is something a little more advanced, to reduce the number of mouse clicks. Currently, I have a lock/unlock button that switches the class between draggable and non-draggable, which works. Just trying to reduce those mini-buttons and make everything better. – vol7ron Nov 12 '10 at 20:58
Sorry I never got back to you, I don't have a page available to show. The only thing I could liken it to is iGoogle (or any draggable/sortable widget). Instead of having a handle, I want it so that a user can click anywhere inside to drag, however, I also want the text to be copyable. It's confusing, but to a user, it would be better. – vol7ron Jun 26 '11 at 19:03

Sortable w/ Selectable Text

2 Answers2