Darren Mothersele

Software Developer

Warning: You are viewing old, legacy content. Kept for posterity. Information is out of date. Code samples probably don't work. My opinions have probably changed. Browse at your own risk.

jQuery Drag and Drop in Drupal 7

May 24, 2012

web-dev

So, since recording that screencast that I never posted I have revised the example a little bit. Rather than re-record the screencast, as I don't have much time. I've posted the code to GitHub - as requested in the comments on the original post. To get up and running checkout the GitHub project for the example, or read on for more details...

The example is in the form of an install profile for Drupal 7. You could just download Drupal core, install this profile with it's dependencies into the profile folder and run through the Drupal installed, but the preferred mechanism is using Drush Make. Assuming you've installed Drush Make, use this command:

drush make http://tinyurl.com/c7cqzpz dragndrop

That uses Drush Make to download Drupal code, all the required dependencies, and the example module. The example module was packaged using Features. Look in Features to see what configuration is part of that. You'll find a couple of content types, some views, rules, etc.

Install using the dragndrop profile, then create some test content.

Have a look at dragndrop-example.js in the dragndrop_example folder in the install profile for details of what the jQuery is doing. Look in dragndrop_example.module and you can see the jQuery UI libraries included from core.

That's all for now. Check the original post to get an idea of what it's doing. I'm happy to answer any questions in the comments.