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 相关文章推荐
基于jquery的15款幻灯片插件
Apr 10 Javascript
js处理json以及字符串的比较等常用操作
Sep 08 Javascript
不要使用jQuery触发原生事件的方法
Mar 03 Javascript
一个简单的动态加载js和css的jquery代码
Sep 01 Javascript
12个非常实用的JavaScript小技巧【推荐】
May 18 Javascript
分享bootstrap学习笔记心得(组件及其属性)
Jan 11 Javascript
动态加载css方法实现和深入解析
Jan 18 Javascript
angular十大常见问题
Mar 07 Javascript
微信小程序使用Socket的实例
Sep 19 Javascript
vue的状态管理模式vuex
Nov 30 Javascript
微信小程序外卖选购页实现切换分类与数量加减功能案例
Jan 15 Javascript
JavaScript实现Tab选项卡切换
Feb 13 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
用PHP创建PDF中文文档
2006/10/09 PHP
PHP运行出现Notice : Use of undefined constant 的完美解决方案分享
2012/03/05 PHP
php socket实现的聊天室代码分享
2014/08/16 PHP
php计算title标题相似比的方法
2015/07/29 PHP
javascript 子窗体父窗体相互传值方法
2010/05/31 Javascript
Asp.net下利用Jquery Ajax实现用户注册检测(验证用户名是否存)
2010/09/12 Javascript
JavaScript高级程序设计(第3版)学习笔记11 内建js对象
2012/10/11 Javascript
jquery焦点图片切换(数字标注/手动/自动播放/横向滚动)
2013/01/24 Javascript
jquery获取一组checkbox的值(实例代码)
2013/11/04 Javascript
JavaScript中的Primitive对象封装介绍
2014/12/31 Javascript
IE下使用jQuery重置iframe地址时内存泄露问题解决办法
2015/02/05 Javascript
删除javascript所创建子节点的方法
2015/05/21 Javascript
深入浅析JavaScript中的3DES
2016/08/24 Javascript
vue 监听屏幕高度的实例
2018/09/05 Javascript
微信小程序中weui用法解析
2019/10/21 Javascript
详细介绍解决vue和jsp结合的方法
2020/02/06 Javascript
js实现贪吃蛇小游戏(加墙)
2020/07/31 Javascript
Vue循环中多个input绑定指定v-model实例
2020/08/31 Javascript
初学python数组的处理代码
2011/01/04 Python
py2exe 编译ico图标的代码
2013/03/08 Python
Python的SQLAlchemy框架使用入门
2015/04/29 Python
python爬虫爬取网页表格数据
2018/03/07 Python
解决python 未发现数据源名称并且未指定默认驱动程序的问题
2018/12/07 Python
python3射线法判断点是否在多边形内
2019/06/28 Python
基于python中__add__函数的用法
2019/11/25 Python
Django查询优化及ajax编码格式原理解析
2020/03/25 Python
简单的Python人脸识别系统
2020/07/14 Python
CSS3 transform的skew属性值图文详解
2014/07/21 HTML / CSS
英国时尚女装购物网站:Missguided
2018/08/23 全球购物
JYSK加拿大:购买家具、床垫、家居装饰等
2020/02/14 全球购物
面向对象编程的优势是什么
2015/12/17 面试题
指针和引用有什么区别
2013/01/13 面试题
俄语专业毕业生推荐信
2013/10/28 职场文书
服装设计专业自荐信
2014/06/17 职场文书
2015年财务科工作总结范文
2015/05/13 职场文书
2016年社区综治宣传月活动总结
2016/03/16 职场文书