Vue.js实现拖放效果的实例


Posted in Javascript onSeptember 30, 2016

页面效果如下所示:

Vue.js实现拖放效果的实例

代码请看这里,当当当当:

html:

<template>
<div class='drag-content'>
<div class='project-content'>
<div class='select-item' draggable='true' @dragstart='drag($event)' v-for='pjdt in projectdatas'>{{pjdt.name}}</div>
</div>
<div class='people-content'>
<div class='drag-div' v-for='(ppindex,ppdt) in peopledata' @drop='drop($event)' @dragover='allowDrop($event)'>
<div class='select-project-item'>
<label class='drag-people-label'>{{ppdt.name}}:</label>
</div>
</div>
</div>
</div>
</template>
<div class='select-item' draggable='true' @dragstart='drag($event)' v-for='pjdt in projectdatas'>{{pjdt.name}}</div>

在这行代码中小颖在绑定dragstart事件时,drag($event)写法和js写法不一样,如果你在vue中绑定事件时要传 'event',你不能像js那种格式去写 ,比如:@dragstart='drag(event)' 这个写的话你在drag方法中获取到的event是 undefined,因为它把 @dragstart='drag(event)' 中的event当成了一个变量,而该变量并没有在data中定义所以就是 undefined.早上小颖就碰到过此坑.所以切记格式是介个酱紫的: @dragstart='drag($event)'

js代码:

<script>
let dom = null
export default {
components: {
},
ready: function() {
},
methods: {
drag:function(event){
dom = event.currentTarget
},
drop:function(event){
event.preventDefault();
event.target.appendChild(dom);
},
allowDrop:function(event){
event.preventDefault();
},
},
data() {
return {
projectdatas:[{
id:1,
name:'葡萄',
},{
id:2,
name:'芒果',
},{
id:3,
name:'木瓜',
},{
id:4,
name:'榴莲',
}],
peopledata:[{
id:1,
name:'小颖',
},{
id:2,
name:'hover',
},{
id:3,
name:'空巢青年三 ',
},{
id:3,
name:'一丢丢',
}]
}
}
}
</script>

以上所述是小编给大家介绍的Vue.js实现拖放效果的实例,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Javascript MD4
Dec 20 Javascript
基于Jquery+Ajax+Json的高效分页实现代码
Oct 29 Javascript
js实现页面跳转的五种方法推荐
Mar 10 Javascript
AngularJS之依赖注入模拟实现
Aug 19 Javascript
微信小程序 富文本转文本实例详解
Oct 24 Javascript
ionic中的$ionicPlatform.ready事件中的通用设置
Jun 11 Javascript
详解vue 配合vue-resource调用接口获取数据
Jun 22 Javascript
Angular CLI 安装和使用教程
Sep 13 Javascript
解决vue 打包发布去#和页面空白的问题
Sep 04 Javascript
小程序实现展开/收起的效果示例
Sep 22 Javascript
详解如何创建并发布一个 vue 组件
Nov 08 Javascript
解决layui table表单提示数据接口请求异常的问题
Sep 24 Javascript
PHP抓取HTTPS内容和错误处理的方法
Sep 30 #Javascript
Vue.js动态添加、删除选题的实例代码
Sep 30 #Javascript
关于List.ToArray()方法的效率测试
Sep 30 #Javascript
微信小程序 window_x64环境搭建
Sep 30 #Javascript
JS框架之vue.js(深入三:组件1)
Sep 29 #Javascript
JavaScript 对象详细整理总结
Sep 29 #Javascript
JS实现拖动滚动条评分的效果代码分享
Sep 29 #Javascript
You might like
破解.net程序(dll文件)编译和反编译方法
2013/01/31 PHP
php通过session防url攻击方法
2014/12/10 PHP
深入理解PHP中的Streams工具
2015/07/03 PHP
php实现QQ空间获取当前用户的用户名并生成图片
2015/07/25 PHP
php PDO异常处理详解
2016/11/20 PHP
php设计模式之策略模式应用案例详解
2019/06/17 PHP
表单JS弹出填写提示效果代码
2011/04/16 Javascript
给jQuery方法添加回调函数一款插件的应用
2013/01/21 Javascript
去掉gridPanel表头全选框的小例子
2013/07/18 Javascript
js jquery分别实现动态的文件上传操作按钮的添加和删除
2014/01/13 Javascript
9款2014最热门jQuery实用特效推荐
2014/12/07 Javascript
Js控制滑轮左右滑动实例
2015/02/13 Javascript
jQuery验证元素是否为空的两种常用方法
2015/03/17 Javascript
JavaScript学习笔记之取数组中最大值和最小值
2016/03/23 Javascript
网站申请不到支付宝接口、微信接口,免接口收款实现方式几种解决办法
2016/12/14 Javascript
详解JS中的立即执行函数
2017/02/24 Javascript
vue-cli如何引入bootstrap工具的方法
2017/10/19 Javascript
JS实现点击循环切换显示内容的方法
2017/10/19 Javascript
webpack多页面开发实践
2017/12/18 Javascript
layui点击按钮添加可编辑的一行方法
2018/08/15 Javascript
JS实现的冒泡排序,快速排序,插入排序算法示例
2019/03/02 Javascript
JavaScript函数式编程(Functional Programming)声明式与命令式实例分析
2019/05/21 Javascript
Javascript类型判断相关例题及解析
2020/08/26 Javascript
python 反向输出字符串的方法
2018/07/16 Python
对web.py设置favicon.ico的方法详解
2018/12/04 Python
Python 动态变量名定义与调用方法
2020/02/09 Python
解决HTML5手机端页面缩放的问题
2017/10/27 HTML / CSS
Nordgreen手表德国官方网站:丹麦极简主义手表
2019/10/31 全球购物
都柏林通行卡/城市通票:The Dublin Pass
2020/02/16 全球购物
IMPORT的选项IGNORE有什么作用?缺省是什么设置?
2015/09/17 面试题
机械工程师求职自我评价
2013/09/23 职场文书
学生生病请假条范文
2014/02/16 职场文书
老师对学生的寄语
2014/04/09 职场文书
干部作风建设工作总结
2014/10/29 职场文书
jackson json序列化实现首字母大写,第二个字母需小写
2021/06/29 Java/Android
在Spring-Boot中如何使用@Value注解注入集合类
2021/08/02 Java/Android