拖拽插件的使用

1.jQuery List DragSort ；一个适合拖动块元素的插件

$('.m-media-manager-list').dragsort({  // $('.m-media-manager-list')，获取拖拽列表
    dragSelector: 'li',   // 可拖拽的块
    placeHolderTemplate: '<li class="drag-placeholder"></li>',  // 模块拖动后，要插入的位置的HTML结构
    dragEnd: function () {
      // 拖拽结束后要调用的函数
    }
});
/*
* 插件的其他参数说明
* dragSelectorExclude：在拖拽块中不会触发拖拽的元素；默认值是”input, textarea, a[href]”。
* dragBetween：是否启用多组列表间的相互拖动。默认false 
* scrollSpeed：
* scrollContainer：
*/

2.jQuery Sortable；一个适合拖动树状型的列表

// 父级移动
$('.m-grouping-list').sortable({
      delay: 150, //鼠标点下的多少毫秒之后触发拖拽
      containerSelector: '.m-grouping-list', // 拖拽的容器
      handle: '.m-parent-handle',  //触发拖拽
      itemSelector: 'div.m-parent-grouping',  // 需要拖拽的项
      placeholder: '<div class="m-grouping-placeholder placeholder"></div>',  // 拖拽项插入新位置的占位符
      onDrop: function ($item, container, _super) {
        // 在鼠标移动事件开始时执行。 占位符尚未移动。
      }    
    });
// 子级移动
    $('.js-m-grouping-wrap').sortable({
      delay: 150,
      group: 'js-m-grouping-wrap', // 多个同级列表之间的相互移动
      containerSelector: '.js-m-grouping-wrap',
      handle: '.m-son-grouping',
      itemSelector: 'div.m-son-grouping',
      placeholder: '<div class="m-grouping-placeholder placeholder"></div>',
      onDrop: function ($item, container, _super) {
        // 
      }  
    });