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插件效果一样

转载于:https://www.cnblogs.com/yck123/p/10536958.html