1. 程式人生 > 其它 >vue實現內容拖拽

vue實現內容拖拽

外掛文件:https://www.itxst.com/sortablejs/neuinffi.html

npm安裝方式

npm install sortablejs --save
import Sortable from 'sortablejs'

 

data() {
    return {  
    list: [
    { 'id': 'defaultTypeTag1' },
    { 'id': 'defaultTypeTag2' },
    { 'id': 'defaultTypeTag3' },
    { 'id': 'defaultTypeTag4' },
     { 'id': 'defaultTypeTag5' },
     { 'id': 'defaultTypeTag6' },
     { 'id': 'defaultTypeTag7' },
     { 'id': 'defaultTypeTag8' },
     { 'id': 'defaultTypeTag9' },
     { 'id': 'defaultTypeTag10' },
    { 'id': 'defaultTypeTag11' }
  ]
} }
  mounted() {
    // 初始化
    new Sortable(document.querySelector('.dashboard-container'), {
      animation: 
200 }) new Sortable(document.querySelector('.top_container'), { animation: 200 }) new Sortable(document.querySelector('.center_container'), { animation: 200 }) },

參考來自:https://jsrun.net/6evKp/edit?v=1