cool tech graphics

Custom Sort Drupal Content with the Draggable Views Module

Filed under:

This article is one of Metal Toad's Top 20 Drupal Tips. Enjoy!

In the world of sorting, sometimes 'newest first' or 'oldest first' just doesn't cut it. During a recent Drupal project, we had a client who wanted to be able to control the order of their marquee images in random ways via a drag and drop interface.

Enter the Draggable Views module. In about thirty minutes, I was able to set up custom drag and drop functionality for several content types on their site. Let's dive in and I'll show you how it's done. If you prefer a video tutorial, skip to the end of this post.

Before You Begin

Make sure you have the lastest version of Views and also download the Draggable Views module.

The trick to getting the magic to happen is setting up two cooperative views. The first view shows your content in whatever way you have determined. The second view is created strictly to determine the order of that content.

Views Keeps Improving

In the time since I first used this module just a few weeks ago, the module has been upgraded to allow for using a different display on the same view, rather than two separate views, which makes matters even more tidy.

In my example, I started with my trusty page of kitten photos, created by this view:

Start with your main content view

From here you can just clone the original view and make a few changes:

Change display name

Rename the display to differentiate it from the normal content view.

Change display name

Change the Format setting to 'Table'. Remember to override the default view if your original setting is different.

Format the view as a table
Format the view as a table

Under Fields, add the draggable views field that will determine the sorting order.

Add draggable field
Add the draggable field
Configure the draggable field as needed

Under Sort Criteria, remove the default sort option and replace it with Draggable views weight

Add the new draggable sort option

Now go back to your original content view. Under Sort Criteria, add the Draggable Views weight just like you did in the sort display. This time, in the options you should see 'Display Sort As'. Choose the sorting view you created. Any other sorting views you create will populate the drop-down list here. (Don't forget to use the override setting so you don't affect the sorting view settings).

Select the sorting view to control the order

You should see a preview of your table view with the draggable weights on the far left.

You can reorder the rest of the fields to suit your needs. I like to put the photo first, since that is the easiest to recognize.

Check the preview to make sure it worked.

Happy sorting! Now go shuffle some kittens.

Date posted: February 16, 2012

Comments

How about when adding a new node:

-Do you need to get back to the view and rearrange order.
-User/Editor need to have access to edit view.

Best Regards
Jesus Manuel Olivas
@jmolivas

By default no, you can't custom order from a new node add form, but once you go back to the content view, you get an extra contextual link for ordering the view.

And yes, the editor would need access to views. That would be a good addition to make those separate permissions somehow.

Nice tutorial! Yesterday, i used DraggableViews on a project, and i'm big fan already :)

At least on the 7.x-2.x branch, users only need the "Access draggable views" permission to use DraggableViews.

That was fast, thanks for your answer

Jesus

Is this better (less memory usage - db calls) to use this method over Nodequeues?

@ fndtn357,

I have no idea. I asked our senior Drupal tech lead and he didn't know either. If you end up running any tests, let us know what you find!

thanks for the link

@Roberto,

I just tried taking off 'administer views' permission while leaving on the 'access draggable views' permission and it doesn't work. I'm on Views 7.x-3.x and Draggable Views 7.x-2.x.

I may experiment with trying a more lenient access permission in the particular view itself. Thanks for the comment.

I'm using DraggableViews 7.x-2.x-dev and Views 7.x-3.1

Sorting a list of nodes assigned to a taxonomy.

Smartqueue taxonomy adds all taxonomy terms into views for you automatically.

A while back I tried out different ordering modules and then Weight was the only one which worked the way I wanted. It has also stable release available.

Hi Kronda, your post and the screencast were awesome, thanks so much you made us better drupalers :) .
I have one BIG question,
I noticed at the beginning on the demo site,
there is a thick dotted horizontal line below the enabeled rows seperating it from the rest of rows which are dimmed.
how can I do that ?

This was a small snippet of jQuery we added that adds the dotted line and fades the ones below :)

Any know how implement in custom module a views_handler_filter_draggable?

Tks!

HI,
Not able to reorder cck fields delta values in dragabble views .
Please help me,any help will be appreciated!

Support for field deltas is not provided by this module, though there's an open issue at http://drupal.org/node/877162.

Hi Dylan,
Is there any alternate solution for this?

Thanks for this but does this works with blocks?

I tried to do it but the Order View option doesn't show up.

Am I missing something or it's just that this doesn't work with blocks?

This is an old post, so it may not apply anymore, but at the time of writing and the last time I used it, draggable views definitely supported blocks.

Thanks for this great tutorial! It works fine for me!

But do you know if there is a chance to sort fields within the nodes and not just the nodes?

For example: I have two different nodes with more than one picture in each node. Now I want to sort the pictures like
- picture 1 from node 1
- picture 2 from node 2
- picture 2 from node 1 ...

It would be awesome if anybody could give me an hint!

Superb thanks..........

If you rename the machine name of your display after adding the draggable sort, the order view contextual link will not be added due to a config in draggable field referecing the original machine name of the display.

To fix this, export your view, look for the old display machine name, and update, and import the view again.

Add new comment

Restricted HTML

  • Allowed HTML tags: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • You can enable syntax highlighting of source code with the following tags: <code>, <blockcode>, <cpp>, <java>, <php>. The supported tag styles are: <foo>, [foo].
  • Web page addresses and email addresses turn into links automatically.
  • Lines and paragraphs break automatically.

Metal Toad is an Advanced AWS Consulting Partner. Learn more about our AWS Managed Services

Schedule a Free Consultation

Speak with our team to understand how Metal Toad can help you drive innovation, growth, and success.