[Summary view] [Print] [Text view]

   1  <div class="sortable-container">
   2  
   3      <div id="example1">
   4  
   5          <button onclick="$('#selectedUsers').sortable('enable')" type="button">Enable</button>
   6          <button onclick="$('#selectedUsers').sortable('disable')" type="button">Disable</button>
   7          <button onclick="alert($('#selectedUsers').sortable('serialize'))" type="button">Serialize!</button>
   8          <button onclick="alert($('#selectedUsers').sortable('toArray'))" type="button">ID's to Array!</button>
   9  
  10          <br><br>
  11  
  12          <div id="sortable-ex" style="min-height: 110px; min-height:110px; height: auto !important;">
  13  
  14              <div style="float: left;">
  15                  Selected users
  16                  <ul id="selectedUsers" style="cursor: hand; cursor: pointer;">
  17                      <li id='user_Susan'>Susan</li>
  18                      <li id='user_Beth'>Beth</li>
  19                      <li id='user_Bob'>Bob</li>
  20                      <li id='user_Edward'>Edward</li>
  21                      <li id='user_Kate'>Kate</li>
  22                  </ul>
  23              </div>
  24  
  25              <div style="float: left; margin-left: 50px;">
  26                  User list
  27                  <ul id="userList" style="cursor: hand; cursor: pointer;">
  28                      <li id='user_Jack'>Jack</li>
  29                      <li id='user_John'>John</li>
  30                      <li id='user_Marry'>Marry</li>
  31                      <li id='user_Claire'>Claire</li>
  32                      <li id='user_Daniel'>Daniel</li>
  33                  </ul>
  34              </div>
  35  
  36              <br style="clear: both;">
  37  
  38          </div>
  39      </div>
  40  </div>