Is Making A Draggable "element" Difficult? Need advice on creating a customizable layout.

[rob86 2]

I'm making a page where I think it would be useful to have draggable boxes/elements. Is this difficult (or even possible) to do, and what language would I need to do it? It's just a single page "tool/application" type of thing, not an entire multi-page website. I'd like for the user to be able to customize what's on the page (choosing from boxes, or "Widget" type of things) and drag it to where they find it appealing and of course store this layout with cookies. The stuff in the widget things would of course have to be editable as in an html element or something, not an image that never changes because they're supposed to have the individuals information in them.Possible ? Very difficult? I'm not asking for a full lesson on the subject (unless someone really feels like writing a tutorial) but a little help to get me on the right direction would be helpful. If it's extremely time consuming then it's probably not worth the effort anyway. I just thought it'd be a neat thing to try out.

[rvalkass 5]

This could be done using JavaScript. Rather than writing your own code to do it (which would be fairly complex and difficult) take a look at the following JavaScript libraries that allow you to use simple code to call on their vast array of useful effects. They also have tutorials and examples for all their functions, so you should be able to adapt those to do exactly what you want.

script.aculo.us
jQuery
jQuery UI

[rob86 2]

Oh wow that scriptaculous looks like it'd make that and a lot of other things really easy. It kind of feels like cheating though! I'll download and try it out later and see how it goes.I haven't looked at jQuery yet as scriptaculous was more than adequate to answer my question. Thanks for that I didn't expect such a simple solution

[truefusion 3]

I haven't looked at jQuery yet as scriptaculous was more than adequate to answer my question. Thanks for that I didn't expect such a simple solution

You might find JQuery easier to code with or understand, though. Script.aculo.us uses the Prototype JavaScript framework, which is a bit more complex than JQuery. From JQuery's UI package, you can make an element draggable with a few lines of code.

[rob86 2]

Scriptaculous was pretty easy to install and understand thanks to their examples, but I have a question about it.

On this page it talks about callback functions

https://github.com/madrobby/scriptaculous

How do I use them? I had something like this which was supposed to call a simple javascript function (that I didn't paste here but it is there, trust me!)

<script type="text/javascript">	new Draggable('Test', {snap: [5,5], onEnd:{Test,displaypopup()}});</script>

Obviously something is wrong with my onEnd callback thing, because as soon as I add the onEnd stuff it stops dragging. I didn't see any examples on how use callbacks. Any idea what the syntax is to use them?
Edited August 22, 2009 by rob86 (see edit history)

[truefusion 3]

Any idea what the syntax is to use them?

Hmm. If i were to take a guess, then maybe one of these would work:

new Draggable('Test', {snap: [5,5], onEnd:displaypopup});

new Draggable('Test', {snap: [5,5], onEnd:'displaypopup'});

If neither work, then i have no idea. I guess you could try searching for an example online that uses a callback or just forget about the callback.

[rob86 2]

I asked on the google group for scriptaculous and found out that the syntax goes something like this in case anyone is interested.

new Draggable('Test', { onEnd: function() { alert('I ended'); }})

Seems like it works.