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 相关文章推荐
DEFER怎么用?
Jul 01 Javascript
JS 自定义带默认值的函数
Jul 21 Javascript
IE6已终止操作问题的2种情况及解决
Apr 23 Javascript
JavaScript DOM 学习总结(五)
Nov 24 Javascript
Angular中使用ui router实现系统权限控制及开发遇到问题
Sep 23 Javascript
JavaScript实现通过select标签跳转网页的方法
Sep 29 Javascript
最原始的jQuery注册验证方式
Oct 11 Javascript
BootStrap中的模态框(modal,弹出层)功能示例代码
Nov 02 Javascript
关于vue状态过渡transition不起作用的原因解决
Apr 09 Javascript
vue制作toast组件npm包示例代码
Oct 29 Javascript
Antd中单个DatePicker限定时间输入范围操作
Oct 29 Javascript
用Javascript实现发送短信验证码间隔功能
Feb 08 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
ThinkPHP写第一个模块应用
2012/02/20 PHP
php实现获取局域网所有用户的电脑IP和主机名、及mac地址完整实例
2014/07/18 PHP
php通过baihui网API实现读取word文档并展示
2015/06/22 PHP
PHP简单装饰器模式实现与用法示例
2017/06/22 PHP
PHP 命名空间和自动加载原理与用法实例分析
2020/04/29 PHP
JQuery Tab选项卡效果代码改进版
2010/04/01 Javascript
jQuery.prototype.init选择器构造函数源码思路分析
2013/02/05 Javascript
setInterval()和setTimeout()的用法和区别示例介绍
2013/11/17 Javascript
JavaScript设计模式之代理模式介绍
2014/12/28 Javascript
javascript实现网页中涉及的简易运动(改变宽高、透明度、位置)
2015/11/29 Javascript
深入解析JavaScript框架Backbone.js中的事件机制
2016/02/14 Javascript
javascript时间戳和日期字符串相互转换代码(超简单)
2016/06/22 Javascript
JavaScript之cookie技术详解
2016/11/18 Javascript
移动设备手势事件库Touch.js使用详解
2017/08/18 Javascript
JS实现的简单折叠展开动画效果示例
2018/04/28 Javascript
Vue2.0仿饿了么webapp单页面应用详细步骤
2018/07/08 Javascript
JavaScript中的事件与异常捕获详析
2019/02/24 Javascript
Node.js设置定时任务之node-schedule模块的使用详解
2020/04/28 Javascript
微信小程序开发打开另一个小程序的实现方法
2020/05/17 Javascript
JS实现炫酷雪花飘落效果
2020/08/19 Javascript
[01:52]深扒TI7聊天轮盘语音出处7
2017/05/11 DOTA
Python+Pandas 获取数据库并加入DataFrame的实例
2018/07/25 Python
浅谈Pycharm中的Python Console与Terminal
2019/01/17 Python
python使用MQTT给硬件传输图片的实现方法
2019/05/05 Python
记录Python脚本的运行日志的方法
2019/06/05 Python
python之生产者消费者模型实现详解
2019/07/27 Python
Python读写文件模式和文件对象方法实例详解
2019/09/17 Python
pygame实现俄罗斯方块游戏(基础篇1)
2019/10/29 Python
html5视频常用API接口的实战示例
2020/03/20 HTML / CSS
网络艺术零售业的先驱者:artrepublic
2017/09/26 全球购物
武汉世纪畅想数字传播有限公司.NET笔试题
2014/07/22 面试题
电子商务专业自我鉴定
2013/12/18 职场文书
会计工作决心书
2014/03/11 职场文书
2015年国庆节演讲稿范文
2015/07/30 职场文书
MySQL索引失效的典型案例
2021/06/05 MySQL
MySQL七种JOIN类型小结
2021/10/24 MySQL