Drag & Drop between SharePoint Document libraries

Microsoft Sharepoint's ECMAScript (JavaScript, JScript) object model allow you to interact with SharePoint sites from script that executes in the browser.In this post we will see a detail example of moving documents by simply drag & drop the files between documents libraries.

   

Start moving the files by dragging the file type icon then drop it in desirable destination document library as shown:

   

   

JavaScript begin moving file asynchronous, and show notification.

   

   

   

   

SharePoint Designer

   

We need jQuery JavaScript library and jQuery UI Plugin. Upload plug-in into a "jquery" library in your SharePoint site.

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 last blog <<Improving SharePoint User Experience With JQuery--Clientside Form Validate>> for detail

   

Write JavaScript Code

   

Open your library , add a content editor web part then add following code to source editor

   

<script type="text/javascript">

$(document).ready(function () {

function myHelper(event) {

return '<div>' + event.target.outerHTML + '</div>';

}

   

$(".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());

}

);

}

});

</script>