Installation and Setup

Last updated on
29 May 2024

Quick start demo

  1. Activate the DraggableViews module AND the demo submodule
  2. Add some draggableviews_demo content at node/add/draggableviews_demo
  3. Go to admin/structure/views/view/draggableviews_demo
  4. Use the provided view as a reference for how this module should be configured

Creating a "Sorting Interface" for a view

Suppose that you have a view that needs to be sorted arbitrarily. The *simplest* solution is to create a "weight" field in the content type you're trying to sort... but that comes with a whole mess of problems that we don't need to get into right now. With DraggableViews you can create a "sorting interface" that will allow users to sort the result of the view using Drupal's built in drag and drop functionality. The simple overview for this is:

  1. Create a view
  2. Create one display that will be the actual list displayed to visitors
  3. Create another display that will act as a "sorting interface" and be used to sort the result of the view

For this example we'll describe a view that is a list of the employees at a small-to-medium Drupal shop. The view is of the 'View type:' Node, and each employee at the company is represented by a custom content type: "employee".

Using the view we've conceived above (a list of the employees at a small-medium Drupal shop) imagine we've created the relatively simple view with fields for Name, Position, a Head-shot (image), and a quick Bio. We also have one 'page' display set up with the path "about-us/our-team". The page is going to be used on the Company website and we want the employees to be in order of "importance" with the boss at the top, and moving down the corporate ladder after that. This is where DraggableViews comes in.

The steps below assume the use of fields in your view display, which is the recommended approach.

  1. Activate the DragabbleViews module and navigate to the edit-page of an existing view.
  2. Clone the current display or add a new {page/attachment/block}.
  3. Rename the cloned display to indicate that it's for sorting.
  4. Now go to the Format section for the new display and choose Table.
  5. Set permissions for this new display to the "Access Draggableviews" permission, or a value appropriate to your site.
  6. Make sure "Content: Title" is the first field. Additional content fields are not required.
  7. Add the field "Draggableviews: Content" to the Fields section, after the title. Make sure not to check "Exclude from display"; if you do the view will permit drag and drop but the changes will not be saved.
  8. Add "DraggableViews: Weight" to the Sort criteria section and place it as the first Sort criteria. In the "Draggable Views Data" dropdown, select the display you created in step 2. Make sure that that this is set for "All displays" in the configuration modal. If you have a display using overridden sort criteria and you want it to use the order set via drag-and-drop, you will need to either revert that display to the default sort, or manually reproduce the same configuration on that display
  9. Save the View and you're done with the sorting display.
  10. OPTIONAL: If you created a block for your sort display, you will need to place the block as appropriate.

Note that a table format is required for the sorting display, but the publicly visible display of content can use any format you like, including "Unformatted".

Help improve this page

Page status: No known problems

You can: