Updated 8/20/2018:
- Corrections and new UmbracoTree.js code for newer v6 an jQuery versions.
- Corrections for issues sorting nodes.
- 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. In older versions you may need to change the line to start with
<umb: instead.<cdf: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.
10 comments:
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?
Martin
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,
Will https://github.com/pynej/Umbraco-CMS/tree/drag-and-drop work in Version 7 of Umbraco as a client enhancement?
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?
@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 :()"
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.
any news for u7 ?
thank you
AS
New version http://pynej.blogspot.com/2015/07/drag-and-drop-in-umbraco-7.html works in all versions of Umbraco 7 and requires no backend code.
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.
I am on 6.2.6 and using your drag and drop which we used successfully in 4.11.10 but it fails on 6.2.6. First Umbraco 6.2.6 uses JQuery 1.7 and that may be part of the problem. The call to the server "/Base/Draggable/CanHaveNode return a parseerror on return of "". Invalid JSON but with status code of "200" and status OK in the Chrome or Firefox developer tools Network tab. In the jquery ajax() return it will only return "error", never success.
Ajax error message: "JSON.parse: unexpected character at line 1 column 1 of the JSON data".
Post a Comment