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

Yes, these would be so useful for me too.

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

@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

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

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

Fair enough

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

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

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.

http://pynej.blogspot.com/2013/05/enable-drag-and-drop-on-content-and.html

My sentiments.

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

http://our.umbraco.org/forum/ourumb-dev-forum/features/32983-Feature-Requests-One-D-D-Move,-DD-Sort,-and-more

Some of this feedback could be useful for belle v7.

@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!

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.

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?

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.

The version I posted is working in FF/Chrome.

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

@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.

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.)

Thanks!

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!

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.

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!

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)

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!

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.

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

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...

http://our.umbraco.org/forum/umbraco-7/using-umbraco-7/47445-Sort-UI-height-doesnt-drop-down-to-cancel-and-save-buttons

@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."

http://pynej.blogspot.com/2013/05/enable-drag-and-drop-on-content-and.html

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.

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

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.

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.

Martin

@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.

@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.

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

@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.

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

@ 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.

@ 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.

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.

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

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)

@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?

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

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

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.

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.

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.

@ 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!!

@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.

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 @@

     styleNode(scope.node);
     

•    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);
     $compile(newElement)(scope);
     element.append(newElement);{code}
  

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.

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

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

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

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...

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.

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.

@Jeremy

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

Martin.

Doh....ignore me, found it!

@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.

@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!

@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!

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
  

     styleNode(scope.node);
     

•    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);
     $compile(newElement)(scope);
     element.append(newElement);
  

@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.

@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.

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.

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.

@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.

@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 4.0.4.2 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.

Martin

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.

Whoop! Cheers Niels.

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

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.

https://github.com/pynej/Umbraco-CMS/compare/umbraco:7.1.6...drag-and-drop-v7?expand=1

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.)

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

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.

@Richard

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.

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

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?

@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.

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.

@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.

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.

@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.

@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.

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

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.

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.

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.

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

+1, Keep up the good work!

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)

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?

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.

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.

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.

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.

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.

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.

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

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