Creating a form with draggable elements
In this blog post we give a step by step tutorial on creating forms with draggable elements.
Today we’re going to look at a function called ‘drupal_add_tabledrag’. As it’s name somewhat suggests, it gives the user the ability to drag rows up and down within a table. If we render a form wrapped in a table with this functionality, this immediately becomes useful - infact, we used drupal_add_tabledrag recently for a module (see fig 1) in which we wanted the user to be able to drag elements of a Tweet round into the order they wished them to be displayed on the front-end.
For this tutorial, we’ll be creating a new module that outputs a block with a form and the order of the elements within this form will be draggable.
First off, create a folder within ‘sites/default/modules’ (if the folder ‘modules’ doesn’t exist create it) called ‘curve_table_drag’ and inside this folder create 2 files - named ‘curve_table_drag.info’ and ‘curve_table_drag.module’. Open up ‘curve_table_drag.info’ and paste the following code into the file:
All we’re basically doing here is defining basic information about this module. With the creation of those two files and the inclusion of module information in the *.info file, we’ve basically just defined all that’s required for us to turn the module on and begin writing module code (even though admittedly the module doesn’t actually currently do anything). When done navigate to ‘admin/modules’ within your Drupal install and switch the newly created module module on.
The first thing we’re going to add to ‘curve_table_drag.module’ is an instance of hook_form() which defines a parent form element and 5 child items (all of which contain a label and two text fields - one of which is used for the weighting). Let’s paste the following code into our *.module file.
One thing to note here is the addition of
in the weight textfield. This is responsible for adding a class to this textfield that tells the ‘drupal_add_tabledrag’ function that this element defines the weight. Aside from this, we’re basically just taking advantage of functionality provided by Drupal in the form API (http://api.drupal.org/api/drupal/developer!topics!forms_api_reference.ht...).
Let’s now create the block that we will use to contain the form. Here we’ll be using both ‘hook_block_info()’ and ‘hook_block_view()’. Let’s paste the following two blocks of code into our module.
Here we’re using ‘hook_block_info()’ to define the basic attributes of the block (i.e. the name of the block and the level of caching we want to have on this block). With ‘hook_block_view()’ we’re now saying to Drupal - hey, if you have a block defined as ‘curve_table_drag_block’ give it the title of ‘Draggable table demo’ and display the form we defined at the top of the module as it’s content.
Let’s see what we’ve created so far looks like (you might need to clear your Drupal cache at this point by navigating to ‘admin/config/development/performance’ and selecting ‘Clear all caches’). Let’s navigate to ‘admin/structure/block’ and move ‘Block: Curve Table Drag’ into the content region (see fig 2).
Once saved, navigate to the homepage of your site and you should see something similar to the following (see fig 3).
This is good, but now let’s add the table drag functionality! For us to enable table drag functionality, we’re first going to define a theme implementation using ‘hook_theme()’ and we’re then going to build a theme function (that will be responsible for theming our form). First up, paste the following code into your *.module file.
Here we’re essentially defining ‘theme_curve_table_drag_components’, which is included below. Paste the function ‘theme_curve_table_drag_components()’ into your module.
In a nutshell, this theme function takes the form array we defined right at the start of this tutorial and runs through it line by line, adds the class ‘draggable’ to each row and then outputs the whole form through a table with an ID of ‘sample_table’. Right at the top of this function we are calling ‘drupal_add_tabledrag()’ using the various classes we’ve defined throughout the the tutorial and if we’ve done everything correctly, your block displaying on the homepage should now look like this (see fig 4).
You now have a draggable list of form elements that can be ordered as you wish!
If you have any questions regarding the above, please feel free to get in touch with the Curve team here: email@example.com