Posted by ameshkin on 12/16/06 06:51

Hi,
I'm working on a drag and drop feature with the scriptaculous
javascript library. And I was wondering if someone could help me! :(

Here is some test code. Basically, when someone takes something from
the left side and puts it in the right side, I just want to run a
database query.

I have NO IDEA how to do this because of my limited javascript
experience.

<script
src="http://www.mytuneslive.com/_NEW/MORPH/javascripts/prototype.js"
type="text/javascript"></script>
<script
src="http://www.mytuneslive.com/_NEW/MORPH/javascripts/effects.js?1.7.0b1"
type="text/javascript"></script>
<script
src="http://www.mytuneslive.com/_NEW/MORPH/javascripts/scriptaculous.js"
type="text/javascript"></script>
<link rel="stylesheet"
href="http://www.wiki.script.aculo.us/stylesheets/application.css"
type="text/css" media="screen" />
<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>

[Back to original message]