• 拖拽
• 拖拽加效果
• 排序

拖拽

dragulaDecorator = componentBackingInstance => {
  if (componentBackingInstance) {
    let options = {
      revertOnSpill: true, // 溢位會將元素放回到被拖動的位置
      mirrorContainer: document.body // 設定獲取映象元素的元素
      // moves: function (el, source, handle, sibling) {
      //     return true; // 元素預設是可拖動的 可設定預期的拖動元素
 

      // }
    };

    Dragula([componentBackingInstance], options)
      .on("drag", el => {
        options.mirrorContainer = el;
      })
      .on("dragend", el => {})
      .on("drop", (el, target, source, sibling) => {
        // 只有順序改變時才會觸發該方法 sibling沒有值，代表是移動了最後一個位置。
        this.props.
 
TicketForm.changeFieldSort(
          el.dataset.id,
          sibling.dataset.id
        );
        // if(sibling){

        // }else{
        //     console.log("我是最後一個");
        // }
        // console.log(toJS(this.props.TicketForm.formFileds));
      });
  }
};
<div className="dragula-container" ref=
 
{this.dragulaDecorator} />;

拖動加效果

// 在拖動時，gu-unselectable被新增到mirrorContainer元素。 您可以使用它來在正在拖動某個東西的情況下設定mirrorContainer的樣式。
.gu-unselectable {
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;
  // background-color: #fff;
}
// 當它的映象被拖拽時，gu-transit被新增到源元素中。 它只是增加了不透明度。
.gu-transit {
  opacity: 0.2;
  padding: 10px 0;
  border: 2px dashed;
  // background-color: rgba(0, 0, 0, 0.2);
  // transition: opacity 0.4s ease-in-out;
  // -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
  // filter: alpha(opacity=20);
}

// 映象被新增到映象中。 它處理固定位置和z-index（並刪除元素上的任何先前邊距）。
.gu-mirror {
  padding: 10px 0;
  // box-sizing: content-box;
  background-color: rgba(0, 0, 0, 0.3);
  border: 2px dashed;
  transition: opacity 0.4s ease-in-out;
  position: fixed !important;
  margin: 0 !important;
  z-index: 9999 !important;
  cursor: grabbing;
  cursor: -moz-grabbing;
  cursor: -webkit-grabbing;
}

.gu-hide {
  display: none !important;
}

獲取排序之後的順序

先根據index作為序號，拖拽元素位置更改後 ，刪除源資料，再把源資料插入到目標位置，然後重新排序。

store 中的程式碼：

// 管理排序
@action initFieldSort = () => {
  this.formFileds.map((item,index)=>{
    // 解決  物件更新 而 頁面上的資訊沒有隨之更新 的bug 
    // 原因：formFileds 更新了，但是卻沒有監聽到item的改變，所以使用到item的資料沒有發生變化
    let obj = JSON.parse(JSON.stringify(item));
    obj.sort = index;
    item = obj;
  });
}