Anonymous

<html>
<head>
    <script src="js/prototype.js" type="text/javascript"></script>
    <script src="js/scriptaculous/scriptaculous.js" type="text/javascript"></script>
    <script src="js/scriptaculous/unittest.js" type="text/javascript"></script>
</head>
<body>
<div style="height:200px;">
<div style="float:left;">
<h3>Elementos disponibles</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>Informe final</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>

</body>

</html>