Dragging & Dropping between SharePoint Document Libraries

Microsoft Sharepoint’s ECMAScript (JavaScript, JScript) object model allows you to interact with SharePoint sites from scripts that executes in the browser. In this post, we will examine a detailed example of moving documents by simply dragging & dropping the files between document libraries.

How it Should Work

1. Start moving the files by dragging the file type icon, then dropping it in desired destination document library as shown:

2. JavaScript will begin moving the file asynchronously.

3. It will then display a notification when complete.

Using SharePoint Designer

We need the jQuery JavaScript library and the jQuery UI Plugin.

1. Upload plug-in into a “jQuery” library in your SharePoint site.
2. Next, open-up the SharePoint Site and edit the list’s “All Document” views in SharePoint Designer and add links to the jQuery script and the plugin.

(Read my blog <<Improving SharePoint User Experience With JQuery–Clientside? Form Validate>> for details)

Writing the JavaScript Code

1. Open your library.
2. Add a content editor web part.
3. Then add the following source code with the editor.

        $(document).ready(function () {
            function myHelper(event) {
                return '<div>' + event.target.outerHTML + '';
            }

            $(".ms-vb-icon").find("img").each(
	            function (index, item) {
	                $(item).draggable(
				        {
				            helper: myHelper,
				            cursor: 'move'
				        }
			        );
	            }
            )

            $("a[href*='Form']").droppable({
                drop: handleDropEvent
            });
            function handleDropEvent(event, ui) {
                var draggable = $(ui.draggable);
                var context = SP.ClientContext.get_current();
                var web = context.get_web();
                var lists = web.get_lists();
                var _destinationlib = lists.getByTitle($(event.target).text());
                context.load(web);
                context.load(_destinationlib);
                console.log(draggable.parent().parent().find('a').attr("href").split("/")[1]);
                var currentLib = lists.getByTitle(draggable.parent().parent().find('a').attr("href").split("/")[1]);
                var notifyId;
                var currentItem = currentLib.getItemById(draggable.parent().parent().find('a').parent().attr("id"));
                context.load(currentItem);

                var File = currentItem.get_file();
                context.load(File);
                //Excecuting executeQueryAsync to get the loaded values
                context.executeQueryAsync
                (
	                function (sender, args) {
	                    if (File != null) {
	                        var _destinationlibUrl = web.get_serverRelativeUrl() + _destinationlib.get_title() + '/' + File.get_name();
	                        File.copyTo(_destinationlibUrl, true);
	                        notifyId = SP.UI.Notify.addNotification('Moving file...' + File.get_serverRelativeUrl() + 'to' + _destinationlibUrl, true);
	                        //Excecuting executeQueryAsync to copy the file
	                        context.executeQueryAsync(
				                function (sender, args) {
				                    SP.UI.Notify.removeNotification(notifyId);
				                    SP.UI.Notify.addNotification('File copied successfully', false);
				                },
				                function (sender, args) {
				                    SP.UI.Notify.addNotification('Error copying file', false);
				                    SP.UI.Notify.removeNotification(notifyId);
				                    showError(args.get_message());
				                });
	                    }
	                },
	                function (sender, args) {
	                    alert('Error occured' + args.get_message());
	                }
                );
            }
        });