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>