Scriptaculous Drag Drop and Database Integeration!

[ameshkin]

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</spanItem 1 from second list.
</li>
<li class="orange" id="secondlist_secondlist2">
<span class="handle">DRAG HERE</spanItem 2 from second list.
</li>
<li class="orange" id="secondlist_secondlist3">
<span class="handle">DRAG HERE</spanItem 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>

[carrion]

ameshkin schrieb:

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</spanItem 1 from second list.
</li>
<li class="orange" id="secondlist_secondlist2">
<span class="handle">DRAG HERE</spanItem 2 from second list.
</li>
<li class="orange" id="secondlist_secondlist3">
<span class="handle">DRAG HERE</spanItem 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>

Hi ameshkin!
I just did something quite similar.
You need to trigger a function that sends a HTTP Request to your
backend, which then handles the database interaction.
For sending the request, i would advise you to use prototype or
something similar.
Using prototype, it would like something like this:

Sortable.create("firstlist",
{ ...,
onUpdate: function(){ new Ajax.Request(
'http://myserver/my_db_script.php",
{ method: 'get',
parameters: 'param1='+getParamFromDOM(),
onComplete: mySuccess(),
onFailure: myFailure()
}
});

Whenever the order of the Sortable changes, a request is sent to the
backend.
There you handle db interaction (be sure to escape & finter your data
there!!).

Hope that helps & best regards.

[carrion]

The code has a few typos, but i guess it's a starting point anyway. ;)
And i meant 'filter'.