Enable Drag and Drop on Content and Media trees in Umbraco

For Umbraco 7 go here.

Updated 8/20/2018:

• Corrections and new UmbracoTree.js code for newer v6 an jQuery versions.
• Corrections for issues sorting nodes.

Updated 6/12/2013:

• Updated nestedSortable.js with a working version.
• Added allowed child types validation on move (and root level validation in Umbraco 6.0+).
• Updated error message and notification popup code.
• All of the code has been updated to please replace your local files/customizations with the new code.

Updated 6/17/2013:

• Added better isAllowed detection.  Nodes will now move back if not allowed at a location.

---

This is a Javascript level Drag and Drop add-on for Umbraco.  It will allow you to sort and move content and media items abound and into or out of the trash.  Further more it will update the sorting of items and urls of documents are they are moved.

Unfortunately the changes require updating two core umbraco files so I can't make them into a package.  Just follow these simple instructions and you to can have drag and drop nodes.

First add this script file to your Scripts folder. jquery.mjs.nestedSortable.js (Technically it would be more logical to place this in /umbraco/js but I prefer to keep the code outside the normal umbraco folders.)

Next step edit /umbraco/umbraco.aspx to reference this new script.  Add the following to the list of scripts updating the path if needed. In older versions you may need to change the line to start with <umb: instead.

<cdf:JsInclude ID="JsInclude18" runat="server" FilePath="../Scripts/jquery.mjs.nestedSortable.js" PathNameAlias="UmbracoRoot" />

Now for a slightly more tricky step.  Open up the /umbraco_client/Tree/UmbracoTree.js script and add the following at line 207 between the marked before an after lines.

	this.setActiveTreeType(app); // before
	if (app == "content" || app == "media") {
	var cache = new Array();
	this._debug("rebuildTree: adding draggable logic");
	setTimeout(function () {
	$("#JTree>ul").nestedSortable({
	listType: "ul",
	toleranceElement: '> a',
	handle: 'a',
	items: 'li',
	protectRoot: true,
	relocate: function (event, args) {
	if (app == "media" || confirm("Are you sure you want to move the selected document?")) { // Comment this line to disable confirmation dialog.
	var sortOrder = args.item.parent().children().map(function () { return $(this).attr("id"); }).toArray();
	var parentId = args.item.parent().parent().attr("id");
	if (parentId == "-1")
	sortOrder.pop();
	$.ajax({
	url: '/Base/Draggable/MoveNode/' + app + "/" + args.item.attr("id") + "/" + args.item.parent().parent().attr("id") + "/" + args.item.index(),
	dataType: "xml",
	type: "POST",
	success: function (data) {
	var result = $(data).find("result");
	UmbSpeechBubble.ShowMessage(result.attr("success") ? "success" : "error", "Relocate Node", result.attr("message"));
	// 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=" + app,
	data: '{ "ParentId": ' + parentId + ', "SortOrder": "' + sortOrder.join() + '"}',
	contentType: "application/json; charset=utf-8",
	dataType: "json"
	});
	},
	error: function (data) {
	UmbSpeechBubble.ShowMessage("error", "Relocate Node", "The /Base call was not found or an error occured. Are you missing the backend .NET Code?");
	}
	});
	} // Comment this line to disable confirmation dialog.
	},
	isAllowed: function (item, parent) {
	if (typeof cache[parent.attr("id") + ":" + item.attr("id")] == "undefined") {
	$.ajax({
	url: '/Base/Draggable/CanHaveNode/' + app + "/" + item.attr("id") + "/" + parent.attr("id"),
	type: 'GET',
	async: false,
	cache: false,
	dataType: "xml",
	error: function () {
	UmbSpeechBubble.ShowMessage("error", "Relocate Node", "The /Base call was not found or an error occured. Are you missing the backend .NET Code?");
	return false;
	},
	success: function (data) {
	var result = $(data).find("result");
	cache[parent.attr("id") + ":" + item.attr("id")] = result.attr("success") == "true";
	}
	});
	}
	return cache[parent.attr("id") + ":" + item.attr("id")];
	}
	})
	}, 500);
	}
	if (saveData != null) { // after

view raw UmbracoTree.js hosted with ❤ by GitHub

Now if you reload your Umbraco Backoffice page you will have the power of drag and drop.  If you still can't drag and drop items you may need to clear your browser cache or increment the clientDependency version in your ClientDependency.config file.

The last step is to add the following code to you App_Code directory to enable the client side changes to be saved in the backend.  This code can be added to a precompiled dll if you prefer.   Also if you are using Umbraco 6.0+ then uncomment the four Allowed in Root checks for additional validation.

	using System;
	using System.Collections.Generic;
	using System.Linq;
	using System.Text;
	using Umbraco.Web.BaseRest;
	using System.Web;
	using umbraco.cms.businesslogic;
	using umbraco.cms.businesslogic.web;
	using System.Xml.Linq;
	using umbraco.cms.businesslogic.media;
	namespace Proteus.Rest
	{
	/// <summary>
	/// Backend code to support variouse client side customizations.
	/// </summary>
	[RestExtension("Draggable")]
	public class ResetDragDrop
	{
	/// <summary>
	/// Check to see if a content node is allowed to be the child of another node.
	/// </summary>
	/// <param name="app">content tree</param>
	/// <param name="id">node id</param>
	/// <param name="parent">parent id</param>
	/// <returns>xml results true/false</returns>
	[RestExtensionMethod()]
	public static XDocument CanHaveNode(string app, int id, int parent)
	{
	// If this is a media item.
	if (app == "media")
	{
	// Get the node.
	var node = new Media(id);
	// If the parent has changed move the item.
	if (parent != node.ParentId)
	{
	if (parent == -1)
	{
	/* Uncomment for root level content type checking on umbraco 6.0+ */
	/*if (!node.ContentType.AllowAtRoot)
	{
	// Content not allowed.
	return new XDocument(new XDeclaration("1.0", "UTF-8", "yes"),
	new XElement("result",
	new XAttribute("success", false)
	)
	);
	}*/
	}
	else if (parent > 0)
	{
	var parentNode = new Media(parent);
	if (!parentNode.ContentType.AllowedChildContentTypeIDs.Contains(node.ContentType.Id))
	{
	// Content not allowed.
	return new XDocument(new XDeclaration("1.0", "UTF-8", "yes"),
	new XElement("result",
	new XAttribute("success", false)
	)
	);
	}
	}
	}
	// If no disallow rule has been found then alllow the move.
	return new XDocument(new XDeclaration("1.0", "UTF-8", "yes"),
	new XElement("result",
	new XAttribute("success", true)
	)
	);
	}
	if (app == "content")
	{
	// Get the document.
	var node = new Document(id);
	// If the parent has changed move the item.
	if (parent != node.ParentId)
	{
	if (parent == -1)
	{
	/* Uncomment for root level content type checking on umbraco 6.0+ */
	/*if (!node.ContentType.AllowAtRoot)
	{
	// Content not allowed.
	return new XDocument(new XDeclaration("1.0", "UTF-8", "yes"),
	new XElement("result",
	new XAttribute("success", false)
	)
	);
	}*/
	}
	else if (parent > 0)
	{
	var parentNode = new Document(parent);
	if (!parentNode.ContentType.AllowedChildContentTypeIDs.Contains(node.ContentType.Id))
	{
	// Content not allowed.
	return new XDocument(new XDeclaration("1.0", "UTF-8", "yes"),
	new XElement("result",
	new XAttribute("success", false)
	)
	);
	}
	}
	}
	// If no disallow rule has been found then alllow the move.
	return new XDocument(new XDeclaration("1.0", "UTF-8", "yes"),
	new XElement("result",
	new XAttribute("success", true)
	)
	);
	}
	// Return a error message.
	return new XDocument(new XDeclaration("1.0", "UTF-8", "yes"),
	new XElement("result",
	new XAttribute("success", false),
	new XAttribute("message", String.Format("Content Tree {0} is not supported.", app))
	)
	);
	}
	/// <summary>
	/// Move a Content or Media item to a different location with client side drag and drop.
	/// </summary>
	/// <param name="app">Tree the item belongs to. (media|content)</param>
	/// <param name="id">Node ID of the item to move.</param>
	/// <param name="parent">Node ID of the parent to move the node to.</param>
	/// <param name="index">Sort index to use to order the item.</param>
	/// <returns></returns>
	[RestExtensionMethod()]
	public static XDocument MoveNode(string app, int id, int parent, int index)
	{
	// If this is a media item.
	if (app == "media")
	{
	// Get the node.
	var node = new Media(id);
	// If the parent has changed move the item.
	if (parent != node.ParentId)
	{
	if (parent == -1)
	{
	/* Uncomment for root level content type checking on umbraco 6.0+ */
	/*if (!node.ContentType.AllowAtRoot)
	{
	return new XDocument(new XDeclaration("1.0", "UTF-8", "yes"),
	new XElement("result",
	new XAttribute("success", false),
	new XAttribute("message", String.Format("The content type {0} isn't allowed at the root level.", node.ContentType.Text))
	)
	);
	}*/
	}
	else if (parent > 0)
	{
	var parentNode = new Media(parent);
	if (!parentNode.ContentType.AllowedChildContentTypeIDs.Contains(node.ContentType.Id))
	{
	return new XDocument(new XDeclaration("1.0", "UTF-8", "yes"),
	new XElement("result",
	new XAttribute("success", false),
	new XAttribute("message", String.Format("The content type {0} isn't allowed in a {1}.", node.ContentType.Text, parentNode.ContentType.Text))
	)
	);
	}
	}
	// Move the node.
	node.Move(parent);
	}
	// Update the sort order.
	//node.sortOrder = index;
	// Return a success status.
	return new XDocument(new XDeclaration("1.0", "UTF-8", "yes"),
	new XElement("result",
	new XAttribute("success", true),
	new XAttribute("message", String.Format("The media {0} has been moved into {1}.", node.Text, new CMSNode(parent).Text))
	)
	);
	}
	// If this is a content item.
	if (app == "content")
	{
	// Get the document.
	var node = new Document(id);
	// If the parent has changed move the item.
	if (parent != node.ParentId)
	{
	if (parent == -1)
	{
	/* Uncomment for root level content type checking on umbraco 6.0+ */
	/*if (!node.ContentType.AllowAtRoot)
	{
	return new XDocument(new XDeclaration("1.0", "UTF-8", "yes"),
	new XElement("result",
	new XAttribute("success", false),
	new XAttribute("message", String.Format("The content type {0} isn't allowed at the root level.", node.ContentType.Text))
	)
	);
	}*/
	}
	else if (parent > 0)
	{
	var parentNode = new Document(parent);
	if (!parentNode.ContentType.AllowedChildContentTypeIDs.Contains(node.ContentType.Id))
	{
	return new XDocument(new XDeclaration("1.0", "UTF-8", "yes"),
	new XElement("result",
	new XAttribute("success", false),
	new XAttribute("message", String.Format("The content type {0} isn't allowed in a {1}.", node.ContentType.Text, parentNode.ContentType.Text))
	)
	);
	}
	}
	// Move the document.
	node.Move(parent);
	umbraco.library.RefreshContent();
	// Publish the document to update it's URL.
	node.Publish(umbraco.BusinessLogic.User.GetCurrent());
	// Refresh the document cache.
	umbraco.library.UpdateDocumentCache(node.Id);
	// Refresh the sml cache.
	System.Xml.XmlDocument xd = new System.Xml.XmlDocument();
	node.XmlGenerate(xd);
	umbraco.library.RefreshContent();
	}
	// Update the sort order.
	//node.sortOrder = index;
	// Return a sucess message.
	return new XDocument(new XDeclaration("1.0", "UTF-8", "yes"),
	new XElement("result",
	new XAttribute("success", true),
	new XAttribute("message", String.Format("The document {0} has been moved into {1}.", node.Text, new CMSNode(parent).Text))
	)
	);
	}
	// Return a error message.
	return new XDocument(new XDeclaration("1.0", "UTF-8", "yes"),
	new XElement("result",
	new XAttribute("success", false),
	new XAttribute("message", String.Format("Content Tree {0} is not supported.", app))
	)
	);
	}
	}
	}

view raw ResetDragDrop.cs hosted with ❤ by GitHub

If you upgrade your Umbraco version you will need to re-apply the customizations in steps 2 and 3 as they will get overwritten.