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>

　　如果想要更改拖拽框里的内容，可以用js获取dom进行操作

如：

mounted(){
   document.getElementById("drag").innerHTML="<div style='color:red;'>121212121</div>"+
   "<div style='color:red;'>121212121</div>"
  }

　　就会出现：

 具体效果可以访问地址https://zctt666666.github.io/demo/drag  是原生html写的，跟这个vue插件效果一样