腳本之家服務(wù)器常用軟件

快捷導(dǎo)航

軟件下載

android MAC 驅(qū)動(dòng)下載字體下載 DLL

源碼下載

PHP ASP.NET ASP JSP

軟件編程

C# JAVA C 語(yǔ)言 Delphi Android

網(wǎng)絡(luò)編程

PHP ASP.NET ASP JavaScript

在線工具

CSS格式化 JS格式化 Html轉(zhuǎn)化為Js

數(shù)據(jù)庫(kù)

MYSQL MSSQL oracle DB2 MARIADB

CMS

PHPCMS DEDECMS 帝國(guó)CMS WordPress

常用工具

PHP開發(fā)工具 python Photoshop 必備軟件

vuedraggable+element ui實(shí)現(xiàn)頁(yè)面控件拖拽排序效果

更新時(shí)間：2021年09月08日 14:43:43 作者：一粒沙cym

這篇文章主要為大家詳細(xì)介紹了vuedraggable+element ui實(shí)現(xiàn)頁(yè)面控件拖拽排序效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

項(xiàng)目要實(shí)現(xiàn)一些控件的拖拽排序。從而找到了這款vuedraggable控件，供大家參考，具體內(nèi)容如下

如上圖要實(shí)現(xiàn)這些控件的拖拽排序
這是拖拽后

由于公司網(wǎng)絡(luò)的原因，項(xiàng)目沒(méi)有使用npm，都是使用的引入的js

<script type="text/javascript" src="lib/sortable/Sortable.min.js"></script>
<script type="text/javascript" src="lib/vuedraggable/vuedraggable.min.js"></script>

布局代碼

<el-form :inline="true">
     <draggable v-model="filters" dragable="true" :move="getdata" @update="datadragEnd">
      <transition-group>
       <el-col :span="8" v-for="filter in filters" :key="filter.filterKey" style="margin-top: 5px">
        <el-form-item :label="filter.name" >
         <el-input v-model="filter.displayName" placeholder="請(qǐng)輸入設(shè)置屬性" @focus="openFilterDialog(filter)"></el-input>
        </el-form-item>
       </el-col>
      </transition-group>
     </draggable>
     <fitlerdialog v-bind:visable=dialogObjectVisible v-bind:avtivefilter=avtivefilter v-on:on-filter-data-change="onFilterDataChange" v-on:filterdialogcancle="handleDialogObjectcancle" v-on:filterdialogclose="handleDialogObjectClose"></fitlerdialog>
</el-form>

標(biāo)簽draggable放在你要拖拽的組件的最外層。

相關(guān)的處理代碼

getdata(evt) {
 console.log(evt.draggedContext.filterKey)
 //這里evt.draggedContext后續(xù)的內(nèi)容根據(jù)具體的定義變量而定
},
datadragEnd(evt) {
 console.log('拖動(dòng)前的索引 :' + evt.oldIndex)
 console.log('拖動(dòng)后的索引 :' + evt.newIndex);

 let filters = this.filters;
 for(let a=0;a<filters.length;a++){
  filters[a].index = a;
 }
 vm.report.filter = filters;

}

這里是因?yàn)槲覀冃枰獙⒚總€(gè)的順序記錄下來(lái)所以有業(yè)務(wù)代碼。
每次移動(dòng)后，可以通過(guò)v-model獲取所有的控件，他們的順序是當(dāng)前排好的順序，再進(jìn)行index順序記錄。

evt為object，他的內(nèi)容較多。