{"id":4269,"date":"2012-06-13T13:51:22","date_gmt":"2012-06-13T05:51:22","guid":{"rendered":"http:\/\/www.sharepointboost.com\/blog\/?p=4269"},"modified":"2023-07-31T11:39:51","modified_gmt":"2023-07-31T03:39:51","slug":"dragging-dropping-between-sharepoint-document-libraries","status":"publish","type":"post","link":"https:\/\/www.boostsolutions.com\/blog\/dragging-dropping-between-sharepoint-document-libraries\/","title":{"rendered":"Dragging & Dropping between SharePoint Document Libraries"},"content":{"rendered":"

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.<\/p>\n

How it Should Work<\/strong><\/p>\n

<\/strong>1. Start moving the files by dragging the file type icon, then dropping it in desired destination document library as shown:<\/p>\n

\"\"<\/a><\/p>\n

2. JavaScript will begin moving the file asynchronously.<\/p>\n

\"\"<\/a><\/p>\n

<\/a>3. It will then display a notification when complete.<\/p>\n

\"\"<\/a><\/p>\n

Using SharePoint Designer<\/strong><\/p>\n

We need the jQuery JavaScript library and the jQuery UI Plugin.<\/p>\n

    \n
  1. Upload plug-in into a “jQuery” library in your SharePoint site.<\/li>\n
  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.<\/li>\n<\/ol>\n

    <\/em><\/p>\n

    (Read my blog <\/em><<Improving SharePoint User Experience With JQuery–Clientside? Form Validate>><\/em><\/a> for details)<\/em><\/p>\n

    Writing the JavaScript Code<\/strong><\/p>\n

      \n
    1. Open your library.<\/li>\n
    2. Add a content editor web part.<\/li>\n
    3. Then add the following source code with the editor.<\/li>\n<\/ol>\n
              $(document).ready(function () {\r\n            function myHelper(event) {\r\n                return '<div>' + event.target.outerHTML + '';\r\n            }\r\n\r\n            $(\".ms-vb-icon\").find(\"img\").each(\r\n\t            function (index, item) {\r\n\t                $(item).draggable(\r\n\t\t\t\t        {\r\n\t\t\t\t            helper: myHelper,\r\n\t\t\t\t            cursor: 'move'\r\n\t\t\t\t        }\r\n\t\t\t        );\r\n\t            }\r\n            )\r\n\r\n            $(\"a[href*='Form']\").droppable({\r\n                drop: handleDropEvent\r\n            });\r\n            function handleDropEvent(event, ui) {\r\n                var draggable = $(ui.draggable);\r\n                var context = SP.ClientContext.get_current();\r\n                var web = context.get_web();\r\n                var lists = web.get_lists();\r\n                var _destinationlib = lists.getByTitle($(event.target).text());\r\n                context.load(web);\r\n                context.load(_destinationlib);\r\n                console.log(draggable.parent().parent().find('a').attr(\"href\").split(\"\/\")[1]);\r\n                var currentLib = lists.getByTitle(draggable.parent().parent().find('a').attr(\"href\").split(\"\/\")[1]);\r\n                var notifyId;\r\n                var currentItem = currentLib.getItemById(draggable.parent().parent().find('a').parent().attr(\"id\"));\r\n                context.load(currentItem);\r\n\r\n                var File = currentItem.get_file();\r\n                context.load(File);\r\n                \/\/Excecuting executeQueryAsync to get the loaded values\r\n                context.executeQueryAsync\r\n                (\r\n\t                function (sender, args) {\r\n\t                    if (File != null) {\r\n\t                        var _destinationlibUrl = web.get_serverRelativeUrl() + _destinationlib.get_title() + '\/' + File.get_name();\r\n\t                        File.copyTo(_destinationlibUrl, true);\r\n\t                        notifyId = SP.UI.Notify.addNotification('Moving file...' + File.get_serverRelativeUrl() + 'to' + _destinationlibUrl, true);\r\n\t                        \/\/Excecuting executeQueryAsync to copy the file\r\n\t                        context.executeQueryAsync(\r\n\t\t\t\t                function (sender, args) {\r\n\t\t\t\t                    SP.UI.Notify.removeNotification(notifyId);\r\n\t\t\t\t                    SP.UI.Notify.addNotification('File copied successfully', false);\r\n\t\t\t\t                },\r\n\t\t\t\t                function (sender, args) {\r\n\t\t\t\t                    SP.UI.Notify.addNotification('Error copying file', false);\r\n\t\t\t\t                    SP.UI.Notify.removeNotification(notifyId);\r\n\t\t\t\t                    showError(args.get_message());\r\n\t\t\t\t                });\r\n\t                    }\r\n\t                },\r\n\t                function (sender, args) {\r\n\t                    alert('Error occured' + args.get_message());\r\n\t                }\r\n                );\r\n            }\r\n        });<\/pre>\n","protected":false},"excerpt":{"rendered":"
      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 […]<\/p>\n","protected":false},"author":42,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[125],"tags":[396,395,397],"_links":{"self":[{"href":"https:\/\/www.boostsolutions.com\/blog\/wp-json\/wp\/v2\/posts\/4269"}],"collection":[{"href":"https:\/\/www.boostsolutions.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.boostsolutions.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.boostsolutions.com\/blog\/wp-json\/wp\/v2\/users\/42"}],"replies":[{"embeddable":true,"href":"https:\/\/www.boostsolutions.com\/blog\/wp-json\/wp\/v2\/comments?post=4269"}],"version-history":[{"count":31,"href":"https:\/\/www.boostsolutions.com\/blog\/wp-json\/wp\/v2\/posts\/4269\/revisions"}],"predecessor-version":[{"id":9217,"href":"https:\/\/www.boostsolutions.com\/blog\/wp-json\/wp\/v2\/posts\/4269\/revisions\/9217"}],"wp:attachment":[{"href":"https:\/\/www.boostsolutions.com\/blog\/wp-json\/wp\/v2\/media?parent=4269"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.boostsolutions.com\/blog\/wp-json\/wp\/v2\/categories?post=4269"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.boostsolutions.com\/blog\/wp-json\/wp\/v2\/tags?post=4269"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}