jQuery UI sortable & selectable

Just found this very easy solution from rdworth:

CSS:

ul { width: 300px; list-style: none; margin: 0; padding: 0; }li { background: white; position:relative;margin: 1em 0; padding: 1em; border: 2px solid gray; list-style: none; padding-left: 42px; }li .handle { background: #f8f8f8; position: absolute; left: 0; top: 0; bottom: 0; padding:8px; }.ui-selecting { background: #eee; }.ui-selecting .handle { background: #ddd; }.ui-selected { background: #def; }.ui-selected .handle { background: #cde; }

HTML:

<ul id="list">    <li>Item 1</li>    <li>Item 2</li>    <li>Item 3</li>    <li>Item 4</li>    <li>Item 5</li></ul>

Javascript:

$( "#list" )    .sortable({ handle: ".handle" })    .selectable({ filter: "li", cancel: ".handle" })    .find( "li" )        .addClass( "ui-corner-all" )        .prepend( "<div class='handle'><span class='ui-icon ui-icon-carat-2-n-s'></span></div>" );

See: this fiddle.

http://jsfiddle.net/t9YTB/

This is as much as i can give u :) but the idea is there. its not alllll complete but hopefully u can play about with the values and see how it goes from there :)

Part of my jQuery base-arsenal includes the following, as it's usually annoying when you go to drag something and end up selecting text instead...

// disables text selection on sortable, draggable items $( ".sortable" ).sortable();$( ".sortable" ).disableSelection();

Not sure if you can just flip the "disable" to "enable", but there's my $.02. Without trying it though.. common sense suggests that you may need to define an inactive section within the same "group" element, to provide a "handle" for the drag action.... or else those clicks may relentlessly be mistaken as the intent to select/edit...