欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue使用drag與drop實(shí)現(xiàn)拖拽的示例代碼

 更新時(shí)間：2017年09月07日 16:59:22   作者：CURRY_zhao  
本篇文章主要介紹了vue使用drag與drop實(shí)現(xiàn)拖拽的示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

在功能中有一項(xiàng)是需要實(shí)現(xiàn)拖拽的。雖然最終項(xiàng)目沒有采取這樣的拖拽方式，但是，當(dāng)初也是費(fèi)了九牛二虎之力完成了這個(gè)功能。增加了對函數(shù)的更深理解。下面就再重現(xiàn)一下代碼。

下面是代碼片段：

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

@dragover="allowDrop($event)">

<!-- 面板內(nèi)容 -->

<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系統(tǒng)的研究明天再說。

這樣寫的壞處是什么，還有為什么不采取這種方法實(shí)現(xiàn)拖拽。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評論