Synopsis
Drupal stresses ease of use. To that end, I will be submitting an API to offer dragging, dropping, and sorting functionality to modules. This will greatly enhance not only the ease of making changes to the user interface, but also the development of associated drop and drag projects. To highlight the abilities of the API, I will also be creating a module to drag and drop blocks.
Project details
This project would make use of interface.js, a plugin for the jquery library. One of my main considerations in designing the Drag Drop and Sort API is flexibility. Namely, I would like the API to be usable by all content elements within drupal. The API will achieve this flexibility by performing several operations:
- Identifying appropriate positioning information to be altered by the API (i.e. weight and region).
- Querying the database for the relevant positioning information for each element that will be affected by the change.
- Attaching javascript class information to position variables that will make them draggable, droppable, and sortable.
- Providing the framework for a user interface to use this functionality.
- After each sort, the API will recalculate weights of all relevant elements and reassign position information that has changed.
- Finally, using an AJAX submit process, it will update the position information in the database without reloading the page.
In order to test the API, I will also build a Blocks DnD module that will incorporate the drag, drop, and sort functionality. This module will allow users with the right permissions to sort blocks within each region, as well as moving blocks from region to region.
How does this benefit Drupal?
- By enhancing ease of use, we open the door to a wider range of would-be users and developers.
- By de-emphasizing the need for complex programming, we allow users and developers to focus on style and content.
- Easily integrated Web 2.0 features makes for an easier sell to prospective clients or a boss.
- Since drag and drop features mimic such popular operating systems as Windows and OS X, it makes the user interface more familiar and intuitive to users that are already familiar with functionality.
- And let's be honest: Drag and drop is really cool!
Criteria for Success
- Creation of the above specified modules.
- Successful functionality on all the most widely used browsers, including Internet Explorer 6 and 7, Mozilla Firefox and other similar browsers, Opera 8 and up, as well as Safari.
- Graceful degradation in browsers that don't support these features.
Roadmap
- Now to the end of April - Submit my plans to the Drupal community to generate feedback and suggestions on how I might enhance this project and make it truly universal in scope. Completely familiarize myself with the Drupal structure to ensure that my code is in line with Drupal coding standards, and to enhance continuity with the core. Discuss my proposal with developers who engaged in similar or complimentary work. Examples include the Panels Module, Mysite Module, and any other projects that might be affected or enhanced by this project.
- Beginning of May to the end of June - Complete initial development of Drag Drop and Sort API and Blocks DnD module. Release for testing and improvement.
- Beginning of July to the end of August - Implement bug fixes and any improvements.
Who am I?
Ever since I was young, I have been fascinated with web design. Having no skill in building things with my hands, I loved the idea of being able to manipulate a virtual space to suit my fancy or needs. Ever since then, I have tried to hone my skills and reach for ever greater control over the virtual environment.
My love affair with Drupal began more than a year ago. After building many websites with straight html and a little javascript here and there, I discovered the concept of a CMS. I began searching for the best CMS to build my online t-shirt store with. I quickly learned that although a CMS can greatly enhance productivity, they can also be very difficult to learn. Then I discovered Drupal. Within a couple of days, I was able to build an initial test store that I was quite happy with. Since then I have honed my skills and endeavored to learn as much about Drupal as I could. I have provided feedback for several projects and have been aching for some time to get my hands dirty with actually developing a module for Drupal.
I now run several websites off the same code base (a feature I am quite enamored with). I am ready to take the next step and ride the web 2.0 tidal wave that is sweeping the internet. I am interested in making Drupal easier to use so that more people will have the opportunity that I have had to work with such amazing software. I think that my success in creating the above mentioned enhancements to Drupal will help me accomplish that goal.
Comments
Just an idea... not a proposal
Just for any other potential students that comes by to read this post, this node should be considered an idea, not a proposal draft.
I think you'll get a thumbs-up on any idea as long as you spend the time to write a detailed proposal and sell yourself as the individual to do it.
More detail
I've been talking to pyrello via email. Here are some broader strokes to consider for a proposal.
Initially, we were talking about drag-and-drop as implemented in MySite HEAD. But I think a Drag-Drop-Sort API is a Good Idea.
Here's what I think is a realistic project, though it needs to be filled out more and I'm just thinking out loud.
Here are the features:
- <ul> <li> groupings- <div id> <div class> groupings.
- <ol> <li> groupings
- <p> groupings
For me, I need to know:
I would take a look at the FormsAPI for an idea of how to structure the function.
NOTE: The JS that I use in MySite is crude at best; my JS skills are low.
Another feature that would be very nice to have is AJAX functions for handling Table pagination.
--
In MySite, the data is passed via XMLHttp to a Drupal AJAX handler menu item. See http://drupal.org/node/42552 and http://drupal.org/node/42562 for details about using Drupal to handle AJAX calls.
Drag and drop doesn't work through a hidden form, it relies on a menu callback specific to AJAX. Based on the path of the HttpRequest, the AJAX handler function reads the data it needs.
The DragAPI would have a common menu path and handler that module developers could rely upon. You might look at the mysite_autocomplete() function and corresponding menu item which allows MySite plugins to execute AJAX calls.
In the HEAD version of MySite, sorting is handled by the function mysite_ajax_sort(), which is handed data according to the URL string: 'ajax/mysite-sort/' . $string. Where $string is the output of the JS function. That is handled in the reportChange(s) function of mysite.js.
A standardized function would let module developers define the variables to be passed, and then return them in a predictable order. You wouldn't pass the information straight to the blocks table. You would hand it to an AJAX menu callback, and the module would handle the data insert. (Again, see mysite_ajax_sort() for an example.)
--
http://ken.therickards.com/
http://savannahnow.com/user/2
http://blufftontoday.com/user/3
--
http://ken.therickards.com/
Not so fast
I am no JS wizard but this is a buzzword rich idea which always makes me wary. Not to mention that if you want to have a full DnD API then you want to operate on tables too as many admin interfaces are tables. Now, Steven Wittens yesterday said that drag-and-drop for table rows is bloody hard and if he says so, that means you can cut glass easily with the result.
Are you refering
Are you referring specifically to moving table cells around to new locations within the table?
I guess I don't understand. Are you making a suggestion here or just helping to emphasize that this will be a difficult project?
It will have to look into this.
Yup
Yes, if you want to have drag-and-drop then you need to be able to move table rows and yes I am warning you that accidentally this was raised with Steven yesterday and he told me this is extremely hard.
On the hand, for simple lists, we already have reordering JS from last year's SoC in kkaefer/timcn 's sandbox.
Could you provide an example
Could you provide an example of a table that is output and would be reordered using drag and drop? That way I can research the example to see how it can be overcome.
And who is this Steven, I would very much like to converse with him.
A great example is the Views
A great example is the Views UI interface. This outputs things in a table that would need to be re-ordered. Or the block administration menu that has weights for each block. Steven is one of the main core developers that is responsible for much of the current ajax/javascript in core.
But in the views interface,
But in the views interface, wouldn't you just be moving a whole row at a time. Since all the information in a particular row is related, only the row needs to be moved.
Short of having a product table or grid view in a view, I am having trouble coming up with any examples of this that don't involve shifting whole rows, which is difficult, but I have seen it done.
Categories and menu admin
Are two examples of tables that could use drag-and-drop reorder .
Good point, but in each of
Good point, but in each of these cases, we would only be moving a row at a time, since the data is related. I have some ideas on how this might be accomplished, through the Sort API. Drag and drop is another matter, but I have been looking around for examples to draw upon. If you might have any suggestions, I would be happy to look at more examples.
Thanks for your feedback, it has been enlightening.
I like the write-up so far,
I like the write-up so far, and I really want this.
But in my mind, Drag & Drop vs Sortable are two quite different goals (different enough). I'd be more confident with the proposal if one were dropped and the other developed further.
How would the drag and drop
How would the drag and drop changes be recorded without a sort function?
For sorting, you are
For sorting, you are communicating new order with the server. This is independent of Drag-n-drop, which is the interface you have in mind. The interface could also be up/down buttons (like view does it), or numbered boxes (like book outline).
It would be great to see this down well and generically so that any module can easily take advantage of it. You would have to convince me that drag-n-drop is not a major activity in itself, which is hard to accept, even if you exclude d-n-d of table rows.
But wouldn't the drag and
But wouldn't the drag and drop require sorting to work?
I'm imagining a function that would determine the type of object to be sorted and from there the type of container (tags) that would be modified by the javascript. The function would attach the javascript class to the tags, at which point the drag and drop could occur. I'm having trouble imagining how this would work if there was not a sort function to reassign the weights and region information. However, I have been thinking about this non-stop for about 3 days now, so I may be a little bit too wrapped up in it, to envision it clearly.
Some of this I have gleened from looking at code that has already been put together. Some of it has been explained to me by agentrickard. I think that I have the gist of how this would work, but I would certainly value input if I am working on incorrect assumptions or have not considered an aspect of this (such as the tables issue).
Without an existing
Without an existing "Interface" type library in Drupal, I think talking about drag and dropping elements in a list is premature.
By the way, kudos for attacking all these questions head first.
I guess I'm not sure what
I guess I'm not sure what you mean. Are you talking about a library of helper functions for drupal that perform these actions?
I reread this after a couple of moments and I think I have a better idea of what you might mean. Do you mean that we need a non-drag/drop interface for moving things around that is universal?
Well, whether that's true or not, you have given me a good idea of where to look for inspiration on how to do what I am trying to do.
Thank you very much for your feedback. This is very helpful as I try to hone my idea. Whether I make it into Summer of Code or not, I'm going to have some good ideas to work on for a while.
Do you think that the
Do you think that the sorting or the dragging and dropping is more important?
Can you argue that this
Can you argue that this proposal is better than just implementing a drag/drop library like one found here: http://interface.eyecon.ro/
It seems with that library and some simple ajax callbacks it would pretty much handle most drag/drop needs.
That being said:
I'd like to suggest that you DON'T sit and make individual functions for moving data around to save a sorted list. After working on this a lot with the playlist module, I tried to implement individual functions for moving one item up, one item down, and swapping weights in the database.
I found out that it's much easier to load the weights as a PHP array, and move the data around with the array (i.e. things like array_push) and then save the entire array all at once to the database. In this way you treat the order as a state that needs to be saved as opposed to trying to manipulate and keep track of weights individually in the database.
With this method you only really need two functions: load_weights and save_weights. Load_weights gives you an array of weights and save_weights saves the updated array of weights. All the re-ordering and manipulation happens with the array - this way you know when you save to the database you have good data, plus it's so much easier to manipulate an array than it is to futz with moving weights individually in the database. It also keeps the database interaction very separate from the UI interaction - we don't want a buggy UI to inject bad data into the database because it is too tightly linked.
Thank you very much for your
Thank you very much for your feedback.
What you suggest is along the lines of what I was thinking, although I have done a poor job of explaining it I see. I imagine this working by having a couple of functions that would:
1. Identify the object.
2. Select the proper positioning information based on previous identification. For blocks, it would be weight and region. For nodes in a list it would just be weight. For elements in a table, assuming that the items in a single row were not related to one another, you would need td and tr, I think. Because of the range of objects that we are talking about, flexibility has to be built in.
3. Return the positioning information as an array (possibly an array of arrays).
4. When the user drags and drops, the weights and positions of all affected items are recalculated.
5. This new information is then sent back to the database.
I'm not sure how many functions that would have to be, just yet. It seems that each of these are important aspects of this. However, I could be wrong.
Also, now that you mention it, this API would pretty much be an implementation of the interface library. You'll have to forgive me, I am still getting the hang of the lingo. I am self-taught.
drupal needs its own plugins
zirafa, my take on the Interface thing.
jQuery developers do not maintain releases compatible with drupal core jQuery. IMO, that will result in the Drupal community slowly building its own libraries.
Every Drupal release aims to
Every Drupal release aims to sync with every major jQuery release, or so I've heard.
I agree that Drupal will probably build out its own libraries or jQuery extensions to do things similar to Interface, but perhaps we can borrow some ideas from the Interface scripts, which seem to stay in sync with jQuery releases.
I have to say that I agree
I have to say that I agree with both of you. After reading the discussion here and staying up half the night thinking about it, I have come to some conclusions. Namely these:
Thank you both for your input. I have taken your ideas into consideration and where appropriate have modified my plan to suit this new information. I expect that the entire process will be like this. Getting and responding to all this feedback is very intense, but very gratifying all the same. I hope that I can count on your support and continued guidance for my project.
clarification
I think a large part of the project will be providing support for Interface within Drupal. It is currently not compatible with Drupal's jquery.js.
--
http://ken.therickards.com/
http://savannahnow.com/user/2
http://blufftontoday.com/user/3
--
http://ken.therickards.com/
Loaded my application to Google
Hello,
I just loaded my application to Google. The revised version of this proposal can be viewed at:
http://www.seanadamshiett.com/google-summer-code-proposal-drag-drop-and-...
Thanks for all your feedback.
if this is still being followed --
take a look at the following for drag and drop reordering of table rows
http://www.isocra.com/articles/table_dnd.php
Would it be possible to do
Would it be possible to do something like this: http://jqueryui.com/demos/sortable/#display-grid
...with an existing module? I see that 'jQuery Interface Sortable' is not maintained and is only available for d5.
Also, would the re-ordered lists be able to be saved in db?