vue使用drag与drop实现拖拽的示例代码


Posted in Javascript onSeptember 07, 2017

在功能中有一项是需要实现拖拽的。虽然最终项目没有采取这样的拖拽方式,但是,当初也是费了九牛二虎之力完成了这个功能。增加了对函数的更深理解。下面就再重现一下代码。

下面是代码片段:

<div 
class="fav-fold-panel" 
v-if="!typeChange" 
draggable="true" @dragstart="drag($event)"

@dragover="allowDrop($event)">

<!-- 面板内容 -->

<div 
class="favTitle-card" :data="favPanelAllData"
v-if="foldDone">

<favPanel
v-for="item
in favPanelAllData"
v-if="item.id===1" :favTitle="item.title"

renameText="更名"
foldText="折叠"

unfoldText="展开" :favListData="item.content"
draggable="true" @dragstart="drag($event)">

<ul 
class="ul-content">

<li 
class="ul-content-li" :favCommonList1="item.content"></li>

</ul>

<!-- <favPopPanel :show="popShow" @onHide="popShow = false"></favPopPanel> -->

<!-- <div :favListData="item.favListData"></div> -->

</favPanel>

</div>


<div
class="fav-card-create" :data="favPanelAllData">

<favFooter>

<el-button
type="primary" @click="addFoldFuc">新建文件夹</el-button>

<el-button-group>

<el-button @click="foldFuc">全部折叠</el-button>

<el-button @click="foldFuc">全部展开</el-button>

</el-button-group>

</favFooter>

</div>

</div>

另一段代码:

<div 
class="favTitle-card" :data="favPanelAllData"
draggable="true"
ondragstart="drag(event)">

<favPanel
v-for="item
in favPanelAllData"
v-if="item.id===2" :favTitle="item.title"

renameText="更名"
foldText="没我"
unfoldText="没你" :favListData="item.content">

<ul 
class="ul-content">

<li 
class="ul-content-li" :favListData="item.content" :if="!foldDone"></li>

</ul>

</favPanel>

</div>

function部分

drag(event) {

dom = event.currentTarget

},

drop(event) {

event.preventDefault()

event.target.appendChild(dom)

},


allowDrop(event) {

event.preventDefault()

}

然后,drag与drop系统的研究明天再说。

这样写的坏处是什么,还有为什么不采取这种方法实现拖拽。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js使用eval解析json实例与注意事项分享
Jan 18 Javascript
JS排序方法(sort,bubble,select,insert)代码汇总
Jan 30 Javascript
jQuery Ajax 异步加载显示等待效果代码分享
Aug 01 Javascript
深入浅析JS是按值传递还是按引用传递(推荐)
Sep 18 Javascript
js实现固定宽高滑动轮播图效果
Jan 13 Javascript
js实现加载页面就自动触发超链接的示例
Aug 31 Javascript
JavaScript解析及序列化JSON的方法实例分析
Jan 04 Javascript
vue实现父子组件之间的通信以及兄弟组件的通信功能示例
Jan 29 Javascript
使用layui日期控件laydate对开始和结束时间进行联动控制的方法
Sep 06 Javascript
微信小程序实现蓝牙打印
Sep 23 Javascript
Vue过渡效果之CSS过渡详解(结合transition,animation,animate.css)
Feb 05 Javascript
解决vue项目中遇到 Cannot find module ‘chalk‘ 报错的问题
Nov 05 Javascript
SelectPage v2.4 发布新增纯下拉列表和关闭分页功能
Sep 07 #Javascript
JS禁止浏览器右键查看元素或按F12审查元素自动关闭页面示例代码
Sep 07 #Javascript
阿里大于短信验证码node koa2的实现代码(最新)
Sep 07 #Javascript
bootstrap-table组合表头的实现方法
Sep 07 #Javascript
react-native-tab-navigator组件的基本使用示例代码
Sep 07 #Javascript
基于Bootstrap table组件实现多层表头的实例代码
Sep 07 #Javascript
详解React native全局变量的使用(跨组件的通信)
Sep 07 #Javascript
You might like
967 个函式
2006/10/09 PHP
php实现jQuery扩展函数
2009/10/30 PHP
通过php添加xml文档内容的方法
2015/01/23 PHP
举例详解PHP脚本的测试方法
2015/08/05 PHP
getElementByIdx_x js自定义getElementById函数
2012/01/24 Javascript
jquery $.trim()方法使用介绍
2014/05/21 Javascript
原生javascript获取元素样式
2014/12/31 Javascript
7个去伪存真的JavaScript面试题
2016/01/07 Javascript
仿Angular Bootstrap TimePicker创建分钟数-秒数的输入控件
2016/07/01 Javascript
jQuery post数据至ashx实例详解
2016/11/18 Javascript
AngularJS打开页面隐藏显示表达式用法示例
2016/12/25 Javascript
javascript九宫格图片随机打乱位置的实现方法
2017/03/15 Javascript
promise处理多个相互依赖的异步请求(实例讲解)
2017/08/03 Javascript
全面了解JavaScript的作用域链
2019/04/03 Javascript
js实现GIF动图分解成多帧图片上传
2019/10/24 Javascript
Vue-router 报错NavigationDuplicated的解决方法
2020/03/31 Javascript
基于javascript处理二进制图片流过程详解
2020/06/08 Javascript
[01:28:56]2014 DOTA2华西杯精英邀请赛 5 24 CIS VS DK
2014/05/26 DOTA
[56:42]完美世界DOTA2联赛循环赛 Matador vs Forest 第二场 11.06
2020/11/06 DOTA
Python 使用SMTP发送邮件的代码小结
2016/09/21 Python
Python实现数据可视化看如何监控你的爬虫状态【推荐】
2018/08/10 Python
python中将zip压缩包转为gz.tar的方法
2018/10/18 Python
python3 enum模块的应用实例详解
2019/08/12 Python
Python爬虫爬取、解析数据操作示例
2020/03/27 Python
django 解决自定义序列化返回处理数据为null的问题
2020/05/20 Python
英国时尚服饰电商:Boohoo
2017/10/12 全球购物
介绍一下SQL注入攻击的种类和防范手段
2012/02/18 面试题
大学生简历中个人的自我评价
2013/10/06 职场文书
初中同学聚会邀请函
2014/02/03 职场文书
风险评估实施方案
2014/03/09 职场文书
2014组织生活会方案
2014/05/19 职场文书
法制宣传标语集锦
2014/06/25 职场文书
投标人法定代表人授权委托书格式
2014/09/28 职场文书
长城的导游词
2015/01/30 职场文书
会计工作岗位职责
2015/02/03 职场文书
MySQL脏读,幻读和不可重复读
2022/05/11 MySQL