ordenable con texto seleccionable

Question

¿Es posible tener elementos ordenables, pero aún así permitir a los usuarios copiar/pegar el texto dentro de los elementos?

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

que puede fácilmente hacer:

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

Esto permitirá que seleccione el texto en el navegador y copiar/pegar si quiero. Sin embargo, esto también hace que la persona no pueda arrastrar/soltar. Por lo tanto, creo que lo que me gustaría es comenzar con la cancelación, pero si el mouse sale una cierta distancia fuera del contenedor, los pseudo-sortables ya no se cancelan. ¿Tiene sentido?

Si esto no es posible, mi última opción sería aplicar un disparador que cambie los contenedores entre ordenable y no ordenable, para que puedan seleccionar el texto, pero preferiría minimizar los clics en la interfaz de usuario.

Answer 1

¿Qué hay de poner el texto en un <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" 
}); 

Inténtelo aquí: http://jsfiddle.net/6uXx8/

Answer 2

Intente agregar handle. La idea es que solo pueda comenzar a arrastrar el elemento desde el controlador, que podría ser, por ejemplo, un icono dentro del elemento.