Vue拖拽插件——Draglua 中文使用教程
本人也在不断的学习和积累中，文章中有不足和误导的地方还请见谅，可枝渗以给我留言指正。希望和大家共同进步，共建和谐学习环境。
1、npm安装
2、bower安装
3、CDN
注： 最好放在body中引用，不要放在head中。
需要引入一些css样式，在页面中引入 dist/dragula.css 或 dist/dragula.min.css ，如果你使用的是Stylus，你可以这样引入
下面的示例允许用户将元素从中left拖入right和从中right拖入left
您还可以提供一个options对象。以下是默认值的介绍
您可以省略猛亩脊container参数，稍后动态添加容器。
还可以从options对象设置容器
你还可以设置一个没有container和options的draglua
dragula方法返回一个带有简洁API的小对象。我们将耐余把dragula返回的API称为drake。
Dragula只使用四个CSS类。下面将快速解释它们的用途
默认：
Github/dragula
vue怎么把内容拖拽到下拉框内
需要有一个可拖拽的div元素。
1、该div元素应唯拿亮设置draggable=true属性来标识该元素可拖拽。
2、为该div元素添加一个v-on：dragstart监听事件，该事件函数接收一个event参数。
3、其中包含所拖动的div元素和其他数据，该事件函数可以用来获取拖拽的元素的信息，并将其存入dataTransfer对象中，以便在放置时提取这些数据。
4、为要放置的元素添加一个v-on：drop监听事件，该事件函数会接收一个event参数，在该事件中，可使用dataTransfer.getData()方法取出之前指宽传入的数据。
5、将该数据写入下拉框中即可完成拖拽到下拉框的敏猜功能。
Vue 也能实现拖拽了 (vue-dragging)
vue-dragging 的 npm 包的名字是 awe-dnd ，并不是 vue-dragging，
特点 : 封装了 v-dragging 全局指令，然后通过全局指令去数据绑定等。
相比及 vuedraggable 来说， awe-dnd 是没有暴露双向绑定的方历液式，因此提供了事件，在拖拽结束的时候用来更新列表或者是去触发父组件监听的事件。
第一步: 安装
第二步: 引入
第三步: 使用
童鞋激闷们发现一个特殊指令: v-dragging="肢铅物{ item: item, list: dataList, group: 'color' }"
这种形式进行指令绑定，其中 item 就是单个对象，而 list 则是数据列表， group 则是用来声明一个组，来保证可以在一个页面中进行多个数据源的操作。
还有提供两个方法:
以上内容为新媒号(sinv.com.cn)为大家提供！新媒号，坚持更新大家所需的前端知识。希望您喜欢！
版权申明：新媒号所有作品（图文、音视频）均由用户自行上传分享，仅供网友学习交流，不声明或保证其内容的正确性，如发现本站有涉嫌抄袭侵权/违法违规的内容。请发送邮件至 k2#88.com(替换@) 举报，一经查实，本站将立刻删除。
