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.
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.
[tags]jQuery, animation, javascript, AJAX, Prototype, Scriptaculous, Dojo, web app, jQuery effects, sortable lists[/tags]
33 Responses
Simon
July 14th, 2006 at 5:50 pm
1Just 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
Jack
July 14th, 2006 at 10:49 pm
2John 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/
Joe
August 2nd, 2006 at 2:07 pm
3I 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/
Jack
August 2nd, 2006 at 2:10 pm
4It absolutely is one of the best plugins for jQuery. I probably should have emphasized it more… but there is a link in there.
vaaaska
August 17th, 2006 at 1:40 am
5Doesn’t work in Safari 2.0.1
Stefan Petre
September 23rd, 2006 at 3:08 am
6Jack please update the links to Interface pages. I changed the site’s structure and many links are broken.
Jack
September 23rd, 2006 at 9:04 pm
7Stefan,
Links updated.
Tronathan
October 12th, 2006 at 3:29 pm
8This “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?
Jack
October 12th, 2006 at 3:40 pm
9Tronathan,
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
server
February 9th, 2007 at 11:40 am
10Maguay Servere Bazate exclusiv pe platforme Intel, acopera o gama larga de necesitati in ceea ce priveste performanta, siguranta in exploatare si scalabilitatea.
Linh
March 3rd, 2007 at 8:40 pm
11Has anyone gotten an example about this yet? Using SQL Server or postgres?? Please
Linh
March 4th, 2007 at 12:12 am
12An example of communication to the database after each drag and drop?
Any help would be really helpful
Steinn E. Sigurðarson
May 10th, 2007 at 8:58 pm
13Ok, 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….).
Scott
August 22nd, 2007 at 3:27 pm
14Scriptaculous 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.
Andy Christian Loyola
December 22nd, 2007 at 6:35 am
15Is 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.
Blaine
January 5th, 2008 at 9:21 pm
16This 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
Gerbrand
January 16th, 2008 at 12:57 pm
17Hi, 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.
Acronyms
January 22nd, 2008 at 8:45 am
18Guys, would be good if you could leave links to the code samples.
richard
February 15th, 2008 at 10:52 am
19noob alert - how would one go about setting this up with cookies?
Matthew Sweet
February 21st, 2008 at 12:51 pm
20Sortables 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…
Matthew Sweet
February 21st, 2008 at 1:06 pm
21Gerbrand -
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.
Michael
May 18th, 2008 at 5:46 am
22i recently found that http://smashingfeeds.com is using jQery for cool effect
Neoszion
June 28th, 2008 at 2:33 pm
23Being a bit of a js newbie any chance you can post more of the script you used for the newer version IE fix Matthew?
Jay Adair
August 18th, 2008 at 9:32 am
24When 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?
Javed
September 23rd, 2008 at 2:34 pm
25Great article. I have just started learning jQuery and its really great stuff. We can create fancy and usable applications with jQuery. I was shaky a bit when it comes to Ajax. jQuery does it in fly. Ready to use plugins and support. Great great stuff. Your site is wonderful. Helping me a lot. Thanks.
Linus Lövholm
November 11th, 2008 at 4:14 am
26To #24 Jay Adair:
I have the exact same problem. It occurs sporadically. It seems it may have something to do with floating sortable containers, but I’m not sure.
Roxane Rinard » Step 1: Drag and Drop
January 9th, 2009 at 11:54 am
27[...] http://15daysofjquery.com/draggable-droppables-and-selectables-oh-my/22/ [...]
gogulas
February 18th, 2009 at 1:21 am
28Ah, finaly, after more than 5 minutes of searching i’ve found library for sorted drag&drop, I talking about “PHP coded version” its waaaay better for my needs :p
Thans for blog useful info
gogulas
gogulas
February 18th, 2009 at 8:25 am
29Heh, I found a BUG!in ‘php coded version’….
When we put sortable tables intro div with “overflow:auto;” style, then after scroll down this div just a little bit, sort become stop working :/ elements moving but dosn’t keep new place :/
If we wouldn’t scroll, it’s work fine.
Checked on Opera && IE6
Any Iidea how to fix it? exept Iframe? :/
??jQuery????? | jquery ajax??????
April 3rd, 2009 at 9:48 am
30[...] Draggable, Droppables, Selectables… Oh My! [...]
Colin
February 3rd, 2010 at 2:14 am
31jQuery ????
jQuery UI????
jQuery ????????
15 Days Of jQuery……JQuery????
jQuery - Google Code????JQuery?????
Simplify Ajax development with jQuery
jQuery ? YouTube?2008?4?3??Google Tech Talks?
jQuery??
shawn
February 13th, 2010 at 10:29 am
32hi i went on line and found a code for a java scrip pop up page gray out
how ever i want this scrip to automatic comes up after five seconds what code do i need to change below for this to happen currently it come up only is people click the shaw button
please advise
function showPopUp(el) {
var cvr = document.getElementById(”cover”)
var dlg = document.getElementById(el)
cvr.style.display = “block”
dlg.style.display = “block”
if (document.body.style.overflow = “hidden”) {
cvr.style.width = “1024″
cvr.style.height = “100%”
}
}
function closePopUp(el) {
var cvr = document.getElementById(”cover”)
var dlg = document.getElementById(el)
cvr.style.display = “none”
dlg.style.display = “none”
document.body.style.overflowY = “scroll”
}
#cover {
display:none;
position:absolute;
left:0px;
top:0px;
width:100%;
height:100%;
background:gray;
filter:alpha(Opacity=50);
opacity:0.5;
-moz-opacity:0.5;
-khtml-opacity:0.5
}
#dialog {
display:none;
left:300px;
top:150px;
width:380px;
height:350px;
position:absolute;
z-index:100;
background:#00CCFF;
padding:2px;
font:10pt tahoma;
border:1px solid gray
}
.style2 {
color: #000066;
font-weight: bold;
}
Free Quick Moving Quote
[Close]
Show
please help send email to shawn2411@gmail.com
35 Ultimate Useful jQuery Tutorials | WEBAXES.COM
May 4th, 2010 at 2:43 pm
33[...] Draggable, Droppables, Selectables… Oh My! [...]
RSS feed for comments on this post · TrackBack URI
Leave a reply
Categories
Archives
Links
15 Days Of jQuery is proudly powered by WordPress - BloggingPro theme by: Design Disease