U4-229 - [Feature Request] 7.2.8 Drag and Drop Tree nodes

Created by Sebastiaan Janssen 16 Aug 2012, 06:52:16 Updated by Jeremy Pyne 20 Aug 2018, 16:48:20

Tags: PR

Is duplicated by: U4-1336

Is duplicated by: U4-3434

Relates to: U4-8109

Relates to: U4-156

=Absolute Requirements=

In order for the Core to ship with a drag & drop tree node structure the following requirements must be met. We cannot ship with this functionality in the core if it is only partially working, it needs to be rock solid since this functionality will be used by administrators, not developers or anyone else who might be aware of limitations.

  • Must be able to be turned off globally - based on the umbracoSettings.config
  • During the 'drop' process, the entire app (tree, sections, editor) must be 'locked', meaning there can be no interaction tree until the drop is completed. This prevents potential accidents from occurring like multiple drag/drops at one time, trying to save while a drop is being processed, etc...
  • Dragging only starts after a 'long press'. Once the long press is complete some UI indication must be made to indicate the admin is in drag/drop mode. This is effective for both UX and to prevent accidental drag/drop
  • Drag drop must work for sorting, and moving (including moving to and from recycle bin)
  • Must only be enabled on the content and media trees
  • Confirmation dialog on drop must be shown and use the Umbraco angular Ok/Cancel dialog, not the browser confirm dialog.
  • The JS tree code (i.e. tree service, tree directives) must not have any hard references to media or content trees, this needs to be decoupled, the drag/drop options for a given tree must come from the server. ** This makes it extensible to potentially be used for other trees. This would probably need to be done with a custom attribute or interface that a tree controller implements and the tree data result would reflect it.
  • Dialogs and menus need to be closed once the "long press" is complete and drag mode is enabled

=Suggested/Future Requirements=

These are suggested requirements, it would be ideal that this functionality was made with these requirements in mind so that it will definitely work for these. These requirements will need to be in places at some stage, so they are not optional, they are only optional for an initial release:

  • Needs to work with touch screens
  • Should not allow dropping on nodes that are not allowed - this would have a UI indication before the drop so the admin doesn't have to wait for the error message to be shown after the drop. Allowed drop nodes are based on both user permissions and node type allowed hierarchy
  • Copying would be nice but need to think how that would be possible

=Original issue text (edited)=

There are two UI areas in Umbraco that I feel have been quite weak for some time.

  1. The lack of drag and drop in the content/media tree
  2. --The lack of a splitter with cookie to reposition the pane width between the tree (left) and property data (right)--

It would be a lot more user friendly to be able to (with or without confirmation/commit dialog - as developer options) reorder single items or entire parent/child nodes by simply dragging the nodes. This is as useful to developers repurposing sites as it is for end-users. The system currently in place can be quite time consuming and tedious when working with a lot of content.

4 Attachments

Download DragDropApiController.cs


Richard 25 Oct 2012, 14:53:23

Yes, these would be so useful for me too.

Sarah Green 20 Jan 2013, 07:19:23

Bump ... this is an important usability issue yet it's been sitting unaddressed for nearly 3 years

Sebastiaan Janssen 20 Jan 2013, 09:24:22

@Sarah we are going to be addressing usability in v7 of Umbraco, where the whole UI is being re-thought. Read more about it (Project Belle) in our recent newsletter: http://umbraco.cmail5.com/t/ViewEmail/y/D2843F6FAE874C2C/60219303DA496B196E6039C17E42EE19#toc_item_0

Sarah Green 20 Jan 2013, 09:32:20

Thanks @Seb ... so it sounds like version 6 is pretty much just a precursor to v7/Belle ... I can't see much worth having from a user point of view

Sebastiaan Janssen 20 Jan 2013, 15:37:41

@Sarah v6 is not targeted at end users no, it's for 95% focused on providing new API's for developers.

Sarah Green 20 Jan 2013, 18:31:20

Fair enough

Emilie 31 Jan 2013, 13:50:16

Well, drag and drop works in Content in v 4.10 - 6. But it doesnt save. ;)

Jeremy Pyne 07 May 2013, 15:20:19

I made a custom package to enable drag and drop. I'll see about getting it added to the repository.

Jeremy Pyne 08 May 2013, 13:43:11

Here is the code/approch we use. I can't make a package from it due to it needing to inject a JS reference and add some code to the UmbracoTrees.js file. I couldn't find any sort of event to hook into to trigger my code when the tree is rendered. (This is a purely client side approach that uses a Rest/Base interface to save changes back to the database.


Richard N Barg 11 Jun 2013, 00:08:34

My sentiments.

Feature Requests One - D & D Move, D&D Sort, and more.


Jeroen Breuer 11 Jun 2013, 00:10:21

Some of this feedback could be useful for belle v7.

Richard N Barg 12 Jun 2013, 00:17:26

@Sebastiaan - So I watched the screencast of Project Belle in the newsletter referenced above. The UI is very clean and modern - design element are similar in style to what Apple showed off yesterday in IOS 7. I'm sure Jony Ive would approve. However, functionality and utility are as important as brushing up the design. The tree is great, but as noted, U4-229 functionality has been missing since day 1 and is not found on the screencast from what I can see. These are critical features. The "Content Maintenance Dashboard" extension currently in U is a fantastic add-on. It allows multiple nodes to be moved, published, unpublished etc. simultaneously and allows filtering by document type, text, and nodal position. Too bad, never knew about it until recently. That functionality to move/publish/find/search/filter multiple nodes on a single pass, IMHO, should be built into the core. Unfortunately there is no "Media Maintenance Dashboard" to match the CMD to move multiple files across folders, so its still a pain to do this (which is why were now investigating Jeremy Pyne's solution). When HQ rolled out a new media library in 4.9, the drag and drop does not apply to moving items between folders, rather inexplicably I might add. Sure its nice to be able to resort using drag and drop, but the overarching need for all trees is to have a Windows Explorer / Apple Finder modern 21st century node managment. The lack of a robust set of file moving utilities that encompasses drag and drop and reconfiguring a site without having to do it w/Windows 3.1 functionality of the 1990s node by node is painfully slow, and adding 21st century functionality to the tree should be a priority for this redesign. Form is important, but so is function!

Richard N Barg 13 Jun 2013, 18:45:26

re: Jeremy Pyne's package, http://pynej.blogspot.com/2013/05/enable-drag-and-drop-on-content-and.html , we installed it and then recommended a few tweaks and modifications which Jeremy made very quickly. It's an outstanding piece of programming and provides functionality that is missing from Umbraco and will likely be so fo rthe near future. For more details, see above link as well as Google+ thread detailing changes.

Funka! 13 Jun 2013, 18:55:25

Jeremy's approach looks awesome! Can't wait to test this out. It also seems simple enough that one might hope that it could get pulled into the 4.x and 6.x branches?

Jeremy Pyne 17 Jun 2013, 16:51:25

I created a fork on v6 and migrated the custom code into the core as a JS + Web Services/JSON exstention to the UmbacoTree.js code.

This includes live document/media tye checking when moving nodes around and will display nice error/success messages.

Jeremy Pyne 17 Jun 2013, 16:58:09

The version I posted is working in FF/Chrome.

Jeremy Pyne 24 Jun 2013, 16:59:02

Drag and drop for v6: https://github.com/pynej/Umbraco-CMS/tree/drag-and-drop

Richard N Barg 24 Jun 2013, 18:27:00

@Funka!- I had the chance to do a lot of reorganizing of our tree which has 55 websites. The D&D saved a ton of time. In the media library where there is no equivalent of the Content Maintenance Dashboard, it's a godsend.

Funka! 04 Sep 2013, 22:14:05

Hey there, just checking in on this again,

Is this going to be "due in" v6.2.0, or have there been any other updates as to the status of your pull request, Jeremy?

It is somewhat hinted in the quick description on the ["Roadmap" page for 6.2.0 over at our.umbraco.org|http://our.umbraco.org/contribute/releases/620] saying this would be included, but then isn't actually shown in the list under "Planned Features"...? (i.e., I was hoping to see this issue number referenced there, but didn't.)


Funka! 04 Sep 2013, 23:39:01

Hi Jeremy,

I have followed and double-checked the instructions you included on your blog post, but am getting a mountain of 404 errors when trying to drag anything.

The 404 error is happening on the path {{/Base/Draggable/CanHaveNode/content/1260/1261?_=1378336797068}}. This is a pretty clean v6.1.3 with nothing really installed other than uComponents. I've found some partial documentation what "/Base" is, but from there I either find a broken link on how to install, or am told I don't need to worry about it if using Umbraco 4.6 or greater? Is there some other step I'm missing? -Thank you!

Jeremy Pyne 05 Sep 2013, 01:20:15

Its justa internal method in Umbraco to let frontend stuff talk with the backend. Make sure that you added the ResetDragDrop.cs file to your App_Code Dirrectoy as thats what adds that function.

Funka! 05 Sep 2013, 21:04:04

Hi Jeremy, I did copy the ResetDragDrop.cs file to App_Code, but no success. (Your blog article says to copy this to App_Data which I thought was maybe a mistake, so ended up trying both.) Am I supposed to have special "/Base" path defined in my settings or routing config somewhere? Still getting a 404. Thank you!

Jeremy Pyne 05 Sep 2013, 21:16:06

Oop, yah, thats an error. You can try this tipple test to see is /Base is working. (It shouldn't need any special config.)

Create the following file in App_Code. Then try navigating to /Base/TestBase/RunTest

using System; using System.Collections.Generic; using System.Linq; using System.Text; using Umbraco.Web.BaseRest; using System.Xml.Linq; using System.Web;

namespace TestBase { [RestExtension("TestBase")] public class Rest TestBase { [RestExtensionMethod(ReturnXml=false)] public static string RunTest() { return "It Works!!!"; } } }

You can also check your UmbacoTraceLog file and you should see something like this show up after the Application Pool Cycles. Starting resolution types of Umbraco.Web.BaseRest.RestExtensionAttribute Umbraco.Core.PluginManager - [Thread 25] Completed resolution of types of Umbraco.Web.BaseRest.RestExtensionAttribute, found 8 (took 0ms)

Funka! 05 Sep 2013, 21:30:45

OK weird, I'm sorry to waste your time, but it's now working! I restarted the IIS site this time and it started working; I guess touching the web.config file wasn't enough to do this? (Which I tried multiple times.)

So far this is making me very happy! But I've noticed two minor issues so far: where is the best place to report these? I don't see an "Issues" section in the github repo for this... Shall I include them here? (#1, Sorting a node amongst existing siblings without changing parents appears to work at first, but if you refresh tree you see the change didn't stick, and also #2, if you say "cancel" after being prompted to move a node from one branch to another, the node still seems like it was moved into the destination node until you refresh tree again to reset it...) Thank you again for your work on this!

Richard N Barg 05 Sep 2013, 22:40:34

I have commented on some of these issues on Jeremy's blog. First, as noted, a lateral move between children of the same level doesn't work - it rearranges the nodes, but doesn't alter their ordinal position on the front end. To do that you have to do a conventional on the back end and sort something. Then the changes take. A bit of a kluge. We're running 4.71. If are trying to recorder sibling nodes that are only of use on the back end its serviceable. I haven't seen the sibling nodes go back to their place on refresh, but they definitely don't change on the front end. Nodes move fine between nodes of different levels and this is highly, highly useful. The media library doesn't care about the front end so rearranging siblings works fine there. As far as trying to move a file to an illegal folder and the move appearing to have taken place, I haven't seen that behavior. Will test again.

Richard N Barg 05 Sep 2013, 22:44:22

Funka! just curious - any inside story on your user name? :)

Martin Griffiths 13 Jan 2014, 15:57:22

This feature request has generated a lot of interest for some time. A pull here and there has added drag and drop functionality in specific areas but we still don't have this much needed functionality in the main tree for content and media. I've added some comments on sorting specifically here with comments again on drag and drop for Belle...


Richard N Barg 13 Jan 2014, 21:21:34

@Jeremy Will the client side JS still work in Version 6? We're using it on 4.71 and are thinking of upgrading. We don't want to lose that feature. Anyone using the client side drag and drop on Version 6?

"Here is the code/approach we use. I can't make a package from it due to it needing to inject a JS reference and add some code to the UmbracoTrees.js file. I couldn't find any sort of event to hook into to trigger my code when the tree is rendered. (This is a purely client side approach that uses a Rest/Base interface to save changes back to the database."


Jeremy Pyne 13 Jan 2014, 21:27:14

I use it on v6. The c# code is the same. I don't recall any issues/changes in the JS code to integrate it.

Martin Griffiths 14 Jan 2014, 09:29:24

Hi Jeremy I left a comment on your blog, any further news on whether this will make it into the core and Umbraco 7?

Jeremy Pyne 14 Jan 2014, 16:43:47

Don't think so. There were concerns about Accidentally moves as user are just trying to navigate content. (this implementation i did showed confirmations any time a url would change, and there is always the search if things get lost, but shrug.

Personally i user the feature myself and can't live without it though.

I can try to put it into a package again but I couldn't get that to work before due to how it needs to integrate into the sidebar tree as it loads. (I in a JS file where theres normally no events raised.

Martin Griffiths 14 Jan 2014, 16:48:39

Hi Jeremy

I had a bit of a rant at Per about it, if a dialog is presented to the user to confirm move (except for simple sorts at same level). I can't see what the worry is.

It's a shame.


Richard N Barg 14 Jan 2014, 17:29:54

@Jeremy "Personally i user the feature myself and can't live without it though." Right, I have saved hundreds of hours of time as a result of using your D&D client program. I would say that the folks at HQ have a tin ear when it comes to this (and other) issues. Jeremy, I wonder if it would be possible to change the sort order w/in a a group of nodes when using https://github.com/pynej/Umbraco-CMS/tree/drag-and-drop That is, when you use your program to reorder nodes, ie the children of a parent node, it seems to have no effect on the actual display order. When you right click & "Sort", the nodes are in the same position as they were before you reordered them.

Richard N Barg 14 Jan 2014, 17:34:47

@Jeremy - Correction - the reordering of nodes using https://github.com/pynej/Umbraco-CMS/tree/drag-and-drop DOES WORK in the media library. It doesn't work for the Content Section.

Richard N Barg 19 Jan 2014, 04:13:07

@Jeremy - Will https://github.com/pynej/Umbraco-CMS/tree/drag-and-drop work in Version 7?

Richard N Barg 22 Jan 2014, 03:18:17

@Funka! and others. Has anyone tried Jeremy's superb client-based drag and drop JS code with Umbraco 7 and gotten it to work? We'd really like to know. We're upgrading and his add-on so important to us that if it doesn't work on U7 we're will only upgrade to Umbraco 6.x.

Jeremy Pyne 22 Jan 2014, 04:51:39

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

Richard N Barg 22 Jan 2014, 17:51:08

@ Jeremy Really looking forward to it. Thanks for your efforts. We will be happy to test this on our development U7 website. As I'm well familiar w/how it works, I will be happy to provide feedback.

Richard N Barg 22 Jan 2014, 17:53:54

@ Martin "I had a bit of a rant at Per about it, if a dialog is presented to the user to confirm move (except for simple sorts at same level). I can't see what the worry is. It's a shame."

Also worth noting that Jeremy's program returns an error message if the move is not allowed. As far as HQ adding this to Belle, I'm not holding by breath.

Jeremy Pyne 22 Jan 2014, 20:07:03

Yah, while its going to be a few weeks. I have rewritten the backend code to use the Web Api, but getting the JS integration code to run/trigger on drag's is turning out to be a bit tricky.

Rodney Greenfield 06 Mar 2014, 11:01:48

What about simply having it enabled/disabled as umbraco config? That way everyone wins! I'd love to see this in v7

Sarah Green 06 Mar 2014, 11:19:03

I'd still love to see this in v6 (personally I'm having difficulty 'selling' the idea of v7 to my clients - the UI is frustratingly different for existing v4/v6 users)

Richard N Barg 21 Apr 2014, 15:25:34

@Jeremy - we updated from 4.71 to 4.11.10. Now, when moving a node in the content area, the browser now pops up a confirmation dialog box that requires the user to first hit OK. In Chrome, "The page at surgery.ucsf.edu says: Are you sure you want to move the selected document"? In IE - "Message from Webpage ? Are you sure you want to move the selected document?" How can we turn this off? This wasn't there before. What do we do?

Richard N Barg 21 Nov 2014, 17:41:16

@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 :()"

Martin Griffiths 21 Nov 2014, 17:48:03

Despite V7 being targeted at tablets, i'd still love to see this in the tree, it would be a massive time saver!

Richard N Barg 21 Nov 2014, 18:37:45

Massive is an understatement. I'd like to post a video comparing how long it takes to drag and drop a node in WordPress and Drupal vs. Umbraco 7. The omission is sad.

Jeremy Pyne 21 Nov 2014, 21:37:51

I have updated backend code using the new apis for handling the node moves(an validating that they are legal with doc type rules). I'll pull that in a bit.

As far as I remember I was having problems getting the client side UI to make the items draggable and trigger the update calls. I'v done quite a bit more work and fixes in angular since then so maybe i can make more seance now.

Jeremy Pyne 21 Nov 2014, 21:56:14

This is the original backend code converted to the v7 API. In reality it should probable use a reshape or son or whatever the rest of the backfire uses instead of xml but that can easily be changed.

The bart that needs to be figured out is now to enable drag and drop in the specific menus where it makes sence to have it and also to get the drag/drop events to trigger api calls as applicable.

Richard N Barg 21 Nov 2014, 22:07:52

@ Jeremy - I assuming you are looking for input. I will pass along this info to my developer who has also provided some suggestions before. Right now, getting drag and drop to work is the only thing holding us back from moving to Version 7. That's says a lot and we really appreciate your efforts!!

Richard N Barg 21 Nov 2014, 22:23:01

@Jeremy - I spoke w/our developer. He understands what you are trying to do and the challenges in working w/new API. In terms of the areas where D&D would be great, obviously the content nodes and media nodes. That would cover the editors. As far as the other sections, not being a developer I can't speak to that. Paradoxically screen elements can be dragged in the settings area, ie fields in document types, at least in versions 4/5x. Contour fields can also be dragged and dropped.

Jeremy Pyne 21 Nov 2014, 22:35:53

For those that care about the manuchie: Drag and drop can be enabled with the following.

--- Umbraco.Web.UI.Client\src\common\directives\umbtree.directive.js +++ Umbraco.Web.UI.Client\src\common\directives\umbtree.directive.js @@ -174,7 +174,7 @@

  •    var template = '<ul ng-class="{collapsed: !node.expanded}"><umb-tree-item  ng-repeat="child in node.children" eventhandler="eventhandler" tree="tree" current-node="currentNode" node="child" section="{{section}}" ng-animate="animation()"></umb-tree-item></ul>';
  •    var template = '<ul ui-sortable ng-class="{collapsed: !node.expanded}"><umb-tree-item  ng-repeat="child in node.children" eventhandler="eventhandler" tree="tree" current-node="currentNode" node="child" section="{{section}}" ng-animate="animation()"></umb-tree-item></ul>';
       var newElement = angular.element(template);

ToDo before it can move on: -Add logic to only enable dragging for content and media trees. -Add ui-sortable="sortableOptions" to trigger API calls to the Drag and Drop API. -Update ui-sortable="sortableOptions" to allow dragging between different level of hierarchy.

Jeremy Pyne 21 Nov 2014, 22:37:00

Fyi Richard this change doesn't actually do anything, its just the ui, dent' actually save changes.

Richard N Barg 21 Nov 2014, 22:41:22

OK great, thanks! and we'll continue to follow your progress.

Rob Mayfield 22 Nov 2014, 00:45:29

Yes, it would be great to have drag & drop. Wish it was native to Umbraco

John Sheppard 22 Nov 2014, 02:36:48

Yep...IMO its crazy it's not to be native...we only maintain one site with lots and lots of nodes...but wont go to v7 until we can drag and drop, its too time consuming...

Raymond Tam 24 Nov 2014, 05:54:15

Drag and drop is a sorely needed feature for Umbraco 7. As a developer, it is very time consuming to use outdated and tedious multiple menu clicks to move around nodes in the Umbraco UI. Our installation is on Version 6 and we use Jeremy’s client-side drag and drop. The absence of drag and drop is a deal breaker in terms of upgrading to Version 7. The Umbraco community is lucky to have a talented developer like Jeremy working on adding this workaround to Umbraco 7.

Martin Griffiths 24 Nov 2014, 08:52:25

Hi Raymond

Prior to Umbraco 7 I would've wholeheartedly agreed with you, but computer hardware has changed radically since then with Umbraco 7 you have the ability to use it well on tablet devices, and this makes drag and drop a little less important, (or likely to cause annoyance). I still agree it's a much needed feature and would use it myself, but it would make sense to have the ability to enable/disable it depending on need.


Martin Griffiths 24 Nov 2014, 09:06:02


Do you have any of your code on Git? or other repo?


Martin Griffiths 24 Nov 2014, 09:06:32

Doh....ignore me, found it!

Richard N Barg 24 Nov 2014, 23:31:27

@martinjgriffiths Martin, re: your comment to Raymond, I respectfully disagree. Sure it's nice to have the ability to make quick changes in Umbraco using a mobile device or tablet, but the vast majority of developers are require a desktop to get real work done, often with multiple screens, VMWare etc.

While Apple would like us to believe we are in the post-PC era, we're assuredly not when it comes to back-end coding and developer content management UIs, and to a large extent the work of Umbraco editors. These setups typically require large monitors with ultra-high resolution such as the new 5K iMac. Umbraco development often requires extensive multi-tasking and multiple windows, the latter not supported on IOS.

Using an iPhone or even a phablet like the iPhone Plus to do CMS development is the exception, not the rule, great for quick changes. Yes, 40-50% of web traffic is mobile or tablet today, but that is typically "lean-forward" users, content consumption, not content development.

Being able to use Umbraco on a tablet or mobile device is convenient, but its more of an option, a luxury, an enhancement with limited ROI. In contrast, drag and drop on the desktop is de riguer; it is required. Not having it is like going to a Pancake House that has no syrup. The tedious multiple mouse-click method of moving nodes harkens back to Windows 95 and MS-DOS. Drag and drop is basic. The lack of it wastes hundreds of hours or development time. In this regard, Umbraco HQ has missed the forest from the trees.

Martin Griffiths 25 Nov 2014, 09:41:55

@Richard I was in no way implying that a developer would be using a tablet or otherwise because that would be ludicrous! But end users, yes, absolutely! Why not? While I agree a significant number of content editors are still desk bound, there's plenty of potential for editing content on the move too and to suggest a content editor requires a high end rentina mac to do content editing is equally laughable. Those days are coming to an end!

Martin Griffiths 25 Nov 2014, 09:46:36

@Richard I think it important to point out that a successful CMS deployment for end-users should involve little more than text entry and the odd image upload! Our content editors do sometimes move content around, but our strict use of doctypes by section largely prevent them from being over zealous! If a developer is repurposing content and/or building/testing a CMS....I have a six core Xeon, 24" HP widescreen and all of the latest developer tools for that!

Jeremy Pyne 25 Nov 2014, 17:14:07

More work on the ui:

this basically make the expected drag and drop hierarchical logic and triggered an event on the drop. Having trouble getting the dragged note and destination details form angular though to trigger backend updates. Maybe someone more familiar the the menu subsystem and take over. Also this implementation will not currentlypet you drag items into nodes without any children in them or that are collapsed as they have no UL to drop the item into.

--- Umbraco.Web.UI.Client\src\common\directives\umbtree.directive.js +++ Umbraco.Web.UI.Client\src\common\directives\umbtree.directive.js @@ -174,11 +174,33 @@ return { 'padding-left': (node.level * 20) + "px" }; };

  •    scope.sortableOptions = {
  •        connectWith: ".item",
  •        cursor: "move",
  •        update: function (e, ui) {
  •            //var curNode = ?;
  •            //var newNode = ?;
  •            //var newIndex = ?;
  •            // Check for valid destination
  •            // $http({ method: 'GET', url: umbRequestHelper.getApiUrl("dragdropApiBaseUrl", "CanHaveNode"), params: { id: curNode, parent: newNode, app: scope.tree.section } })
  •            //    .success(function (data) {
  •            // Move Item 
  •            // $http({ method: 'GET', url: umbRequestHelper.getApiUrl("dragdropApiBaseUrl", "MoveNode"), params: { id: curNode, parent: newNode, app: scope.tree.section, index: newIndex } });
  •            // scope.setTreePadding(newNode); // Adjust indentation
  •            // }).fail(function(data) {
  •                // Cancel drag  drop
  •                // ui.item.sortable.cancel();
  •            //});
  •        }
  •    };
  •    //if the current path contains the node id, we will auto-expand the tree item children
  •    var template = '<ul ng-class="{collapsed: !node.expanded}"><umb-tree-item  ng-repeat="child in node.children" eventhandler="eventhandler" tree="tree" current-node="currentNode" node="child" section="{{section}}" ng-animate="animation()"></umb-tree-item></ul>';
  •    var template = '<ul ui-sortable="sortableOptions" class="item" ng-class="{collapsed: !node.expanded}"><umb-tree-item  ng-repeat="child in node.children" eventhandler="eventhandler" tree="tree" current-node="currentNode" node="child" section="{{section}}" ng-animate="animation()"></umb-tree-item></ul>';
       var newElement = angular.element(template);

Richard N Barg 25 Nov 2014, 21:54:20

@martinjgriffiths At my institution, we have 23 content editors, all of whom are normal office workers assigned to desktops. They use their iPads at home w/family. They don't bring iPads to work. The example of the Retina iPad was merely to demonstrate that we are not truly in a post-PC world. It was not to suggest the average Umbraco user needs a 5K retina. Even w/a Bluetooth or plug-in keyboard, the iPad cannot compete with the ease of use of a Windows or Mac OS for getting real work done using robust applications, including Umbraco. Although mobile is ascendant for viewing content, it has a long way to go for creating content notwithstanding the iWork and Office/IOS suites.Copying and pasting for example is painfully slow. Repositioning the "cursor" for editing is time consuming using a touch interface.

Your point that a successful CMS deployment (for end-users) should involve little more than text entry and the odd image upload misses a key point. When sites are initially set up and before being handed off to end users, the information architecture frequently changes which requires moving nodes around iteratively. Super end users and developers do this regularly as the IA is changed as the site grow organically. Similarly, the media library needs upkeep and folder organizations and contents of folders change over time. Often times we have to move multiple nodes to archive folders. The lack of drag and drop in the media library is like wearing an electronic straitjacket.

I would also add that for simple data input we use Contour to enter information on the front end. These Contour forms are delivered to Umbraco as a nearly finished document using "save as Umbraco node:. Our installation also has 50 sites. That is probably different than most, but it amplifies the need for drag and drop. I would also guess for content editors of Version 7, 75-90% are using desktops.

Finally, the strongest evidence of the need for drag and drop is the disenchantment w/not having it as expressed on numerous forum threads and for the huge popularity of Umbraco extensions like Content Maintenance Dashboard and Bulk Manager which allow file management capabilities which should have been built into Umbraco in the first place.

Richard N Barg 25 Nov 2014, 22:06:25

@Jeremy.Pyne Thanks again for you all work. re:your last post, it sounds like you are making progress, but its slow - maybe running into a road block. On your current implementation for versions 4 and 6, dragging a node into a node w/no children is sometimes challenging, but it does work! It sounds like in version 7 it won't work at all unless you create at least one child in the node first. That is somewhat limiting. Hopefully, someone with menu subsystem expertise will help. Maybe a solution will come to you in a spare moment. If you want us to test the above code, let us know to the extent it can actually effect a D&D.

Jeremy Pyne 25 Nov 2014, 22:13:21

In theory the following options should work on a full desktop: Drag a node within a list to change sort order Drag a node up or down the tree hierarchy to change its parent node and sort order. In the case of a endpoint or collapsed node some angular code still needs to be added to expand or next the item into the child list or create a child list if there isn't one. This is how it worked in my v6 code. Possibly support dragging items to or from the trash. (./shrug, not a big deal here but consistency any intuitive means it should work)

On a mobile device this would be somewhat different as the content tree works differently. It should still support drag and drop to re-sort child items at a minimum though. The entire Sort popup interface in Umbraco should really be depreciated in blue of native and intuitive controls in the tree viewer in my opinion.

I don't know what we are arguing about editors. The reality is that people will use both and we should support both as much as possible.

Colin Fahrion 26 Nov 2014, 00:37:15

I’m a front-end Umbraco developer and I and my editors found it very frustating to use the native Umbraco UI to move nodes around; that is until this JS workaround became available last year. On my WordPress sites, I can drag and drop pages between menus easily and numerous WP extentions exist to supercharge this capability. We’re stuck on Version 6 of Umbraco awaiting for drag and drop capability. It’s that important. Once you get used to having Jeremy’s client add-on, it’s hard to go back.

Richard N Barg 26 Nov 2014, 00:51:18

@Jeremy.Pyne Should we give your code posted above a shot on our development server (w/its limited capabilities) or should we wait. We want to help in any way.

Martin Griffiths 26 Nov 2014, 10:05:27

@Richard All very good points and I totally agree with all of them. Sadly I think the Umbraco team feels the need for dnd is very, very low (on their agenda at least), otherwise this ticket would have been assigned to a core team member like Shannon....a long time ago!

Our editing team are office bound too, but we also have an ever growing number of iPads in the business. The current count stands at 50+ iPad2s and they're used in all aspects of the business. Marketing have asked on numerous occasions if they can use them with Umbraco and each time i've had to say....Yes when we're on 7!

Sure if your site is very new and still has growing pains or as I said earlier it requires a lot of developer intervention, desktop all of the way! Our corporate site was built in the main by our agency so we don't move much around at all and our media is arranged in sensible folder structures but media is never expired. Sure there's a lot there but we keep it completely out of our build so it doesn't clash with development work.

In the time since we've started with Umbraco we've upgraded from to 6.1.6 and many side projects have been done in 6 and 7. Personally i'd love to see dnd, but it's far from a deal breaker.


Niels Hartvig 26 Nov 2014, 13:46:41

For the record - we're not ignoring, we're listening.

As v7.2 is in it's final stages and we're starting to plan the next iteration of UX updates, it definitely make sense to experiment and user test drag and drop functionality.

Martin Griffiths 26 Nov 2014, 13:52:07

Whoop! Cheers Niels.

Richard N Barg 26 Nov 2014, 14:44:02

@neils I'm heartened as well. Pls keep us posted.

Jeremy Pyne 02 Dec 2014, 21:28:08

FYI: I have gotten this 99% working. There is a git for it but I haven't submitted a pull request yet as I still need to find a way to drag items to closed folders and/or folders with no children.

The list that the dragging binds to is hidden in either case and so is not a valid drop target. I'm thinking of just doing a syncTree(force=true) on drag over to force-expand the child. That or add a droppable widget that only appears when dragging under each closed or empty node to allow dropping there.


This version uses the native angularJs services and thus does not use any additional backend.server api/code. overall it seams to work very quickly/cleanly but I haven't tested it in all situations. It does't have any allowed types validation written in as the validation will happen on the server in the PostMove call and the tree is just re-synced if the move fails. (Cant cancel the move event as the promise won't return before the event finishes firing.)

Richard N Barg 02 Dec 2014, 22:06:17

That sounds really great. Can't wait for the other 1%. By the way what is a pull request?

Jeremy Pyne 02 Dec 2014, 22:50:20

You can manually apply change changes in https://github.com/pynej/Umbraco-CMS/blob/d407c522c7195ed4ac89ee39d70f34ccadddbfe1/src/Umbraco.Web.UI.Client/src/common/directives/umbtree.directive.js and https://github.com/pynej/Umbraco-CMS/blob/d407c522c7195ed4ac89ee39d70f34ccadddbfe1/src/Umbraco.Web.UI.Client/src/common/directives/umbtreeitem.directive.js but its not very user friendly. The changes actually get compiled into umbraco/js/umbraco.directives.js in a installed system but I don't have a diff for that.

Martin Griffiths 03 Dec 2014, 09:22:17


Jeremy is basically pulling at the core umbraco code, it's not a package and therefore if you want to make use of it you would either have to download the entire source code of the umbraco project and add in his changes or wait for the Umbraco team to accept Jeremys pull request. If they do it would become part of the Umbraco core project.

Richard N Barg 03 Dec 2014, 20:57:15

@martinjgriffiths I think you mean "Jeremy's" work-in-process pull request.

Rodney Greenfield 17 Mar 2015, 01:30:19

In terms of @hartvig comment around "plan the next iteration of UX updates", given the state of 7.2.2 and nothing around this feature in 7.3; @Umbraco - could we at least support the notion of a off-by-default optional feature to support this, leveraging the alterations progressed by @Richard?

Niels Hartvig 17 Mar 2015, 07:54:55

@Rodney: We never include new features in a patch release, so something like this would never be included in 7.2.x. Whether it will happen, in what form and in what version will depend on user testing.

Rodney Greenfield 17 Mar 2015, 09:33:19

Thanks for the response. My mistake. Given the timeframe and noticeable absence in 7.3 I assumed this had become dead-in-the-water because it's not a feature that all users would find useful. Unless you have the depth of content where page titles are hidden by the tree menu splitter/separator, or large amounts of content where re-arrangement was the most common editor function, it's difficult to feel that user testing would find this an intuitive user-experience improvement. This of course is the basis for the suggestion to support it (given current user endorsements & votes) as an off-by-default approach to introducing the change. Anyway, love your work and keep us posted.

Richard N Barg 25 Mar 2015, 20:52:16

@Rodney.Greenfield I wouldn't hold my breath. Just take a look at the length of this thread. You might see this feature (that every other modern CMS has) in 2016 or maybe never. I would never consider upgrading to version 7 without this feature.

Rodney Greenfield 26 Mar 2015, 06:43:32

Well certainly, editors not being able to read the full title of a node to edit it because it's truncated by the separator is a major miss and everyone can benefit from that. It's a shame that there's such a limiting factor on the depth of folders/sections you can have and is restrictive for large sites. In regard to the drag-and-drop for nodes; I think is a little more niche and only really comes into its own when you have a site requiring a lot of organisational management. I can't however understand not providing support or an approach where someone can optionally enable it if they want it. It's saddening that this feature can't be provided as a package without a change to the core, given so many people want it / need it.

Michelle Jackson 15 Jul 2015, 11:11:59

@Rodney.Greenfield - no, it's not that niche. We struggle with the same thing. We have a number of client sites where the users struggle to read or select which content to edit from the first few words in the title - and we don't have an insane amount of sections. The fixed width tree-menu is definitely a broken UI experience from feedback I've had. What we've found is a bunch of editors actually using the search as a work-around for this, which helps them find by title, but then they struggle to know the context of the page (in order to differentiate and select) from the just the regular results. Either way you're damned!

Having looked at a few of the videos on CodeGarden 2015 ("keynote" and "contributing to core"), I'm a little confused though. How many votes do you need to get a change approved around here? There's a heap of votes for this feature & a pull request from Richard (if I'm not mistaken), what more is needed to see this added?

Does the PR change above address the draggable splitter or the drag-and-drop tree? I need both, but can we not just make it an on/off config setting? Sorry Richard, I haven't played around with your PR, but was it officially rejected? What's still needed to do? How can I help?

If the issue is about "waiting on user testing" - how could this issue still be going on since 2012? Anyone with a site, some decent page titles and some deep sections will struggle to edit pages properly. Quite simply you really need a draggable splitter. Just because we have deep sections, surely we shouldn't be forced to use the List View (as good as it is for large numbers of pages) just to select the right sub-page to edit. It's not an intuitive editing experience.

Richard N Barg 15 Jul 2015, 16:02:35

@Michelle_Jackson "

From Niels Hartvig (Mr. Steve Jobs of HQ) earlier in this tread "For the record - we're not ignoring, we're listening. As v7.2 is in it's final stages and we're starting to plan the next iteration of UX updates, it definitely make sense to experiment and user test drag and drop functionality."

My view, based on many years of inaction, is this clearly not deemed important by HQ given the number of years it has been dormant. It's like asking Apple to put in a feature it just doesn't care about. I work with several other CMSs. All the major ones have drag and drop capability. As far as the draggable splitter, that's also needed. I use the find feature in Content Maintenance Desktop which is free and excellent to locate nodes in our spawling tree. The downside is that it is on the Developer Tab.

We have used Jerermy Pines client side add-on for a long time, many years. We would never consider upgrading to version 7 until HQ adds this feature. At this point, talk is cheap. I want to see action, not more excuses and obfuscation by HQ.

Murray Roke 21 Jul 2015, 00:19:12

At least they could add the hooks required to make a package work!

Michelle Jackson 29 Jul 2015, 05:33:41

Having seen the splitter introduced in 7.3.0 beta2 (https://umbraco.com/follow-us/blog-archive/2015/7/27/umbraco-730-beta2-out-now), I'm super stoked! Thanks heaps HQ team! I guess this just leaves the drag-and-drop tree - which I think is probably best handled as a UmbracoSetting or better still a per-user enable/disable setting, because there a know there's editors who need a learner sticker attached to their mouse that I'd hate to let loose with this power.

Jeremy Pyne 31 Jul 2015, 16:53:33

Ooooook!!!! https://github.com/umbraco/Umbraco-CMS/pull/755 Applaus

This is a new commit for a new version of the drag and drop feature. It's build entirely in AngularJS and requires no custom backend code. It uses contentResource api calls to move, delete, and NodeSorter to sort items (The contentResource.sort function doesn't work.)

It only runs on the main media and content trees, and disables itself on any dialogs. Also it does not run on mobile/tablet due to limitations in the core jQuery-sortable and touch events.

Overall it is very snappy, responsive, and easy to use. Any accidental move of a node will be obvious as the new location is expanded as well.

Jeremy Pyne 31 Jul 2015, 16:58:58

Note, that the collapsed items or items with no children can be dropped on top of to mode the item Into them.

It is necessary to show a 5px invisible placeholder for each node to do so but it doesn't affect the layout and only happens when the drag is occurring.

Richard N Barg 31 Jul 2015, 17:07:25

@hartvig What are you waiting for now? Will we see this by 2020?

Kevin Giszewski 31 Jul 2015, 17:53:14

+1, Keep up the good work!

Murray Roke 04 Aug 2015, 12:12:28

Nice, backseat driving follows: since you mention accidental moving could be a problem, here's some random ideas: Could we have a 'confirm' dialog for dropping? perhaps with an option to disable similar confirm for the next X minutes (X could be a dropdown with various options including infinite). Alternatively perhaps ignore drags of less than x seconds? Or make a hover for x seconds required before the drop target is active? (latter seem like they could be more annoying)

Chriztian Steinmeier 04 Aug 2015, 12:21:24

Not at all thinking about how to do it, but purely from an editor's viewpoint: How about a simple way to undo an accidental drop?

Jeremy Pyne 04 Aug 2015, 13:45:58

Meh, try it out. The risk of accidentally messing things up is low, and in my mind doesn't justify extra prompts and things. We have multiple non-programmer users and we never had to train them or had issues with accidents, and its each to find and move things back in the worst case. I'd say it's not worth worrying about extra options or promote and part of the deal is a quick streamlined process.

Shannon Deminick 05 Aug 2015, 08:42:23

Hi all, you will have noticed that I've updated this issues description with full requirements that will be needed for us to ship something like this in the core.

This functionality is on our radar, but there are so many other things that we need to create/fix/update in the core that it's just not been boosted to a high priority. It's worth noting that there's is only a couple of us that actually work on the core full time so we do our best to progress the fixes and features that are absolutely required.

That said, the reason I've updated this issue with full requirements is so that anyone that wants to have a stab at creating this functionality is more than welcome to start and I'll be happy to assist. I know a couple of PRs have been made for this but unfortunately they don't meet the requirements currently. If anyone wants to start other PRs or update existing ones, that is great and I'll be happy to give feedback directly on it.

I will get to this feature eventually, perhaps over a few a weekends or whatever but i cannot guarantee any timing on that, so it'd be amazing if existing PRs could be updated to start thinking about the requirements listed above or new PRs created so we can assist with the development process.

Jeremy Pyne 05 Aug 2015, 14:36:01

The PR I created is the best approach and does most of this stuff. A few notes on the code I shared and requirements you mention.

*Global disable can I'm sure be easily added though I'm not sure how to do that and expose the variable to angular. The scope.sortableOptions.disabled just needs an additional argument to false when the global setting it off. *The idea of locking the tree, the scope.sortableOptions.start() and scope.sortableOptions.stop() events that fire on start and stop of the drag so this can be done. I don't see the need though as the user can't possible do something else in the middle of the drag-and-drop as they only have the one mouse. *I guess I can see the idea of a long-press to do the drag. There is a scope.sortableOptions.delay that can be set for this. I added delay = 300 to my PR witch stopes any accidents without seaming to be to inconvenient. A class can be added in scope.sortableOptions.start() to distinguish the look while the item is being dragged if desired. *All of these are working: sorting, moving, recycling(into trash), restoring(out of trash). As for copying, we'd need a obvious way for the user to indicate a copy vs a move in the scope.sortableOptions.start() event. Should get keyboard state though so maybe Shit Key + Drag change to copy and change the draggable style to include a Plus graphic. Regardless on a copy the source and destination just need to by synced afterward so there are no issues needing to clone tree nodes. *scope.sortableOptions.disabled controls witch tree types it's enabled on, and also prevents it on dialogs and popups. *The confirmation idea/requirement will be the biggest issue. Basically, its simple to show the dialog on the scope.sortableOptions.update() when the user drops the item, but what state should the trees be in at this point. Ie the ui-sortable will not understand and wait for the confirmation, so it will have to store the original locations, complete the ui level sort, and show the dialog. Then if the user clicks cancel it will need to move the item back to the original location as the drag event can't simply be canceled like it could be with a confirm(). Also I'd think there shouldn't be a confirmation if the node is just re-sorted in the same parent node, trying to sort 30 items and having to click yes after each one would be slow. Even the confirmation on a move my be problems for some, maybe a second option for drag and drop confirmations as all that can default to yes but be turned of if people desire. *Love the idea of closing other dialogs on a drag, though not sure how to do it it just needs to be added to scope.sortableOptions.start(). *The touch issues is simply due to a lack of support in the core supplied ui-sortable package. If that is updated to support touch then the menu will as well with no additional cahnges. *As for not allowing dropping on illegal nodes, in my testing the performance as just to terrible. Basically to disable the target on dragging each node that is dragged over as a target would trigger another server call lot check it's validity witch created tens to hundreds of calls in a single drag. The client in angular just doesn't have the detail about allowed nodes. In this implementation that UI correctness was disregarded for efficiency and instead the user can drop the item anywhere, if the destination turned out to be invalid the drag is just canceled and the item returned to its original location in the tree. This means there is only one server call instead of tens on a drag. To show validity on drags efficiently a server method needs to be added to get all valid parent types for a given node so that can be called once on a drag and then the results checked agains each item dragged over in the client side angular code. *As for extensibility/not referencing resources, I'm just not sure how that would work. The trees have lots of special rules and some may have recycle bins and others not. That and the code I provided was intentionally done only in angular not creating new server calls. I'm sure things could be re-worked to be more the way your suggesting but each tree will still need custom logic either that exists in angular/js code of on a server call somewhere.

Shannon Deminick 05 Aug 2015, 15:02:18

Thanks for the details, some replies:

I don't see the need though as the user can't possible do something else in the middle of the drag-and-drop as they only have the one mouse

Once a user 'drops' something the processing happens async, depending on several things, this could take a while, during which time the user could try other things... we cannot have this happen.

As for copying

Yes i can see this adds more complexity, I've removed from immediate requirements for now. We can think about that later.

The confirmation idea/requirement will be the biggest issue

Yup, all points are valid points. For sorting, I'd agree we probably don't need a confirmation (but i think some people will want it), for moving I think a confirmation is needed, especially to the bin. So perhaps we need some nicer UI for an easy confirmation, a simple small one that could perhaps be shown right beside the mouse drop point so there's very little motion needed to click it. I think we could create something fairly simple where this doesn't need to be a big issue at all.

As for not allowing dropping on illegal nodes...

I completely understand which is why I've put this not under immediate requirements. My thoughts to combat the many requests being made is a trade-off. We'd have a simple list in angular about what node can/can't exist under each other which we can use as simple way to know if something can be moved. As for user permissions, we might be able to have another simple list for this but it could get big/complex. The reason this would be nice is purely a UX thing, so i think if we can have a simple way for angular to store values to know what content is allowed to exist under other content types, that's all we'd need.

As for your other points, as i mentioned I'm happy to help out, assist, etc... When time permits I'll work with you on your PR (this means I'll be submitting PRs for your PR :) and keep any discussion about code, etc... there.

Jeremy Pyne 05 Aug 2015, 18:00:06

For future reference, https://raw.githubusercontent.com/furf/jquery-ui-touch-punch/master/jquery.ui.touch-punch.js will make it work on with touch events. But this may have other consequences that I don't want to get into with the main implementation.

Brian Lacy 02 Mar 2016, 17:09:59

I seriously hope this can be accomplished for v8. Inability to drag & drop tree nodes to move/sort is THE #1 most immediately obvious and irritating UI omission for new content editors, in my experience thus far.

Jeremy Pyne 20 Jun 2016, 20:07:43

I posted a new PR of the current functionality we use for updated for the dev-v7 branch. https://github.com/umbraco/Umbraco-CMS/pull/1343

Jeremy Pyne 21 Jun 2016, 19:47:28

I have added additional hilighting and a larger hit-area for dragging an item into another collapsed node.

Priority: Normal

Type: Feature (request)

State: Submitted


Difficulty: Difficult

Category: Editor

Backwards Compatible: True

Fix Submitted: Pull request

Affected versions: 7.2.8, 7.4.3, 7.12.0

Due in version:


Story Points: