make Sortable items selectable?

Currently in the examples (as well as in my own tests), the Sortable items cannot be selected.

My use case is to combine in-place-edit and selectable.

This is as close to a test case as I can get:

<!DOCTYPE html>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Listed - courses</title>
<link href='/css/simple.css' rel='stylesheet' type='text/css'/>
<link href='/css/sortable.css' rel='stylesheet' type='text/css'/>
<script src="/js/right.js"></script>
<script src="/js/right-sortable.js"></script>
<script src="/js/right-in-edit.js"></script>

<h1>courses</h1>

  <img id="spinner" src="/images/spinner.gif" style="position: absolute; display: none;"></img>
  <ul class='sortable' data-sortable='{itemCss:"li.item", handleCss: "span.handle", url: "http://localhost:9292/items/%{id}", Xhr: {spinner: "spinner"}}'>

       <li class='item' id='88'>
       <span id='item88'>chocolat (p.ex. lindt extra fondant)</span>
       <div class='item_ops'>

         <span class='status'>
           [new]
         </span>
         <a href="#" onclick="$('item88').inEdit({url: "http://localhost:9292/items/88", Xhr: {spinner: "spinner"}}); return false;">Edit</a>
         <span class='delete'>
           <form action="/items/88/delete" method="post">
             <input type="submit" value="Delete">
           </form>
         </span>
         <span class='handle'>&equiv;</span>

       </div>
      </li>

       <li class='item' id='83'>
       <span id='item83'>fondue au chocolat</span>
       <div class='item_ops'>
         <span class='status'>
           [new]
         </span>
         <a href="#" onclick="$('item83').inEdit({url: "http://localhost:9292/items/83", Xhr: {spinner: "spinner"}}); return false;">Edit</a>

         <span class='delete'>
           <form action="/items/83/delete" method="post">
             <input type="submit" value="Delete">
           </form>
         </span>
         <span class='handle'>&equiv;</span>
       </div>
      </li>

       <li class='item' id='87'>

       <span id='item87'>chocolat de cuisine</span>
       <div class='item_ops'>
         <span class='status'>
           [new]
         </span>
         <a href="#" onclick="$('item87').inEdit({url: "http://localhost:9292/items/87", Xhr: {spinner: "spinner"}}); return false;">Edit</a>
         <span class='delete'>
           <form action="/items/87/delete" method="post">

             <input type="submit" value="Delete">
           </form>
         </span>
         <span class='handle'>&equiv;</span>
       </div>
      </li>

 </table>

<form action="/items/create" method="post">
  <div><input type="text" name="text" size="40"></input></div>

  <div><input type="submit" value="Add item"></div>
  <div><input type="hidden" name="parent_list" value="18"></input></div>
</form>
<p><a href="http://localhost:9292/lists">My lists</a></p>
<hr />
<p><a href="http://localhost:9292/">Home</a></p>
<p><a href="http://localhost:9292/">Log out</a></p>