Creating a Drag & Drop Sorting Interface for a Drupal View

Drupal Version
7

INTRODUCTION

Almost all Drupal websites will have multiple Views displays containing output of various content but your options to sort this content are usually limited. Most Views displays can only practically be sorted by creation date or node title. This will work well in many cases but if you need to implement user-friendly manual controlled sorting then you will need expand Views.

There’s a page on Drupal.org comparing various Node ordering Modules but our favorite is DraggbleViews and in this article we’ll show you how to use it to create a drag and drop sortable image gallery.

INSTALLATION

  • Install the latest 7.x.2.x branch of DraggableViews from Drupal.org. For Drush users the project name is 'draggableviews'
  • Module dependencies: Views, Chaos tools, Entity API

SETUP

DraggableViews will allow you to make rows of a Drupal View "draggable" which means that they can be rearranged using Drag and Drop interface. For this example we've created a Content Type called Images that contains an Image Field that will be used for a photo gallery page on our website.

We then created multiple Image Nodes containing stock photography images. Our View is currently limited to a few sorting options like creation date and title but.we want to allow for our editors to easily reorder the images so now we’ll setup DraggableViews and create a sorting interface.

  1. Edit your existing View that you want to be sortable (in this example it’s our image page View).
  2. Add a new display to your existing View. This new display should normally be a Page display type and this is what will be used as the sorting interface.
    Drupal View for Drag Drop sorting
  3. Setup your new View's Display similar to the following (This will vary depending on your specific needs).
    • IMPORTANT: Be sure to override this sorting display for all applicable settings so you you’re not also changing the main View display when we edit the Sorting Display's options in the following steps.
    • Set Display and Title to reflect your sorting display. Example, “Sort Images”.
    • IMPORTANT: The display format must be set to Table.
    • Add only the minimal amount of fields needed to be visible for your node’s sorting purposes. For example, only display the node titles or, as in this example, small thumbnails of the node’s image.
      • Add a title, image thumbnail, or some other visual reference field.
      • Add a NID (Node ID) field and be sure to select ‘Exclude from Display’.
      • Add the “DraggableViews” field, leaving the default settings.
    • Remove any sorting criteria that may already be in your View and add the “DraggableViews Weight” field as the sort criteria for both this sorting View and the main display View. The parent View’s DraggableViews sort field needs to be set to use the new sorting View in its “Display Sort as” setting.
    • Give your sorting View a page path. I like to use something like “admin/content/sort/photos” so a menu link will be available in the administration menus. Make this a ‘Normal Menu Entry” and be sure to set the Views menu path to ‘Management’.
  4. Drupal DraggableViews Views Setup

    Once you save your View you should now have a page containing the content of your View with handles to the right of them for drag and drop sorting.

    drag drop sorting interface drupal views

    PERMISSIONS

    Be sure to the appropriate permissions for your sorting View. There is also a “Access draggable views” permission that must be granted. If a user has access to the sorting View but does not have the “Access draggable views” permission then they will see the View without the drag and drop handles.

    Drupal Draggable Views Permissions

    MENU LINKS

    If you set your sortable View's path to something like '“admin/content/sort/photos' as described above and also set a "Normal menu entry" for the "Management" menu then you will now have a menu link to your sorting page from your administration menu.

    Your new sorting page will also be accessible by the View's Contextual Link, allowing for direct and quick access to sorting the View right from the main page.

    Draggable Views sort menu

    NOTES

    You should not rely on View's live preview as it may differ from the actual output.

    The reordering may not work if you have Caching turned on for your View. The drag and drop may work but upon saving your ordering it will revert back to the previous order. If you need caching then you will need to create a separate display for sorting and turn caching off for that View only.


Video Tutorial of this Article

Author Information

Written by: Shawn Ostermann

Shawn is a Drupal Specialists with over 12 years of experiencing building and developing Drupal websites including custom module development and e-commerce websites.