使用drag与drop实现拖拽,(vue)
来源:互联网 发布:淘宝手机怎么退货退款 编辑:程序博客网 时间:2024/05/16 18:00
在功能中有一项是需要实现拖拽的。虽然最终项目没有采取这样的拖拽方式,但是,当初也是费了九牛二虎之力完成了这个功能。增加了对函数的更深理解。下面就再重现一下代码。
这是张鑫旭的关于drag与drop函数的介绍,很详细:http://www.zhangxinxu.com/wordpress/2011/02/html5-drag-drop-%E6%8B%96%E6%8B%BD%E4%B8%8E%E6%8B%96%E6%94%BE%E7%AE%80%E4%BB%8B/
下面是代码片段:
<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">
<favPanelv-for="itemin 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>
<divclass="fav-card-create" :data="favPanelAllData">
<favFooter>
<el-buttontype="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)">
<favPanelv-for="itemin 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>
drag(event) {
dom = event.currentTarget
},
drop(event) {
event.preventDefault()
event.target.appendChild(dom)
},
allowDrop(event) {
event.preventDefault()
}
这样写的坏处是什么,还有为什么不采取这种方法实现拖拽。
阅读全文
0 0
- 使用drag与drop实现拖拽,(vue)
- VC实现文件管理器拖拽(Drag-and-Drop)
- VC实现文件管理器拖拽(Drag-and-Drop)
- drag & drop 拖拽与拖放简介
- delphi 控件 TEmbeddedWB 实现超级拖拽 (super Drag&Drop OR inline Drag&Drop)
- 使用ASP.NET Atlas实现拖放(Drag & Drop)效果
- Pyqt4 实现Drag与Drop文件
- EasyUI-treegrid-拖拽的实现(drag and drop)
- Unity3D-UGUI-drag and drop实现拖拽放下功能
- HTML5 drag & drop 拖拽与拖放简介
- HTML5 drag & drop 拖拽与拖放简介
- HTML5元素拖拽drag与拖放drop相关API
- HTML5 drag & drop 拖拽与拖放简介
- HTML5 drag & drop 拖拽与拖放简介
- 在.NET中实现窗体控件的内容拖拽效果(Drag-and-Drop)
- SWT 应用程序 实现的Drag and Drop(DND) 和 GEF 树上元素的拖拽
- #695 – 实现一个简单的拖拽(Implementing Drag-and-Drop Behavior)
- NGUI官网示例11 –Drag ; Drop(图标与物体拖拽放置)(一)
- 路由表条目生成算法
- PHP调用命令无效果以及JAVA安装在普通用户找不到的问题
- Android 通用的ViewHolder和Adapter的打造
- 进程间通信--共享内存
- quartzs每小时执行一次(整点整分)
- 使用drag与drop实现拖拽,(vue)
- 基于MFC的俄罗斯方块小游戏(二)
- C++ Primer Plus, Chapter 13, excercise
- 谈谈龙之谷手游兼容测试的一百个坑
- linux驱动开发之字符设备--自动创建设备节点
- deadline实用功能汇总,财主的粮仓
- android蓝牙电话监听状态
- java编程(Socket) 小结
- hadoop常用命令