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>