This is the first list

And now the second list

Note: you can drag-and-drop between lists as well. 


<div style="height:200px;">
<div style="float:left;">
<h3>This is the first list</h3>
 <ul class="sortabledemo" id="firstlist" style="height:150px;width:200px;">
   <li class="green" id="firstlist_firstlist1">Item 1 from first list.</li>
   <li class="green" id="firstlist_firstlist2">Item 2 from first list.</li>
   <li class="green" id="firstlist_firstlist3">Item 3 from first list.</li>
 </ul>
</div>
 <div style="float:left;">
 <h3>And now the second list</h3>
 <ul class="sortabledemo" id="secondlist" style="height:150px;width:200px;">
   <li class="orange" id="secondlist_secondlist1">
     <span class="handle">DRAG HERE</span> Item 1 from second list.
   </li>
   <li class="orange" id="secondlist_secondlist2">
     <span class="handle">DRAG HERE</span> Item 2 from second list.
   </li>
   <li class="orange" id="secondlist_secondlist3">
     <span class="handle">DRAG HERE</span> Item 3 from second list.
   </li>
 </ul>
</div>
</div>

 <script type="text/javascript">
 // <![CDATA[
   Sortable.create("firstlist",
     {dropOnEmpty:true,containment:["firstlist","secondlist"],constraint:false});
   Sortable.create("secondlist",
     {dropOnEmpty:true,handle:'handle',containment:["firstlist","secondlist"],constraint:false});
 // ]]>
 </script>

note:

The script tag that encloses the Sortable.create function calls needs to occur after all of the lists that you intend to use. IE.. in this example if you were place the “Sortable.create(“firstlist”...);” call immediately after that list (and before the second list) you would only be able to drag from list 1 to list 2 and not from list 2 to list 1.

The easiest way avoid this is just to call all of your Sortable.creates in the same script tag near the end of your page.

Ruby on Rails Single List M[V]C


# view
<ul id="list">
  <% 6.times do |i| -%>
  <li id="item_<%= i+1 %>">I'm number <%= i+1 %></li>
  <% end -%>
</ul>

<p id="list-info"></p>

<%= sortable_element 'list', 
      :update => 'list-info',  
      :complete => visual_effect(:highlight, 'list'), 
      :url => { :action => "order" } %>

# controller
def order
  params[:list].each_with_index { |id,idx| Model.update(id, :position => idx) }
  render :text => 'Updated sort order'
end

Other demonstrations of Sortable lists