使用drag与drop实现拖拽,(vue)
2017-05-26 20:26
615 查看
在功能中有一项是需要实现拖拽的。虽然最终项目没有采取这样的拖拽方式,但是,当初也是费了九牛二虎之力完成了这个功能。增加了对函数的更深理解。下面就再重现一下代码。
这是张鑫旭的关于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">
<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系统的研究明天再说。
这样写的坏处是什么,还有为什么不采取这种方法实现拖拽。
这是张鑫旭的关于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">
<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系统的研究明天再说。
这样写的坏处是什么,还有为什么不采取这种方法实现拖拽。
相关文章推荐
- vue使用drag与drop实现拖拽的示例代码
- 分享一个HTML5的drag and drop API实现的图片拖拽分组效果
- Unity3D-UGUI-drag and drop实现拖拽放下功能
- vue2.0使用Sortable.js实现的拖拽功能
- 练习笔记:使用jQuery实现H5拖放(drag 和 drop)功能
- 分享一个HTML5的drag and drop API实现的图片拖拽分组效果
- Atitit。D&D drag&drop拖拽功能c#.net java swing的对比与实现总结
- ASP.NET MVC中使用Dropzone.js实现图片的批量拖拽上传
- VC实现文件管理器拖拽(Drag-and-Drop)
- vue2.0使用Sortable.js实现的拖拽功能示例
- VC实现文件管理器拖拽(Drag-and-Drop)
- 使用ASP.NET Atlas实现拖放(Drag & Drop)效果
- SWT 应用程序 实现的Drag and Drop(DND) 和 GEF 树上元素的拖拽
- 分享一个HTML5的drag and drop API实现的图片拖拽分组效果
- 使用jQuery Draggable和Droppable实现拖拽功能
- 使用ASP.NET Atlas实现拖放(Drag & Drop)效果(下)
- RCP:拖拽功能的实现 Drag and Drop
- Script.aculo.us开发系列(八):使用DropDrag定义拖拽行为
- Android——RecyclerView——使用ItemDragHelper来实现酷炫拖拽效果