zoukankan      html  css  js  c++  java
  • 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>

       

       

       

       

  • 相关阅读:
    设计模式之 原型模式
    设计模式之 策略模式
    设计模式之 单例模式
    使用IntelliJ IDEA 15和Maven创建Java Web项目(转)
    Java 内存分配全面浅析(转)
    java常量池概念 (转)
    java基本类型和包装类的区别(转)
    JAVA数据类型(转)
    SQL SERVER 2008 服务器登录名、角色、数据库用户、角色、架构的关系(转)
    视图的好处(转)
  • 原文地址:https://www.cnblogs.com/osamede/p/2545396.html
Copyright © 2011-2022 走看看