Friday, July 31, 2015

Drag and Drop in Umbraco 7

This code will let you add drag and drop logic to Umbraco v7 using the new AngularJS interface.  It doesn't require and backend code updates but can't be created as a package because there is no way to update the umbTree directive as needed.  There are only two files that need to be changed on the client.  Note that updates to umbraco will overwrite these changes.  Also note that due to lack of support in the underlying jQuery-sortable plugin for touch events this will not work on tablet devices.

First a set of changes for the umbTree and umbTreeItem directives in umbraco/Js/umbraco.directives.js.

 This patch was generated on 7.2.8 so may not work on other versions automatically.  You can manually apply all the listed changes on any 7.* version and they should work as expected with no changes needed.

Secondly, to allow for dragging items to collapsed nodes or nodes they don't already have children, the following needs to be added to the end of the line in umbraco/assets/css/umbraco.css.