Draggable Droppables And Selectables… Oh My
10 July 2006 | Tutorials | 24 Comments
When I first started 15DaysOfjQuery.com I made this comment on one of the ‘About‘ pages:
If you need super fancy effects for animation, drag and drop, and super smooth animation then you’ll probably want to use Prototype and one of the many great library created to enhance the effects.
I left my erroneous remark up to show you how quickly jQuery has been adopted by talented javascript coders willing and able to cook up plugins that give the “older” AJAX libraries a run for their money.
You see, a few days after posting the “limitations” of jQuery it came to my attention that a very talented coder was busy publishing some exciting animation plugins for jQuery that could be very useful for web apps.
For example, I had been toying with a sortable list for the admin control panel in my new content management system. I was getting very frustrated with a PHP coded version of “sortable lists” found at Scriptaculous. The code wasn’t able to handle the latest version of Prototype… but looked so promising.
Note: the PHP version on gregphoto.net now appears to be updated - but I haven’t tested it myself. So if you like Prototype better than jQuery, I’d check out his code. Also, I find it interesting that the sortable list demo on Scriptaculous doesn’t work at all in FireFox - and hasn’t for some time now. I don’t know if that’s a coding error on their site, or a bug in the code itself.
When I found the jQuery plugin for sortable lists I couldn’t believe how damn easy the code was to make it easy to sort several lists, mix and match the lists, and send the information to a database.
I was in hog heaven!
Since then, the number of interface plugins has grown steadily. I think you’d have to really try hard to come up with an interface effect that can’t be accomplished with jQuery and these wonderful plugins.
“XYZ Ajax Library Is Better”
If you have an AJAX library you like better, then please continue using it. Not that I don’t want to hear a well thought out comment about the differences between various libraries - their strengths and weaknesses - but the point of this post is to show that jQuery is more than just a lightweight javascript library for DOM manipulation with a little AJAX thrown in…
On the contrary… you can use jQuery to accomplish some very sophisticated effects.
I know there are some very smart coders that prefer YUI, or Prototype, Dojo, or fill-in-the-blank. I also know that some very influential and smart coders are giving jQuery a second look.
jQuery is maturing rapidly. Talented coders are contributing to the library and there’s an active community discussing ways to make the library even better.
Technorati Tags: jQuery, animation, javascript, AJAX, Prototype, Scriptaculous, Dojo, web app, jQuery effects, sortable lists
Subscribe
24 Comments
Leave a Reply
You can follow the discussion through the Comments feed. You can also pingback or trackback from your own site.
Just noticed that the jQuery that this drag and drop plugin is using is different from the one that you can download from jquery.com
It’s either a cusom built version or a internal release of jquery. it is very buggy on hover
John Resig has been working hard to get a stable release out for 1.0 of jQuery and so I think you are looking at one of the more recent versions.
http://jquery.com/blog/2006/06/30/jquery-10-alpha-release/
I know you have mentioned the interface library but not a proper mention and it extends jquery how cool is that
http://www.eyecon.ro/interface/
It absolutely is one of the best plugins for jQuery. I probably should have emphasized it more… but there is a link in there.
Doesn’t work in Safari 2.0.1
Jack please update the links to Interface pages. I changed the site’s structure and many links are broken.
Stefan,
Links updated.
This “day of Jquery” that talks about doing drag and drop table sorting to update a database doesn’t give an example, and the “Demo” doesnt actually have the ajax component either. It shows serialization but not the actual ajax calls.
This may be a “dead simple” thing to do but without a demo that shows the ajax calls, its going to take me a while to get my head around it.
Example, please?
Tronathan,
I’ve got a lot on my plate today, but I’ve seen your request for a more in depth example. I’ll try to get to it soon.
Jack
Maguay Servere Bazate exclusiv pe platforme Intel, acopera o gama larga de necesitati in ceea ce priveste performanta, siguranta in exploatare si scalabilitatea.
Has anyone gotten an example about this yet? Using SQL Server or postgres?? Please
An example of communication to the database after each drag and drop?
Any help would be really helpful
Ok, I haven’t implemented this yet, but I think it’s pretty simple — there’s an “onChange” function specified there, into that you can drop whatever ajax calls you want, which can use the output from $.sortSerialize() (and send it as a parameter (or parameters) to any webpage via a simple xmlhttprequest call…ajax….).
Scriptaculous sortable lists do not work in any browser other than IE (that I tested). It’s a shame because it’s so nice. I actually submitted this as a bug report a while ago and to my knowledge, it still has not been addressed.
Is there any way you could make an example of drag and drop that use MySQL as database and interact it with PHP?
If possible a simple Cart that after dragging the image to the box, it automatically save to database.
I really love your stuff but I’m not quite familiar with it comes to ajax or any javascript scripting.
This probably isn’t the place to post this, but if your sortable elements are floating and have children (say IMG thumbnails inside of LI) the droppables appear not to work. I really wished this worked. If anyone has a fix, please contact me - me@blainegarrett.com
Hi, I have a question about the interface plugin for jquery. I tried to get the same result of the example of the sortables. Now everything works fine in almost all browsers… except one-> IE. There I can drag and drop each element just once. And then you can’t do it anymore. Any ideas how to solve this?
thanks in advanced.
Guys, would be good if you could leave links to the code samples.
noob alert - how would one go about setting this up with cookies?
Sortables doesn’t seem to work with the latest build of jQuery in IE. The behavior described above by Gerbrand can be fixed by using an earlier version on jQuery but for many, like myself, this isn’t an option.
Still looking for a fix…
Gerbrand -
To fix, you’ll need to reinitialize your sortable.
First call SortableDestroy()
e.g.: jQuery(’#accordianControl’).SortableDestroy();
Then call the original code you used to initialize the sortable
e.g.:
jQuery(’#accordianControl’).Sortable(
{
accept: ‘acc_sortable’,
helperclass: ’sortHelper’,
activeclass : ’sortableactive’,
…. and so on.
Just put the SortableDestroy and reinitialization calls into the onStop handler.
i recently found that http://smashingfeeds.com is using jQery for cool effect
Being a bit of a js newbie any chance you can post more of the script you used for the newer version IE fix Matthew?
When using UI.Sortable on my relatively complex/long list of image thumbnails, I find it’s possible to ‘drop’ items so that they disappear from the list, which is big problem for me, it means I have to refresh the page to get these ‘dropped’ items back.
Has anyone else experienced this? Am I missing some option?