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.
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/
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With