Wednesday, May 8, 2013

Enable Drag and Drop on Content and Media trees in Umbraco

For Umbraco 7 go here.

Updated 6/12/2013: 
  • Updated nestedSortable.js with a working version.
  • Added allowed child types validation on move (and root level validation in Umbraco 6.0+).
  • Updated error message and notification popup code.
  • All of the code has been updated to please replace your local files/customizations with the new code.
Updated 6/17/2013:
  • Added better isAllowed detection.  Nodes will now move back if not allowed at a location.

This is a Javascript level Drag and Drop add-on for Umbraco.  It will allow you to sort and move content and media items abound and into or out of the trash.  Further more it will update the sorting of items and urls of documents are they are moved.

Unfortunately the changes require updating two core umbraco files so I can't make them into a package.  Just follow these simple instructions and you to can have drag and drop nodes.

First add this script file to your Scripts folder. jquery.mjs.nestedSortable.js (Technically it would be more logical to place this in /umbraco/js but I prefer to keep the code outside the normal umbraco folders.)

Next step edit /umbraco/umbraco.aspx to reference this new script.  Add the following to the list of scripts updating the path if needed.

<umb:JsInclude ID="JsInclude18" runat="server" FilePath="../Scripts/jquery.mjs.nestedSortable.js" PathNameAlias="UmbracoRoot" />

Now for a slightly more tricky step.  Open up the /umbraco_client/Tree/UmbracoTree.js script and add the following at line 207 between the marked before an after lines.

Now if you reload your Umbraco Backoffice page you will have the power of drag and drop.  If you still can't drag and drop items you may need to clear your browser cache or increment the clientDependency version in your ClientDependency.config file.

The last step is to add the following code to you App_Code directory to enable the client side changes to be saved in the backend.  This code can be added to a precompiled dll if you prefer.   Also if you are using Umbraco 6.0+ then uncomment the four Allowed in Root checks for additional validation.

If you upgrade your Umbraco version you will need to re-apply the customizations in steps 2 and 3 as they will get overwritten.


Martin Griffiths said...

Hi Jeremy

I found your code through my feature request raised so long ago!

Do you know if this will be added to the core? Will it work in Umbraco 7?


Jeremy Pyne said...

My understanding is the fore team wants to keep "organization operations" separate from content interaction. Ie to prevent accidentally moving things around and losing them.

It was suggested to do this is a package, but that won't work with this implementation(it needs to inject JS into the sidebar).

Kinda annoying though as it shows confirmations for any "drastic changes" like moving a document to a new location/url,

Richards_Blog said...

Will work in Version 7 of Umbraco as a client enhancement?

Richards_Blog said...

Jeremy - sorry - didn't read your earlier comment. Not clear on your answer tho. Clearly your drag and drop won't work as a package, but will it still work on the client side as a js enhancement as it now does on 6.x and 4.x?

Richards_Blog said...

@Jeremy - any success with drag and drop on Umbraco 7

"I'm working on some new code for v7. (c# and js both hade to be rewritten :() I'm working on some new code for v7. (c# and js both hade to be rewritten :()"

Manic77 said...

First of all, thanks for this. Such a handy piece of code that really should be incorporated into the Umbraco core.

I just want to point out that the ResetDragDrop.cs file should be placed in App_Code, not App_Data. That's where I had to put it to get it working, anyhow.

Angelo Miguel Santos said...

any news for u7 ?

thank you


Jeremy Pyne said...

New version works in all versions of Umbraco 7 and requires no backend code.

Manic77 said...

Thanks for this; it's super handy!

One quick note: you say to place the ResetDragDrop.cs file into the App_Data folder, but it needs to be placed in the App_Code folder.