| CARVIEW |
Select Language
HTTP/2 302
server: nginx
date: Sun, 31 Aug 2025 09:31:49 GMT
content-type: text/plain; charset=utf-8
content-length: 0
x-archive-redirect-reason: found capture at 20081223063031
location: https://web.archive.org/web/20081223063031/https://github.com/raid-ox/interaction.js/wikis.atom
server-timing: captures_list;dur=1.345689, exclusion.robots;dur=0.026047, exclusion.robots.policy;dur=0.015655, esindex;dur=0.011452, cdx.remote;dur=7.585588, LoadShardBlock;dur=239.010042, PetaboxLoader3.datanode;dur=167.339290, PetaboxLoader3.resolve;dur=31.421772
x-app-server: wwwb-app201
x-ts: 302
x-tr: 279
server-timing: TR;dur=0,Tw;dur=0,Tc;dur=1
set-cookie: wb-p-SERVER=wwwb-app201; path=/
x-location: All
x-rl: 0
x-na: 0
x-page-cache: MISS
server-timing: MISS
x-nid: DigitalOcean
referrer-policy: no-referrer-when-downgrade
permissions-policy: interest-cohort=()
HTTP/2 200
server: nginx
date: Sun, 31 Aug 2025 09:31:50 GMT
content-type: application/atom+xml; charset=utf-8
content-length: 35002
x-archive-orig-server: nginx/0.6.31
x-archive-orig-date: Tue, 23 Dec 2008 06:30:31 GMT
x-archive-orig-connection: close
x-archive-orig-set-cookie: tender_email=; domain=.github.com; path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT
x-archive-orig-set-cookie: tender_expires=; domain=.github.com; path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT
x-archive-orig-set-cookie: tender_hash=; domain=.github.com; path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT
x-archive-orig-set-cookie: _github_sess=; path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT
x-archive-orig-status: 200 OK
x-archive-orig-x-runtime: 206ms
x-archive-orig-etag: "5dc210e919fcbe773eb0b5f065dd345a"
x-archive-orig-cache-control: private, max-age=0, must-revalidate
x-archive-orig-content-length: 35002
cache-control: max-age=1800
x-archive-guessed-content-type: text/xml
x-archive-guessed-charset: utf-8
memento-datetime: Tue, 23 Dec 2008 06:30:31 GMT
link: ; rel="original", ; rel="timemap"; type="application/link-format", ; rel="timegate", ; rel="first memento"; datetime="Tue, 23 Dec 2008 06:30:31 GMT", ; rel="memento"; datetime="Tue, 23 Dec 2008 06:30:31 GMT", ; rel="last memento"; datetime="Tue, 23 Dec 2008 06:30:31 GMT"
content-security-policy: default-src 'self' 'unsafe-eval' 'unsafe-inline' data: blob: archive.org web.archive.org web-static.archive.org wayback-api.archive.org athena.archive.org analytics.archive.org pragma.archivelab.org wwwb-events.archive.org
x-archive-src: 52_7_20081223053447_crawl103-c/52_7_20081223061334_crawl103.arc.gz
server-timing: captures_list;dur=0.610837, exclusion.robots;dur=0.023251, exclusion.robots.policy;dur=0.014255, esindex;dur=0.010319, cdx.remote;dur=9.245296, LoadShardBlock;dur=210.210900, PetaboxLoader3.datanode;dur=112.617234, PetaboxLoader3.resolve;dur=97.660539, load_resource;dur=126.399963
x-app-server: wwwb-app201
x-ts: 200
x-tr: 385
server-timing: TR;dur=0,Tw;dur=0,Tc;dur=1
x-location: All
x-rl: 0
x-na: 0
x-page-cache: MISS
server-timing: MISS
x-nid: DigitalOcean
referrer-policy: no-referrer-when-downgrade
permissions-policy: interest-cohort=()
accept-ranges: bytes
tag:github.com,2008:/raid-ox/interaction
interaction.js: Recent Wiki Updates
2008-09-16T09:23:12-07:00
tag:github.com,2008:Wiki/46354
2008-08-17T22:59:25-07:00
2008-09-16T09:23:12-07:00
Demos
Tue Sep 16 09:23:12 -0700 2008
<h2>Simple Demos</h2>
<p>Here you can find simple demos of <strong>interaction.js</strong> (with <strong>chain.js</strong> of course). All demos listed are included in release tarball.
<em>Due to a problem in IE, now the demo is loaded <strong>on document ready</strong></em></p>
<ul>
<li>Simple Draggable: <a href="https://github.com/raid-ox/interaction.js/wikis/demo-simple-draggable"> demo</a></li>
<li>Draggable with Droppable: <a href="https://github.com/raid-ox/interaction.js/wikis/demo-draggable-with-droppable"> demo</a></li>
<li>Simple Sortable: <a href="https://github.com/raid-ox/interaction.js/wikis/demo-simple-sortable"> demo</a></li>
<li>Multiple Sortable: <a href="https://github.com/raid-ox/interaction.js/wikis/demo-multiple-sortable"> demo</a></li>
<li>Draggable, Sortable and Droppable: <a href="https://github.com/raid-ox/interaction.js/wikis/demo-draggable-sortable-and-droppable"> demo</a></li>
<li>Simple Selectable: <a href="https://github.com/raid-ox/interaction.js/wikis/demo-simple-selectable"> demo</a></li>
<li>Selectable with linking: <a href="https://github.com/raid-ox/interaction.js/wikis/demo-selectable-with-linking"> demo</a></li>
<li>Multiple Selectable with linking: <a href="https://github.com/raid-ox/interaction.js/wikis/demo-multiple-selectable-with-linking"> demo</a></li>
<li>All services together: <a href="https://github.com/raid-ox/interaction.js/wikis/demo-all-services-together"> demo</a></li>
</ul>
<h2>Interface demo</h2>
<ul>
<li>Tab Interface Demo (and Tutorial): <a href="https://rizqi.namaku.de/2008/08/tab-interface-using-chainjs/">tutorial</a> and <a href="https://code.riiv.net/demos/tabs.html">demo</a></li>
<li>Tree Interface Demo (With Drag and Drop + Sortable): <a href="https://code.riiv.net/demos/tree/">demo</a></li>
</ul>
raid-ox
tag:github.com,2008:Wiki/46537
2008-08-18T11:36:08-07:00
2008-09-16T09:20:45-07:00
Demo: All Services Together
Tue Sep 16 09:20:45 -0700 2008
<link rel="stylesheet" title="Sunburst" href="https://code.riiv.net/assets/styles/sunburst.css">
<script type="text/javascript" src="https://code.riiv.net/assets/scripts/jquery-1.2.6.pack.js"></script>
<script type="text/javascript" src="https://github.com/raid-ox/chain.js/tree/v0.1-stable/build/chain.js?raw=true"></script>
<script type="text/javascript" src="https://github.com/raid-ox/interaction.js/tree/v0.1-stable/build/interaction.js?raw=true"></script>
<script type="text/javascript" src="https://code.riiv.net/assets/scripts/jquery-noconflict.js"></script>
<p style="background:#eee; padding:4px 2px;;"><a href="https://github.com/raid-ox/interaction.js/wikis/demos">Demos</a> > <strong>All Services Together</strong></p>
<p>Try to select multiple items (Ctrl/Apple+click or Shift+click) and drag to the second 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>
#interaction-draggable-container {border:1px solid #BBB;background:white;}
.item.selected {background:#C9D9E9 !important;}
</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'})
.selectable({multiple:true, drag:true})
.chain();
$('#sortable2')
.items([
{first:'Isaac', last:'Newton'},
{first:'Johannes', last:'Keppler'},
{first:'Alessandro', last:'Volta'},
{first:'Blaise', last:'Pascal'}
])
.sortable({accept:'sortable'})
.selectable(multiple:true, drag:true})
.chain();
</code></pre>
<script type="text/javascript" src="https://code.riiv.net/assets/scripts/wiki-interaction.js"></script>
<script type="text/javascript">MyJQ(function(){demo.allTogether();});</script>
<script type="text/javascript" src="https://code.riiv.net/assets/scripts/highlight.js"></script>
raid-ox
tag:github.com,2008:Wiki/46499
2008-08-18T08:57:39-07:00
2008-09-16T09:20:13-07:00
Demo: Multiple Selectable with Linking
Tue Sep 16 09:20:13 -0700 2008
<link rel="stylesheet" title="Sunburst" href="https://code.riiv.net/assets/styles/sunburst.css">
<script type="text/javascript" src="https://code.riiv.net/assets/scripts/jquery-1.2.6.pack.js"></script>
<script type="text/javascript" src="https://github.com/raid-ox/chain.js/tree/v0.1-stable/build/chain.js?raw=true"></script>
<script type="text/javascript" src="https://github.com/raid-ox/interaction.js/tree/v0.1-stable/build/interaction.js?raw=true"></script>
<script type="text/javascript" src="https://code.riiv.net/assets/scripts/jquery-noconflict.js"></script>
<p style="background:#eee; padding:4px 2px;;"><a href="https://github.com/raid-ox/interaction.js/wikis/demos">Demos</a> > <strong>Multiple Selectable with Linking</strong></p>
<p>Click Shift+Click or Ctrl/Apple+Click to select multiple items. Try to edit the fields.</p>
<div style="background:#DCE9F4;padding:8px;margin-bottom:1em;">
<div style="float:left;width:200px;color:#444;border:1px solid #BBB;" id="demo-persons">
<div style="cursor:default;width:190px;background:#DCE9F4;padding:4px;margin:1px;" class="item"><span class="first">First</span> <span class="last">Last</span></div>
</div>
<div style="float:left;margin-left:10px;width:300px;color:#444;border:1px solid #BBB;" id="demo-linker">
<div style="cursor:default;width:290px;background:#BCFFBA;padding:4px;margin:1px;" class="item">
<input style="margin-right: 10px;width:120px;" class="first" type="text" value="First" />
<input style="width:120px" class="last" type="text" value="Last" />
</div>
</div>
<div style="clear:both;"></div>
</div>
<style>
.item.selected {background:#C9D9E9 !important;}
</style>
<h3>Source</h3>
<pre>
<code class="html"><div id="persons">
<div class="item"><span class="first">First</span> <span class="last">Last</span></div>
</div>
<div id="demo-linker">
<div class="item">
<input class="first" type="text" value="First" />
<input class="last" type="text" value="Last" />
</div>
</div>
</code></pre>
<pre>
<code class="javascript">$('#persons')
.items([
{first:'Isaac', last:'Newton'},
{first:'Johannes', last:'Keppler'},
{first:'Alessandro', last:'Volta'},
{first:'Blaise', last:'Pascal'}
])
.selectable({required:true, multiple:true})
.chain();
$('#linker')
.items('link', '#persons', 'selected')
.chain(function(){
var self = this;
this.find(':input').keyup(function(){
self.item({
first: self.find('.first').val(),
last: self.find('.last').val()
})
})
})
</code></pre>
<script type="text/javascript" src="https://code.riiv.net/assets/scripts/wiki-interaction.js"></script>
<script type="text/javascript">MyJQ(function(){demo.multipleSelectableLink();});</script>
<script type="text/javascript" src="https://code.riiv.net/assets/scripts/highlight.js"></script>
raid-ox
tag:github.com,2008:Wiki/46407
2008-08-18T03:37:48-07:00
2008-09-16T09:18:17-07:00
Demo: Selectable with Linking
Tue Sep 16 09:18:17 -0700 2008
<link rel="stylesheet" title="Sunburst" href="https://code.riiv.net/assets/styles/sunburst.css">
<script type="text/javascript" src="https://code.riiv.net/assets/scripts/jquery-1.2.6.pack.js"></script>
<script type="text/javascript" src="https://github.com/raid-ox/chain.js/tree/v0.1-stable/build/chain.js?raw=true"></script>
<script type="text/javascript" src="https://github.com/raid-ox/interaction.js/tree/v0.1-stable/build/interaction.js?raw=true"></script>
<script type="text/javascript" src="https://code.riiv.net/assets/scripts/jquery-noconflict.js"></script>
<p style="background:#eee; padding:4px 2px;;"><a href="https://github.com/raid-ox/interaction.js/wikis/demos">Demos</a> > <strong>Selectable with Linking</strong></p>
<p>Select one of the items and try to type in the textfield</p>
<div style="background:#DCE9F4;padding:8px;margin-bottom:1em;">
<div style="color:#444;border:1px solid #BBB;" id="demo-persons">
<div style="background:#DCE9F4;padding: 0.3em;margin:1px;" class="item"><span class="first">First</span> <span class="last">Last</span></div>
</div>
<div style="margin-top:0.5em; border:1px solid #BBB;" id="demo-linker">
<input style="margin: 0.5em;" class="first" type="text" value="First" />
<input class="last" type="text" value="Last" />
</div>
</div>
<style>
.item.selected {background:#C9D9E9 !important;}
</style>
<h3>Source</h3>
<pre>
<code class="html"><div id="persons">
<div class="item"><span class="first">First</span> <span class="last">Last</span></div>
</div>
<div id="linker">
<input class="first" type="text" value="First" />
<input class="last" type="text" value="Last" />
</div>
</code></pre>
<pre>
<code class="javascript">$('#persons')
.items([
first:'Isaac', last:'Newton'},
{first:'Johannes', last:'Keppler'},
{first:'Alessandro', last:'Volta'},
{first:'Blaise', last:'Pascal'}
])
.selectable({required:true})
.chain();
$('#linker')
.item('link', '#persons', 'selected')
.chain(function(){
var self = this;
this.find(':input').keyup(function(){
self.item({
first: self.find('.first').val(),
last: self.find('.last').val()
})
})
})
</code></pre>
<script type="text/javascript" src="https://code.riiv.net/assets/scripts/wiki-interaction.js"></script>
<script type="text/javascript">MyJQ(function(){demo.selectableLink();});</script>
<script type="text/javascript" src="https://code.riiv.net/assets/scripts/highlight.js"></script>
raid-ox
tag:github.com,2008:Wiki/46375
2008-08-18T00:52:06-07:00
2008-09-16T09:15:49-07:00
Demo: Draggable, Sortable and Droppable
Tue Sep 16 09:15:49 -0700 2008
<link rel="stylesheet" title="Sunburst" href="https://code.riiv.net/assets/styles/sunburst.css">
<script type="text/javascript" src="https://code.riiv.net/assets/scripts/jquery-1.2.6.pack.js"></script>
<script type="text/javascript" src="https://github.com/raid-ox/chain.js/tree/v0.1-stable/build/chain.js?raw=true"></script>
<script type="text/javascript" src="https://github.com/raid-ox/interaction.js/tree/v0.1-stable/build/interaction.js?raw=true"></script>
<script type="text/javascript" src="https://code.riiv.net/assets/scripts/jquery-noconflict.js"></script>
<p style="background:#eee; padding:4px 2px;;"><a href="https://github.com/raid-ox/interaction.js/wikis/demos">Demos</a> > <strong>Draggable, Sortable and Droppable</strong></p>
<div style="background:#DCE9F4;padding:0.5em;margin-bottom:1em;">
<div style="width: 200px;color:#444;border:1px solid #BBB;background:white;float:left;" id="demo-persons">
<div style="text-align:left;cursor:default;width:190px;background:#DCE9F4;padding: 4px;margin:1px;" class="item"><span class="first">First</span> <span class="last">Last</span></div>
</div>
<div id="demo-drop" style="overflow:auto;opacity:0.7;padding:5px;margin-left:10px;width:150px;height:100px;float:left;color:#444;border:1px solid #BBB;background:#DCE9F4;">
Drop here!
</div>
<div style="clear:both;"> </div>
</div>
<style>
#interaction-draggable-container {border:1px solid #BBB;background:white;}
#interaction-draggable-container .item {background:#CCD9E4 !important;}
#demo-drop.drop-active {opacity:1 !important;}
#demo-drop.drop-hover {border:1px solid green !important;}
</style>
<h3>Source</h3>
<pre>
<code class="html"><div class="droppable" id="persons">
<div class="item"><span class="first">First</span> <span class="last">Last</span></div>
</div>
<div id="drop">
Drop here!
</div>
</code></pre>
<pre>
<code class="javascript">$('#persons')
.items([
{first:'Isaac', last:'Newton'},
{first:'Johannes', last:'Keppler'},
{first:'Alessandro', last:'Volta'},
{first:'Blaise', last:'Pascal'}
])
.sortable()
.chain();
$('#drop').droppable({
accept: 'droppable',
drop:function(droppable, item){
var data = item.item();
this.append('<br/>'+data.first+' '+data.last);
}
});
</code></pre>
<script type="text/javascript" src="https://code.riiv.net/assets/scripts/wiki-interaction.js"></script>
<script type="text/javascript">MyJQ(function(){demo.sortableWithDroppable();});</script>
<script type="text/javascript" src="https://code.riiv.net/assets/scripts/highlight.js"></script>
raid-ox
tag:github.com,2008:Wiki/46386
2008-08-18T02:03:40-07:00
2008-09-16T09:15:18-07:00
Demo: Multiple Sortable
Tue Sep 16 09:15:18 -0700 2008
<link rel="stylesheet" title="Sunburst" href="https://code.riiv.net/assets/styles/sunburst.css">
<script type="text/javascript" src="https://code.riiv.net/assets/scripts/jquery-1.2.6.pack.js"></script>
<script type="text/javascript" src="https://github.com/raid-ox/chain.js/tree/v0.1-stable/build/chain.js?raw=true"></script>
<script type="text/javascript" src="https://github.com/raid-ox/interaction.js/tree/v0.1-stable/build/interaction.js?raw=true"></script>
<script type="text/javascript" src="https://code.riiv.net/assets/scripts/jquery-noconflict.js"></script>
<p style="background:#eee; padding:4px 2px;;"><a href="https://github.com/raid-ox/interaction.js/wikis/demos">Demos</a> > <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>
#interaction-draggable-container {border:1px solid #BBB;background:white;}
</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="https://code.riiv.net/assets/scripts/wiki-interaction.js"></script>
<script type="text/javascript">MyJQ(function(){demo.multipleSortable();});</script>
<script type="text/javascript" src="https://code.riiv.net/assets/scripts/highlight.js"></script>
raid-ox
tag:github.com,2008:Wiki/46367
2008-08-18T00:10:09-07:00
2008-09-16T09:14:19-07:00
Demo: Simple Sortable
Tue Sep 16 09:14:19 -0700 2008
<link rel="stylesheet" title="Sunburst" href="https://code.riiv.net/assets/styles/sunburst.css">
<script type="text/javascript" src="https://code.riiv.net/assets/scripts/jquery-1.2.6.pack.js"></script>
<script type="text/javascript" src="https://github.com/raid-ox/chain.js/tree/v0.1-stable/build/chain.js?raw=true"></script>
<script type="text/javascript" src="https://github.com/raid-ox/interaction.js/tree/v0.1-stable/build/interaction.js?raw=true"></script>
<script type="text/javascript" src="https://code.riiv.net/assets/scripts/jquery-noconflict.js"></script>
<p style="background:#eee; padding:4px 2px;;"><a href="https://github.com/raid-ox/interaction.js/wikis/demos">Demos</a> > <strong>Simple Sortable Example</strong></p>
<div style="background:#DCE9F4;padding:0.5em;margin-bottom:1em;">
<div style="float:left;width: 250px;color:#444;border:1px solid #BBB;background:white;" id="demo-persons">
<div style="cursor:default;width:240px;text-align:left;background:#DCE9F4;padding: 0.3em;margin:1px;" class="item"><span class="first">First</span> <span class="last">Last</span></div>
</div>
<div style="float:left; margin-left: 20px;"><input type="button" value="Get First Item" onclick="demo.sortable_get()" /></div>
<div style="clear:both;"></div>
</div>
<style>
#interaction-draggable-container {border: 1px solid #CACACA; background:white;}
#interaction-draggable-container .item{background:#CCD9E4 !important;}
</style>
<h3>Source</h3>
<pre>
<code class="html"><div id="persons">
<div class="item"><span class="first">First</span> <span class="last">Last</span></div>
</div>
<input type="button" value="Get First Item" onclick="get()" />
</code></pre>
<pre>
<code class="javascript">$('#persons')
.items([
{first:'Isaac', last:'Newton'},
{first:'Johannes', last:'Keppler'},
{first:'Alessandro', last:'Volta'},
{first:'Blaise', last:'Pascal'}
])
.sortable()
.chain();
function get()
{
var data = $('#person').items(0).item();
alert(data.last+', '+data.first);
}
</code></pre>
<script type="text/javascript" src="https://code.riiv.net/assets/scripts/wiki-interaction.js"></script>
<script type="text/javascript">MyJQ(function(){demo.sortable();});</script>
<script type="text/javascript" src="https://code.riiv.net/assets/scripts/highlight.js"></script>
raid-ox
tag:github.com,2008:Wiki/46366
2008-08-17T23:54:09-07:00
2008-09-16T09:13:47-07:00
Demo: Draggable with Droppable
Tue Sep 16 09:13:47 -0700 2008
<link rel="stylesheet" title="Sunburst" href="https://code.riiv.net/assets/styles/sunburst.css">
<script type="text/javascript" src="https://code.riiv.net/assets/scripts/jquery-1.2.6.pack.js"></script>
<script type="text/javascript" src="https://github.com/raid-ox/chain.js/tree/v0.1-stable/build/chain.js?raw=true"></script>
<script type="text/javascript" src="https://github.com/raid-ox/interaction.js/tree/v0.1-stable/build/interaction.js?raw=true"></script>
<script type="text/javascript" src="https://code.riiv.net/assets/scripts/jquery-noconflict.js"></script>
<p style="background:#eee; padding:4px 2px;;"><a href="https://github.com/raid-ox/interaction.js/wikis/demos">Demos</a> > <strong>Draggable with Droppable</strong></p>
<div style="background:#DCE9F4;padding:0.5em;margin-bottom:1em;">
<div style="width: 200px;color:#444;border:1px solid #BBB;background:white;float:left;" id="demo-persons">
<div style="text-align:left;cursor:default;width:190px;background:#DCE9F4;padding: 4px;margin:1px;" class="item"><span class="first">First</span> <span class="last">Last</span></div>
</div>
<div id="demo-drop" style="overflow:auto;opacity:0.7;padding:5px;margin-left:10px;width:150px;height:100px;float:left;color:#444;border:1px solid #BBB;background:#DCE9F4;">
Drop here!
</div>
<div style="clear:both;"> </div>
</div>
<style>
#interaction-draggable-container {border:1px solid #BBB;background:white;}
#interaction-draggable-container .item {background:#CCD9E4 !important;}
#demo-drop.drop-active {opacity:1 !important;}
#demo-drop.drop-hover {border:1px solid green !important;}
</style>
<h3>Source</h3>
<pre>
<code class="html"><div class="droppable" id="persons">
<div class="item"><span class="first">First</span> <span class="last">Last</span></div>
</div>
<div id="drop">
Drop here!
</div>
</code></pre>
<pre>
<code class="javascript">$('#persons')
.items([
{first:'Isaac', last:'Newton'},
{first:'Johannes', last:'Keppler'},
{first:'Alessandro', last:'Volta'},
{first:'Blaise', last:'Pascal'}
])
.draggable()
.chain();
$('#drop').droppable({
accept: 'droppable',
drop:function(droppable, item){
var data = item.item();
this.append('<br/>'+data.first+' '+data.last);
}
});
</code></pre>
<script type="text/javascript" src="https://code.riiv.net/assets/scripts/wiki-interaction.js"></script>
<script type="text/javascript">MyJQ(function(){demo.draggableWithDroppable();});</script>
<script type="text/javascript" src="https://code.riiv.net/assets/scripts/highlight.js"></script>
raid-ox
tag:github.com,2008:Wiki/46360
2008-08-17T23:12:26-07:00
2008-09-16T09:12:58-07:00
Demo: Simple Draggable
Tue Sep 16 09:12:58 -0700 2008
<link rel="stylesheet" title="Sunburst" href="https://code.riiv.net/assets/styles/sunburst.css">
<script type="text/javascript" src="https://code.riiv.net/assets/scripts/jquery-1.2.6.pack.js"></script>
<script type="text/javascript" src="https://github.com/raid-ox/chain.js/tree/v0.1-stable/build/chain.js?raw=true"></script>
<script type="text/javascript" src="https://github.com/raid-ox/interaction.js/tree/v0.1-stable/build/interaction.js?raw=true"></script>
<script type="text/javascript" src="https://code.riiv.net/assets/scripts/jquery-noconflict.js"></script>
<p style="background:#eee; padding:4px 2px;;"><a href="https://github.com/raid-ox/interaction.js/wikis/demos">Demos</a> > <strong>Simple Draggable Example</strong></p>
<div style="background:#DCE9F4;padding:8px;margin-bottom:1em;">
<div style="width: 250px;color:#444;border:1px solid #BBB;background:white;" id="demo-persons">
<div style="cursor:default;width:240px;text-align:left;background:#DCE9F4;padding: 4px;margin:1px;" class="item"><span class="first">First</span> <span class="last">Last</span></div>
</div>
</div>
<style>
#interaction-draggable-container {border: 1px solid #CACACA; background:white;}
#interaction-draggable-container .item{background:#CCD9E4 !important;}
</style>
<h3>Source</h3>
<pre>
<code class="html"><div id="persons">
<div class="item"><span class="first">First</span> <span class="last">Last</span></div>
</div>
</code></pre>
<pre>
<code class="javascript">$('#persons')
.items([
{first:'Isaac', last:'Newton'},
{first:'Johannes', last:'Keppler'},
{first:'Alessandro', last:'Volta'},
{first:'Blaise', last:'Pascal'}
])
.draggable()
.chain();
</code></pre>
<script type="text/javascript" src="https://code.riiv.net/assets/scripts/wiki-interaction.js"></script>
<script type="text/javascript">MyJQ(document).ready(function(){demo.draggable();})</script>
<script type="text/javascript" src="https://code.riiv.net/assets/scripts/highlight.js"></script>
raid-ox
tag:github.com,2008:Wiki/46395
2008-08-18T02:38:15-07:00
2008-08-21T05:08:48-07:00
Demo: Simple Selectable
Thu Aug 21 05:08:48 -0700 2008
<link rel="stylesheet" title="Sunburst" href="https://code.riiv.net/assets/styles/sunburst.css">
<script type="text/javascript" src="https://code.riiv.net/assets/scripts/jquery-1.2.6.pack.js"></script>
<script type="text/javascript" src="https://github.com/raid-ox/chain.js/tree/v0.1-stable/build/chain.js?raw=true"></script>
<script type="text/javascript" src="https://github.com/raid-ox/interaction.js/tree/v0.1-stable/build/interaction.js?raw=true"></script>
<script type="text/javascript" src="https://code.riiv.net/assets/scripts/jquery-noconflict.js"></script>
<p style="background:#eee; padding:4px 2px;;"><a href="https://github.com/raid-ox/interaction.js/wikis/demos">Demos</a> > <strong>Simple Selectable Example</strong></p>
<div style="background:#DCE9F4;padding:8px;margin-bottom:1em;">
<div style="float:left;width: 250px;color:#444;border:1px solid #BBB;background:white;" id="demo-persons">
<div style="cursor:default;width:240px;text-align:left;background:#DCE9F4;padding: 0.3em;margin:1px;" class="item"><span class="first">First</span> <span class="last">Last</span></div>
</div>
<div style="float:left; margin-left: 20px;"><input type="button" value="Get Selected Item" onclick="demo.selectable_get()" /></div>
<div style="clear:both;"></div>
</div>
<style>
.item.selected {background:#C9D9E9 !important;}
</style>
<h3>Source</h3>
<pre>
<code class="html"><div id="persons">
<div class="item"><span class="first">First</span> <span class="last">Last</span></div>
</div>
</code></pre>
<pre>
<code class="javascript">$('#persons')
.items([
{first:'Isaac', last:'Newton'},
{first:'Johannes', last:'Keppler'},
{first:'Alessandro', last:'Volta'},
{first:'Blaise', last:'Pascal'}
])
.selectable({required:true})
.chain();
function get()
{
var data = $('#persons').selectable('selected').item();
alert(data.first+' '+data.last);
}
</code></pre>
<script type="text/javascript" src="https://code.riiv.net/assets/scripts/wiki-interaction.js"></script>
<script type="text/javascript">try{demo.selectable();}catch(e){MyJQ(function(){demo.selectable();})};</script>
<script type="text/javascript" src="https://code.riiv.net/assets/scripts/highlight.js"></script>
raid-ox