[Drupal] Display View items using Draggable Views module.

| | 1 min read

Here is a document which describes how the contents in a View can be displayed in a table format as well as it can be dragged and dropped from one row to an another row without using any additional jQuery functions. We have done this in Drupal 7 and this can be achieved using a module named 'DragabbleViews'. You can download it from this link: http://drupal.org/project/draggableviews. This module requires the 'Views' module to be installed already in your system.

We actually had a requirement where our client needed a page where he can re-arrange the contents using simple drag-and-drop approach. So to implement a 'draggable View', the following steps needs to be performed after installing the 'DragabbleViews' module.

  • Goto Views edit-page. Click on the link under 'Format' and select 'Draggable Table' from the list. Apply the changes.
  • Under the 'Fields' section, click on the 'add' link and select 'Draggableviews: Order' from the select-box. Apply the changes.
  • Additional fields can be added (like Title, Body) from the 'Fields' section which can be used as View items.
  • Under 'Sort criteria', add 'DraggableViews: Order' in ascending order
  • Under 'Format', click on the 'Settings' link and set the 'Order Field:' by choosing 'Order' for the 'Field' column and 'Native' for 'Handler'.
  • Save the View.

The View displayed will now contain a drag-and-drop icon using which the items can be dragged and dropped. There is a 'Save Order' button by default which is used to save the order list after the drag-and-drop process.