<link rel="stylesheet" title="Sunburst" href="http://code.riiv.net/assets/styles/sunburst.css">
<script type="text/javascript" src="http://code.riiv.net/assets/scripts/jquery-1.2.6.pack.js"></script><script type="text/javascript" src="http://github.com/raid-ox/chain.js/tree/v0.1-stable/build/chain.js?raw=true"></script><script type="text/javascript" src="http://github.com/raid-ox/interaction.js/tree/v0.1-stable/build/interaction.js?raw=true"></script><script type="text/javascript" src="http://code.riiv.net/assets/scripts/jquery-noconflict.js"></script><p style="background:#eee; padding:4px 2px;">[[Demos]] > <strong>Multiple Sortable</strong></p>
<p>Try to drag an item to the other list.</p>
<div style="background:#DCE9F4;padding:0.5em;margin-bottom:1em;">
<div style="background:white;float:left;width:250px;color:#444;border:1px solid #BBB;" class="sortable" id="demo-sortable1">
<div style="text-align:left;cursor:default;width:240px;background:#DCE9F4;padding:4px;margin:1px;" class="item"><span class="first">First</span> <span class="last">Last</span></div>
</div>
<div style="background:white;float:left;margin-left:10px;width:250px;color:#444;border:1px solid #BBB;" class="sortable" id="demo-sortable2">
<div style="text-align:left;cursor:default;width:240px;background:#BCFFBA;padding:4px;margin:1px;" class="item"><span class="last">Last</span>, <span class="first">First</span></div>
</div>
<div style="clear:both;"> </div>
</div>
<style>
<p>#interaction-draggable-container {border:1px solid #<span class="caps">BBB</span>;background:white;}</p>
</style>
<h3>Source</h3>
<pre>
<code class="html"><div class="sortable" id="demo-sortable1">
<div class="item"><span class="first">First</span> <span class="last">Last</span></div>
</div>
<div class="sortable" id="demo-sortable2">
<div class="item"><span class="last">Last</span>, <span class="first">First</span></div>
</div>
</code></pre>
<pre>
<code class="javascript">$('#sortable1')
.items([
{first:'Isaac', last:'Newton'},
{first:'Johannes', last:'Keppler'},
{first:'Alessandro', last:'Volta'},
{first:'Blaise', last:'Pascal'}
])
.sortable({accept:'sortable'})
.chain();
$('#sortable2')
.items([
{first:'Isaac', last:'Newton'},
{first:'Johannes', last:'Keppler'},
{first:'Alessandro', last:'Volta'},
{first:'Blaise', last:'Pascal'}
])
.sortable({accept:'sortable'})
.chain();
</code></pre>
<script type="text/javascript" src="http://code.riiv.net/assets/scripts/wiki-interaction.js"></script><script type="text/javascript">MyJQ(function(){demo.multipleSortable();});</script><script type="text/javascript" src="http://code.riiv.net/assets/scripts/highlight.js"></script>
2008-08-18T02:03:40-07:00
46386
demo-multiple-sortable
42065
Demo: Multiple Sortable
2008-09-16T09:15:18-07:00
20353