I could use some excellent JS eyes to look at the right way to implement Drag-and-Drop using jQuery/Interface.
I've released a version for the MySite module (in the current HEAD release). See http://drupal.org/node/101471#comment-203584 for what I don't like about my implementation. Three points to emphasize to this audience:
1) I'd prefer to have a universal library; not one that is specific to my module. So the jQuery module http://drupal.org/project/jquery seems the right path to me.
2) I know that I'm duplicating code used, for example, by both Drupal's kQuery file and the Panels module. Seems like a bad idea.
3) I'm not JS master enough to make this any better than it is, so I didn't follow my own guidelines set forth in http://groups.drupal.org/node/2512.
Any patches / advice / assistance welcome.
Comments
Are you using code from the Interface Library?
It looks like you got it to work. Congrats.
I know how challenging this can be. I'm certainly not an expert javascript programmer myself, but I did have some similar functionality with the 4.7 version of the playlist module that used the prototype AJAX library. Skip through 1/2 of this video to see a brief demo of it: http://www.echochamberproject.com/demo
I'm in the process of upgrading to 5.1 and interested modifying the jQuery functionality to duplicate this type of sortable feature, which is my interest in this thread.
My first point: I wonder if you're doing more of what would be considered a "sortable" functionality rather than a drag-and-drop one.
Here's a demo of the sortables plug-in that comes with the v1.2 of the Interface plug-ins: http://interface.eyecon.ro/demos/sort.html
It appears as if you're doing more of a sortables rather than a full-featured drag and drop like one of these: http://interface.eyecon.ro/demos/drag.html -- But maybe I'm wrong.
A QUESTION:
I'm not sure what you mean by "I had to duplicate most of the jQuery.js file as part of the Interface library. This may cause unintended conflicts with other Drupal functions."
This sounds a bit scary.
Does this mean that you pulled functionality out of the Interface libraries and rolled them into mysite.js?
A suggestion:
* Maybe it make more sense to upgrade to jQuery 1.1.1 via patching these two files Drupal js files: collapse.js & textarea.js and replacing jQuery.js with the 1.1.1 version. Josh is currently looking into upgrading issues mentioned in the previous thread, and is playing around with another interface library.
* This would then allow you to use the already developed interface libraries for dragging, dropping & sorting.
I ask because it looks like the HTTP GET request that you're using for sorting functionality is a bit squirrelly (i.e. http://www.example.com/ajax/mysite-sort/1/mysite-sort0%5B%5D=2:mysite-so... )
It seems like getting this functionality into your module and others, then maybe it makes sense to use what is already developed by the jQuery community rather than trying to roll some your own functions.
I'm pointing you in this direction in hopes that there are other people who are interested in integrating some of the draggable, droppable and sortable Interface functionalities -- perhaps as part of the jstools module that nedjo mentioned here.
Thoughts?
Right
Kent-
Right, I 'got it to work' but not in the best way.
Some clarifications:
1) The mysite.js file is an Interface download (draggables, droppables, and sortables), plus the GET function. Interface itself duplicates parts of Drupal's jQuery implementation. And yes, it's really drag-drop-and-sort. (In Interface terms, drag-and-drop implies moving things from one state to another, not simple position changes; but in UI terms, you are dragging and dropping an object.)
2) The GET function definitely needs replacing. Looking for specific code to do so. I 'rolled my own' because I couldn't get the jQuery $ajax, $post or $get functions to work -- I suspect they didn't work because the interface js replaces / overrides some of the default jQuery functions in Drupal's jquery.js file.
3) I looked at the jQuery 1.1 thread and would prefer staying current with Drupal's core implementation (1.0) instead of moving too far ahead.
4) That said, the version of Interface that I downloaded was on Dec 1, 2006, and it isn't labelled as jQuery 1.0 or 1.1 (I notice that new versions of Interface are 1.1.1).
5) I'll see what nedjo has done, if any code is available. I am, in fact, looking specifically for a universal library rather than a one-off solution. Just haven't found one. Perhaps this task will produce one. But I can't do it alone.
--
http://ken.therickards.com/
http://savannahnow.com/user/2
http://blufftontoday.com/user/3
--
http://ken.therickards.com/
Demo?
Love to give this a whirl. Beyond the mysite module, which is great by the way, this functionality could be huge for Drupal. Letting admin set blocks and content where they like via drag-n-drop would go a long way to de-mistifying drupal and getting even more people to adopt it. So, it seems that standardizing a dag-drop library is key for that to happen.
right
Plus, I know that merlinofchaos is already doing this in 5--2 branch of Panels. So there is duplication.
Here are the functions that I think I need AJAX-ified and could be universal interface elements for Drupal modules. I was thinking of making this a Summer of Code proposal.
--
http://ken.therickards.com/
http://savannahnow.com/user/2
http://blufftontoday.com/user/3
--
http://ken.therickards.com/
Thanks -- Some working AJAX examples
Thanks for the feedback.
A couple of pointers for replacing your GET function.
Take a look at the FiveStar rating module for an example of a working jQuery GET AJAX syntax. It requires the VotingAPI module.
Also take a look at the jRating module for a working example of sending AJAX data via a POST call. I believe that this jRating also sends data via JSON.