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上面，地址