Posted by carrion on 12/16/06 14:52

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</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>

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.

[Back to original message]