Vue.Draggable

Vue.Draggable拖動效果

下載包：npm install vue-draggable --save

組件中引進依賴：

import draggable from 'vuedraggable'

 

注冊：draggable這個組件

components: {

　　draggable

},

<draggable :options="{group:'people',animation:150,ghostClass:'sortable-ghost',chosenClass:'chosenClass',scroll:true,scrollSensitivity:200}" v-model="list2" @change="change" @start="start" @end="end" :move="move" style="display: inline-block; width:190px;height: 200px;background: #eee;overflow: auto"> <li v-for="(item, index) in list2" :class="setclass(item,index)" :key="index"> {{item.name}} </li> </draggable>

事件

//evt里面有兩個值，一個evt.added 和evt.removed  可以分別知道移動元素的ID和刪除元素的ID
    change: function (evt) {
      console.log(evt)
    },
    //start ,end ,add,update, sort, remove 得到的都差不多
    start: function (evt) {
      console.log(evt)
    },
    end: function (evt) {
      console.log(evt)
      evt.item //可以知道拖動的本身
      evt.to    // 可以知道拖動的目標列表
      evt.from  // 可以知道之前的列表
      evt.oldIndex  // 可以知道拖動前的位置
      evt.newIndex  // 可以知道拖動后的位置
    },
    move: function (evt, originalEvent) {
      console.log(evt)
      console.log(originalEvent) //鼠標位置
    }

屬性

group: "name",  // or { name: "...", pull: [true, false, clone], put: [true, false, array] } name相同的組可以互相拖動
  sort: true,  // 內部排序列表
  delay: 0, // 以毫秒為單位定義排序何時開始。
  touchStartThreshold: 0, // px,在取消延遲拖動事件之前，點應該移動多少像素?
  disabled: false, // 如果設置為真，則禁用sortable。
  store: null,  // @see Store
  animation: 150,  // ms, 動畫速度運動項目排序時，' 0 ' -沒有動畫。
  handle: ".my-handle",  // 在列表項中拖動句柄選擇器。
  filter: ".ignore-elements",  // 不導致拖拽的選擇器(字符串或函數)
  preventOnFilter: true, // 調用“event.preventDefault()”時觸發“filter”
  draggable: ".item",  // 指定元素中的哪些項應該是可拖動的。
  ghostClass: "sortable-ghost",  // 設置拖動元素的class的占位符的類名。
  chosenClass: "sortable-chosen",  // 設置被選中的元素的class
  dragClass: "sortable-drag",  //拖動元素的class。
  dataIdAttr: 'data-id',

  forceFallback: false,  // 忽略HTML5的DnD行為，並強制退出。（h5里有個屬性也是拖動，這里是為了去掉H5拖動對這個的影響）
  fallbackClass: "sortable-fallback",  // 使用forceFallback時克隆的DOM元素的類名。
  fallbackOnBody: false,  // 將克隆的DOM元素添加到文檔的主體中。（默認放在被拖動元素的同級）
  fallbackTolerance: 0, // 用像素指定鼠標在被視為拖拽之前應該移動的距離。

  scroll: true, // or HTMLElement
  scrollFn: function(offsetX, offsetY, originalEvent, touchEvt, hoverTargetEl) { ... }, // if you have custom scrollbar scrollFn may be used for autoscrolling
scrollSensitivity: 30, // px, how near the mouse must be to an edge to start scrolling.
  scrollSpeed: 10, // px

 

拖動中

拖動結束

methods: {
      getdata (evt) {
        console.log(evt.draggedContext.element.id)
      },
      datadragEnd (evt) {
        console.log('拖動前的索引 :' + evt.oldIndex)
        console.log('拖動后的索引 :' + evt.newIndex)
        console.log(this.tags)
      }
    }

Vue.Draggable鏈接地址:  https://link.jianshu.com/?t=https%3A%2F%2Fgithub.com%2FSortableJS%2FVue.Draggable

自說自話，自己打自己臉\(^o^)/~）

自封裝拖動效果

<div id="app" @mousedown="move">       <!--綁定按下事件-->

methods:{
        move(e){
            let odiv = e.target;        //獲取目標元素
            
            //算出鼠標相對元素的位置
            let disX = e.clientX - odiv.offsetLeft;
            let disY = e.clientY - odiv.offsetTop;
            document.onmousemove = (e)=>{       //鼠標按下並移動的事件
                //用鼠標的位置減去鼠標相對元素的位置，得到元素的位置
                let left = e.clientX - disX;    
                let top = e.clientY - disY;
                
                //綁定元素位置到positionX和positionY上面
                this.positionX = top;
                this.positionY = left;
                
                //移動當前元素
                odiv.style.left = left + 'px';
                odiv.style.top = top + 'px';
            };
            document.onmouseup = (e) => {
                document.onmousemove = null;
                document.onmouseup = null;
            };
        }    
    
    },