In many instances, I have seen drag and drop (dnd) ordering, rearranging, what have you, used where it perhaps didn't really need to be, but sometimes, there is a real good use for it. I ran into that today.

Views Slideshow Imageflow
I had implemented the Cover Flow-esque views plugin, Views Slideshow Imageflow (http://drupal.org/project/views_slideshow_imageflow), and got it looking great by having it orient the middle image of the bunch as the one that shows up front and center, so that there would be images to either side, and it would look somewhat symmetrical.

This presented a heck of a problem though. When you have a lot of node images you are displaying from all these different nodes, how do you arrange which one shows up in the middle?

First thing I tried was adding a position cck field, with allowable values from -50 to 50, and handed that off for the customer to work on ordering. What I didn't realize is that there is a mental disconnect that happens when you are trying to figure out how to order a vertical list of items that don't display the ordering to you, into a horizontal carousel that starts in the middle. It was a mess.

After dealing with the frustration of that solution, the new solution we hashed out ended up being a draggable table of nodes that we could then use the order of as a sort order for the imageflow view.

So, after a good tip from @heyrocker on twitter, I searched and found the Draggable Views module (http://drupal.org/project/draggableviews). It was precisely what was needed. I will not tell you how to set it up, that is dealt with directly on the modules documentation page, but I can say it's a snap.

After doing the quick setup, I decided to throw out the order field that I had originally built, and just used the default "order" item provided by the draggableviews module, that is available as a field when you alter your view. Then, I simply used that order field as the sort item in the Slideshow view.

The last problem I encountered was that it still wasn't clear which one of the items was actually the very important middle image. For that I turned to jquery:

$(".tabledrag-handle").bind("mouseup", function(e){
  $('tr.first-half').removeClass('first-half');
  $('tr.middle-row').removeClass('middle-row');
  var $table = $("#draggableview_covers_block_1");
  var rows = $table.attr("rows");
  var i=0; $(rows).filter( function(){  return ++i <= rows.length/2;} ).addClass("first-half");
  $(".first-half:last").next().addClass("middle-row");
});

Then just add a style to the style.css that gives a background-color to first-half, and a more striking color to middle-row, and you get:

draggable table with middle

Well, I hope the customer takes a look at it in the morning and likes what she sees. If I have done a great job, she might bake me some more of her special thumbprint cookies and hot cocoa for payment. Wink-wink-nudge-nudge wife :)

It rocks!

It rocks hard. You rock. And cookies are yours. Plus cocoa with marshmallows.

I have done similar things

I have done similar things (except for the finding the middle part) with the weight module: http://drupal.org/project/weight - It also allows you to create a view with draggable rows.

Powered by Drupal, an open source content management system