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.

	--- umbraco.directives-a449b728.js
	+++ (clipboard)
	@@ -2388,7 +2388,7 @@
	* @name umbraco.directives.directive:umbTree
	* @restrict E
	**/
	-function umbTreeDirective($compile, $log, $q, $rootScope, treeService, notificationsService, $timeout, userService) {
	+function umbTreeDirective($compile, $log, $q, $rootScope, treeService, notificationsService, $timeout, userService, $injector) {
	return {
	restrict: 'E',
	@@ -2420,8 +2420,8 @@
	'<a href="#/{{section}}" ng-click="select(tree.root, $event)" class="root-link">{{tree.name}}</a></h5>' +
	'<a class="umb-options" ng-hide="tree.root.isContainer || !tree.root.menuUrl" ng-click="options(tree.root, $event)" ng-swipe-right="options(tree.root, $event)"><i></i><i></i><i></i></a>' +
	'</div>';
	- template += '<ul>' +
	- '<umb-tree-item ng-repeat="child in tree.root.children" eventhandler="eventhandler" node="child" current-node="currentNode" tree="this" section="{{section}}" ng-animate="animation()"></umb-tree-item>' +
	+ template += '<ul ui-sortable="sortableOptions" class="item" ng-model="tree.root.children">' +
	+ '<umb-tree-item ng-repeat="child in tree.root.children" eventhandler="eventhandler" node="child" current-node="currentNode" tree="this" section="{{section}}" ng-animate="animation()" sortable-options="sortableOptions"></umb-tree-item>' +
	'</ul>' +
	'</li>' +
	'</ul>';
	@@ -2644,6 +2644,7 @@
	.then(function(data) {
	//set the data once we have it
	scope.tree = data;
	+ scope.node = scope.tree.root;
	enableDeleteAnimations();
	@@ -2789,7 +2790,160 @@
	lastSection = newVal;
	}
	});
	-
	+ scope.sortableOptions = {
	+ connectWith: ".item",
	+ cursor: "move",
	+ items: '>li',
	+ axis: 'y',
	+ tolerance: 'pointer',
	+ containment: '.umb-tree .root>ul',
	+ disabled: !scope.section.match("content|media") || scope.isdialog === "true",
	+ update: function (e, ui) {
	+ var node = ui.item.scope() ? ui.item.scope().node : scope.dragCurrentNode;
	+
	+ scope.newParentNode = $(e.target.parentElement).scope().node;
	+
	+ // Ignore if this is just a sort order change.
	+ if (node.parentId == scope.newParentNode.id) {
	+ scope.dragCurrentNode = node;
	+ return;
	+ }
	+ //console.log("id:" + node.id + "; parent:" + node.parentId + "; newParent:" + $(e.target.parentElement).scope().node.id);
	+
	+ //Now we need to check if this is for media or content because that will depend on the resources we use
	+ var contentResource, contentTypeResource;
	+ if (scope.section === "media") {
	+ contentResource = $injector.get('mediaResource');
	+ contentTypeResource = $injector.get('mediaTypeResource');
	+ }
	+ else if (scope.section === "content") {
	+ contentResource = $injector.get('contentResource');
	+ contentTypeResource = $injector.get('contentTypeResource');
	+ } else {
	+ return;
	+ }
	+
	+ if (scope.newParentNode.id == -20 || scope.newParentNode.id == -21)
	+ // Delete the node
	+ contentResource.deleteById(node.id)
	+ .then(function () {
	+ scope.loadChildren(scope.newParentNode, true);
	+ });
	+ else
	+ // Move node, this will automaticaly validate the move.
	+ contentResource.move({ parentId: scope.newParentNode.id, id: node.id })
	+ .then(function () {
	+ // Sync client side ui changes. Tis will relaod the relevent part of the tree. It could probubly jsut update the new with the new values instead and simplify the back and forth a bit.
	+ scope.dragMoved = true;
	+
	+ // Reload collapsed destination.
	+ if ($(e.target.parentElement).children("ul.item").is(".collapsed")) {
	+ scope.loadChildren(scope.newParentNode, true);
	+ }
	+ }, function (err) {
	+ // Reload source and destination on a invalide move.
	+ scope.loadChildren(scope.newParentNode, true);
	+ scope.loadChildren(ui.item.scope().node.parent(), true);
	+ })
	+ },
	+ start: function (e, ui) {
	+ // Store the original sort order.
	+ scope.newParentNode = ui.item.scope().node.parent();
	+ scope.originalSort = _.map(
	+ _.filter(
	+ scope.newParentNode.children,
	+ function (item) {
	+ return parseInt(item.id) > -1;
	+ }),
	+ function (item) {
	+ return item.id;
	+ });
	+
	+ // Tempararily enable collapsed nodes as valid targets for putting items inside them without expanding them.
	+ ui.item.parents(".umb-tree").addClass("ui-dragging")
	+ },
	+ stop: function (e, ui) {
	+ // Remove extra elements for child dropping.
	+ ui.item.parents(".umb-tree").removeClass("ui-dragging")
	+
	+ // Update sort order for all children of the parent node.
	+ var sortOrder = _.map(
	+ _.filter(
	+ scope.newParentNode.children
	+ , function (item) {
	+ return parseInt(item.id) > -1;
	+ })
	+ , function (item) {
	+ return item.id;
	+ });
	+
	+ // Don't do anything if there are no changes.
	+ if (sortOrder.join() === scope.originalSort.join()) {
	+ return;
	+ }
	+
	+ // Don't do anything if this is moved to a collapsed node.
	+ if (sortOrder.join() == "") {
	+ return;
	+ }
	+
	+
	+ //Now we need to check if this is for media or content because that will depend on the resources we use
	+ /*var contentResource, contentTypeResource;
	+ if (scope.section === "media") {
	+ contentResource = $injector.get('mediaResource');
	+ contentTypeResource = $injector.get('mediaTypeResource');
	+ }
	+ else if (scope.section === "content") {
	+ contentResource = $injector.get('contentResource');
	+ contentTypeResource = $injector.get('contentTypeResource');
	+ } else {
	+ return;
	+ }*/
	+
	+ // Post new sort order
	+ $timeout(function () {
	+ //console.log("id:" + scope.newParentNode.id + "; sort:" + sortOrder.join());
	+
	+ // Use custom UpdateSortOrder service privided by native Sort tool as the contentResource.sort() service doesn't appear to save changes properly.
	+ $.ajax({
	+ type: "POST",
	+ url: "/umbraco/WebServices/NodeSorter.asmx/UpdateSortOrder?app=" + scope.section,
	+ data: '{ "ParentId": ' + parseInt(scope.newParentNode.id) + ', "SortOrder": "' + sortOrder.join() + '"}',
	+ contentType: "application/json; charset=utf-8",
	+ dataType: "json",
	+ success: function (msg) {
	+ scope.complete = true;
	+
	+ // reload parent to get a clean node.
	+ if (scope.dragMoved) {
	+ scope.loadChildren(scope.newParentNode, true);
	+ //$(e.target.parentElement).scope().loadChildren(scope.newParentNode, true);
	+ scope.dragMoved = false;
	+ }
	+ }
	+ });
	+
	+
	+ /* // This is a more direct way to save sort changes but it appears to be non-functinal in 7.2.8
	+ contentResource.sort({ parentId: scope.newParentNode.id, sortedIds: sortOrder })
	+ .then(function () {
	+ console.log("Sort Done");
	+ scope.complete = true;
	+
	+ // reload parent to get a clean node.
	+ if (scope.dragMoved) {
	+ scope.loadChildren(scope.newParentNode, true);
	+ //$(e.target.parentElement).scope().loadChildren(scope.newParentNode, true);
	+ scope.dragMoved = false;
	+ }
	+ });*/
	+ // This delay is to allow the move to finish before we resort. We can get the sort index untill the stop()
	+ // so we can't attach it to the move promise, thus the short delay.
	+ }, 250, false);
	+ }
	+ };
	+
	setupExternalEvents();
	loadTree();
	};
	@@ -2829,13 +2983,14 @@
	eventhandler: '=',
	currentNode: '=',
	node: '=',
	- tree: '='
	+ tree: '=',
	+ sortableOptions: '='
	},
	//TODO: Remove more of the binding from this template and move the DOM manipulation to be manually done in the link function,
	// this will greatly improve performance since there's potentially a lot of nodes being rendered = a LOT of watches!
	- template: '<li ng-class="{\'current\': (node == currentNode)}" on-right-click="altSelect(node, $event)">' +
	+ template: '<li ng-class="{\'current\': (node == currentNode)}" on-right-click="altSelect(node, $event)" >' +
	'<div ng-class="getNodeCssClass(node)" ng-swipe-right="options(node, $event)" >' +
	//NOTE: This ins element is used to display the search icon if the node is a container/listview and the tree is currently in dialog
	//'<ins ng-if="tree.enablelistviewsearch && node.metaData.isContainer" class="umb-tree-node-search icon-search" ng-click="searchNode(node, $event)" alt="searchAltText"></ins>' +
	@@ -3021,7 +3176,7 @@
	setupNodeDom(scope.node, scope.tree);
	- 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-model="node.children" 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()" sortable-options="sortableOptions"></umb-tree-item></ul>';
	var newElement = angular.element(template);
	$compile(newElement)(scope);
	element.append(newElement);

view raw umbraco.directives.js.patch hosted with ❤ by GitHub

 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.

.umb-tree.ui-dragging ul.collapsed{display:block;height:5px;margin-bottom:-5px;overflow:hidden;}

view raw umbraco.css hosted with ❤ by GitHub