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 相关文章推荐
javascript 事件查询综合 推荐收藏
Mar 10 Javascript
学习面向对象之面向对象的术语
Nov 30 Javascript
formStorage 基于jquery的一个插件(存储表单中元素的状态到本地)
Jan 20 Javascript
解决js正则匹配换行问题实现代码
Dec 10 Javascript
一个小例子解释如何来阻止Jquery事件冒泡
Jul 17 Javascript
深入理解JavaScript系列(47):对象创建模式(上篇)
Mar 04 Javascript
实例讲解javascript注册事件处理函数
Jan 09 Javascript
JavaScript mixin实现多继承的方法详解
Mar 30 Javascript
vue.js内部自定义指令与全局自定义指令的实现详解(利用directive)
Jul 11 Javascript
聊聊JS动画库 Velocity.js的使用
Mar 13 Javascript
Vue-cropper 图片裁剪的基本原理及思路讲解
Apr 17 Javascript
一文读懂vue动态属性数据绑定(v-bind指令)
Jul 20 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
PHP If Else(elsefi) 语句
2013/04/07 PHP
php页面防重复提交方法总结
2013/11/25 PHP
PHP图像处理之使用imagecolorallocate()函数设置颜色例子
2014/11/19 PHP
php中get_meta_tags()、CURL与user-agent用法分析
2014/12/16 PHP
详解php语言最牛掰的Laravel框架
2017/11/20 PHP
Laravel 实现关系模型取出需要的字段
2019/10/10 PHP
js获取提交的字符串的字节数
2009/02/09 Javascript
使用js的replace()方法查找字符示例代码
2013/10/28 Javascript
JQuery弹出层示例可自定义
2014/05/19 Javascript
Angular 路由route实例代码
2016/07/12 Javascript
JS实现图片剪裁并预览效果
2016/08/12 Javascript
Angular2.js实现表单验证详解
2017/06/23 Javascript
利用adb shell和node.js实现抖音自动抢红包功能(推荐)
2018/02/22 Javascript
浅谈Webpack下多环境配置的思路
2018/06/27 Javascript
js实现百度淘宝搜索功能
2020/02/17 Javascript
Vue实现图片轮播组件思路及实例解析
2020/05/11 Javascript
Python冲顶大会 快来答题!
2018/01/17 Python
python 连接各类主流数据库的实例代码
2018/01/30 Python
python操作xlsx文件的包openpyxl实例
2018/05/03 Python
详解程序意外中断自动重启shell脚本(以Python为例)
2019/07/26 Python
pandas的排序和排名的具体使用
2019/07/31 Python
Python编写带选项的命令行程序方法
2019/08/13 Python
Python高级特性之闭包与装饰器实例详解
2019/11/19 Python
Pytorch之view及view_as使用详解
2019/12/31 Python
python 读取.nii格式图像实例
2020/07/01 Python
python用tkinter实现一个简易能进行随机点名的界面
2020/09/27 Python
Docker如何部署Python项目的实现详解
2020/10/26 Python
Python常用外部指令执行代码实例
2020/11/05 Python
精灵市场:Pixie Market
2019/06/18 全球购物
普通员工辞职信
2014/01/17 职场文书
幼儿园教师奖惩制度
2014/02/01 职场文书
工程采购员岗位职责
2014/03/09 职场文书
经管应届生求职信范文
2014/05/18 职场文书
小班上学期个人总结
2015/02/12 职场文书
如何将numpy二维数组中的np.nan值替换为指定的值
2021/05/14 Python
Win10 最新稳定版本 21H2开始推送
2022/04/19 数码科技