jquery-ui sortable 使用实例

Posted 2020-10-14 唐岗

jquery-ui sortable 使用实例

最近公司需要做任务看板，需要拖拽效果。点击查看效果。由于网站是基于vue的技术栈，最开始找了一个现成的vue封装的拖拽组件：Vue.Draggable，该组件是基于sortable封装的。但是由于使用的原生html5的拖拽属性，导致拖拽过程有透明度，而且不能修改透明度和倾斜度，达不到产品的要求（产品要求模仿worktile的使用体验）。同时我也看了同行很多类似的看板效果，都有倾斜度和非透明，经研究，采用的jquery-ui的sortable。所以，死皮赖脸的选择jquery-ui的sortable来操作，其实是极不情愿的使用：因为基于jQuery的，jQuery占空间太大。但由于是pc端，也还可以接受。

在开发之前，可以先看jquery-ui的sortable的官方文档和国人整理的文档的一些实例。

• 引入jquery库和jquery-ui库

  // 引入样式文件
  <link rel="stylesheet" href="https://static.clouderwork.com/task/static/js/jquery-ui.min.css">
  // 引入jquery 库
  <script src="https://static.clouderwork.com/task/static/js/jquery.min.js"></script>
  // 引入jquery-ui库
  <script src="https://static.clouderwork.com/task/static/js/jquery-ui.min.js"></script>

• 使用实例代码

  // 初始化拖拽
  initSort () {
    // 拖拽时开始滚动的间距
    var scrollingSensitivity = 20
    // 拖拽时滚动速度
    let scrollingSpeed = 20
    // 拖拽前的父级节点
    let dragBeforeParentNode = null
    // 初始化拖拽函数
    $('.task-lists').sortable({
      // 自适应placeholder的大小
      forceHelperSize: true,
      // 拖拽时的鼠标形状
      cursor : '-webkit-grabbing',
      // 拖拽的父级节点(该节点一定要注意，配置错误会导致当前屏幕外的元素没法自动滚动拖拽，两列之间拖拽的滚动也会出问题)
      appendTo: '.drag-task',
      // 拖拽时的倾斜度
      rotate: '5deg',
      // 延迟时间(毫秒)，避免和click同时操作时出现的冲突
      delay: 150,
      // 以clone方式拖拽
      helper: 'clone',
      // 拖拽到边框出现滚动的间距，
      scrollSensitivity:scrollingSensitivity,
      // 应用于拖拽空白区域的样式
      placeholder: 'portlet-placeholder ui-state-highlight',
      // 允许拖拽预留空白区域
      forcePlaceholderSize: true,
      // 多个列表之间的拖拽的dom元素
      connectWith: '.task-lists',
      // 拖拽结束函数
      stop: (e, ui) => {
        // 当前拽入的元素
        let item = $(ui.item)
        // 当前拽入元素的下标
        let index = item.index()
        let kid = ''
        // xxxx 这里面可以操作数据更新
      },
      // 开始拖拽时的函数
      start: (e, ui) => {
        // 拖拽前的父级节点
        dragBeforeParentNode = ui.item[0].parentNode
        // 让placeholder和源高度一致
         ui.placeholder.height(ui.helper[0].scrollHeight).width(258)
         // xxxx  这里可以记录一些拖拽前的元素属性
      },
      // 处理两列滚动条问题
      sort:function(event, ui){
        var scrollContainer = ui.placeholder[0].parentNode
        // 跨列拖拽的情况
        if (dragBeforeParentNode && dragBeforeParentNode.id !== scrollContainer.id) {
          // 设置拽入的列表的滚动位置
          var overflowOffset = $(scrollContainer).offset()
          if((overflowOffset.top + scrollContainer.offsetHeight) - event.pageY < scrollingSensitivity) {
            scrollContainer.scrollTop = scrollContainer.scrollTop + scrollingSpeed
          } else if(event.pageY - overflowOffset.top < scrollingSensitivity) {
            scrollContainer.scrollTop = scrollContainer.scrollTop - scrollingSpeed
          }
        }
      }
    }).disableSelection()

  ==在开发的时候一定要多看文档，了解其属性的含义会事半功倍，顺延解决问题。==
  下面给一个实例供参考：jquery-ui-sortable 实例， 源代码在github上面，地址