vue實現的拖拽框組件

先下載插件。npm install zkr-drag --save

完成后可以在全局引入（main.js文件）

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import vueTost from 'zkr-drag'

Vue.config.productionTip = false
Vue.use(vueTost)

/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { App },
  template: '<App/>'
})

　　然后是在具體頁面使用：

<test-toast></test-toast>

　　如果想要更改拖拽框里的內容，可以直接在里面寫標簽

<test-toast>
      <div style="color:red;">121212121</div>
      <div style="color:red;">121212121</div>
</test-toast>

　　

　就會出現：

 具體效果可以訪問地址https://zctt666666.github.io/demo/drag  是原生html寫的，跟這個vue插件效果一樣