DraggableViews

..makes views draggable

The DraggableViews module can be used to organize simple lists and complex structures via drag n' drop. The configuration is quite easy as you just have to access the style-plugin settings.

If you want it QUICK

The following instructions are for the 2.0.0 branch

1. Activate the module AND the demo module.
2. Add some draggableviews_demo content at node/add/draggableviews_demo
3. Go to admin/structure/views/view/draggableviews_demo.
4. Everything becomes crystal clear...

The following instructions are for the 8.x-1.x branch

1. Activate the module and navigate to the edit-page of an existing view.
2. Now go to the Format section and choose Table.
3. Make sure you have the "Content: Title" field, place it as your first field.
4. Add the field "Draggableviews: Content" at the Fields section, place it after the "Content: Title" field.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.
5. Add "DraggableViews: Weight" at the Sort criteria section and place it as the first Sort criteria. Save the view and you're done.

The following instructions are for the 7.x-2.x branch

1. Activate the module and navigate to the edit-page of an existing view.
2. Now go to the Format section and choose Table.
3. Make sure you have the [nid] field, place it as your first field and hide it
4. Add the field "Draggableviews: Content" at the Fields section.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.
5. Add "DraggableViews: Weight" at the Sort criteria section and place it as the first Sort criteria. Save the view and you're done.

The following instructions are for the 6.x-3.x branch

1. Activate the module and navigate to the edit-page of an existing view.
2. Add the field "Draggableviews: Order" at the Fields section.Make sure not to check "Exclude from display" or you won't be able to use the drag/drop feature.
3. Now change the Style-plugin at the Basic settings section to Draggable Table and enter the Style plugin settings.
4. Scroll down to the Draggable Table settings and choose the Order field you added just before, probably called 'Order'. Choose "Native" handler.
5. Save the settings. You'll be prompted to sort the view by the Order field
6. Add "DraggableViews: Order" at the Sort criteria section and place it as the first Sort criteria. For sorting order, choose "Ascending". Save the view and you're done.

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-medium drupal shop. The view is of the 'View type:' Node, and each employee at the company is represented by a custom Node 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 following instructions are for the 6.x-3.x branch

1. Once we've got the view working just right, we'll Clone the display. (The rest of these instructions will be for the newly cloned display.)
2. Rename the cloned display to indicate that it's for sorting.
3. Change the path. For the sake of this example let's use "about-us/our-team/sort"
4. If it's not already present, add a hidden field for the Node's nid. The DraggableViews module needs the nid to use as a reference
5. OPTIONAL: You can at this point remove fields from the display. When I'm sorting the list, I really just want to see the name and position so I would probably axe the Bio and Image fields. The only thing that the DraggableViews module actually requires is the Node's nid (which we added as a hidden field in the step before this)
6. Now you'll want to follow the 6 steps in the "If you want it QUICK" instructions above
7. As a final extra step, you'll go back to your regular page display for the view and add "DraggableViews: Order" at the Sort criteria section and place it as the first Sort criteria. For sorting order, choose "Ascending".
8. Go back to the original Page display, check the DraggableViews: Weight sort's options. There is "Display sort as" dropdown. You have to select the display you just created
9. And that's it, your regular page view at "about-us/our-team" should sort itself based on the way you sort it using the draggable view at "about-us/our-team/sort"

The following instructions are for the 7.x-2.x branch

1. Activate the 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. Add the field "Content: Nid" to the Fields section. Make sure to check "Exclude from display" place it as your first field and hide it.
6. Add the field "Draggableviews: Content" to the Fields section. 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.
7. Add "DraggableViews: Weight" to the Sort criteria section and place it as the first Sort criteria. Save the View and you're done with the sorting display.
8. OPTIONAL: You can at this point remove fields from the display. When I'm sorting the list, I really just want to see the name and position so I would probably axe the Bio and Image fields. The only thing that the DraggableViews module actually requires is the Node's nid (which we added as a hidden field in the step before this.) I usually only have "DraggableViews: Weight" in the Sort criteria section.
9. Return to the original View display and add "DraggableViews: Weight" to the Sort criteria section and place it as the first Sort criteria.
10. Set the "Display sort as" field to the new sorting display you created (you may need to save the View before the correct display is available).
11. Save the View.
12. If you created a block for your sort display, you will need to administer the blocks as appropriate.

The following instructions are for the 8.x-1.x branch (IN PROGRESS)

Below is a start on the D8 documentation, unfortunately this doens't work. Apparently this does: https://www.drupal.org/project/draggableviews/issues/2824325#comment-121....

1. Activate the 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. Add the field "Content: Title" to the Fields section. Make sure to check "Exclude from display" to hide it and place it as your first field. (for me this didn't show anything to sort with, not excluding the title did)
6. Add the field "Draggableviews: Content" to the Fields section. 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. This field has to be at the bottom of the fields section.
7. Add "DraggableViews: Weight" to the Sort criteria section and place it as the first Sort criteria. Save the View and you're done with the sorting display.
8. OPTIONAL: You can at this point remove fields from the display. When I'm sorting the list, I really just want to see the name and position so I would probably axe the Bio and Image fields. The only thing that the DraggableViews module actually requires is the Node's Title (which we added as a hidden field in the steps before this.) I usually only have "DraggableViews: Weight" in the Sort criteria section.
9. Return to the original View display and add "DraggableViews: Weight" to the Sort criteria section and place it as the first Sort criteria. save the view
10. On the original view display click on "DraggableViews:weight" in the sort criteria section. Update "Draggable Views Data" to be the name of the view's display you are using to sort the data.
11. Save the View.
12. OPTIONAL: If you created a block for your sort display, you will need to administer the blocks as appropriate.

This method of creating a "sorting interface" is great for preserving the flexibility of "Unformatted" (for the actual page view) but still use the power of DraggableViews for the sorting.

Simple lists

See "If you want it QUICK".

Hierarchies

If you want to build hierarchies you have to set the parent field. Use "Draggableviews: Parent" and choose "Native" handler if no third-party modules tells you something else. The maximum hierarchy depth can be specified at Define the depth limit.

Permissions

Use the "Allow Reordering" ("Access Draggableviews" in D7) permission to allow other roles to rearrange views. Otherwise the user will not see the drag-handles.

What you should be aware of

• Don't rely on the live preview. Commonly its output differs from the actual output.
• Using paging for large views with hierarchies can result in dramatic loss of performance because the view needs to be reloaded one to three times in order to display all relevant nodes. Actually this already takes effect when Items to display (Basic settings) are limited.
• The reordering does not seem to work if you have Caching turned on for the view. The drag/drop works but upon save it reverts to the previous order. If you need caching then have a seperate display for re-ordering, and turn caching off for that.

Third-party modules can implement their own handlers to save the structure information where ever they want. Always use "Native" handler if you don't use a third-party module that tells you something else. The fields "Draggableviews: Order" and "Draggableviews: Parent" (use both in combination with native handler only) are unique for each view but not unique for different displays of the same view.

Native handler settings

• Use arguments as well as view ID to order nodes: The views argument will be used to read/write order/parent values to/from the database.
  If any display uses arguments (and defines the "DraggableViews: Order" field; Native handler assumed) all displays (non-"Draggable Table"-style-plugins) will use arguments in their queries too (except they tell us explicitly something else). See #565146: Defined order not respected when Style different than Draggable Table

Pro's and Con's of the Native handler (described on this page)

• + minimum of overhead
• - no compatibility with other modules

If you don't need to use the order/hierarchy values with other modules you should always use the native handler.
Compare with the CCK handler.