真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

成都創(chuàng)新互聯(lián)網(wǎng)站制作重慶分公司

基于vue-draggable如何實現(xiàn)三級拖動排序效果

這篇文章給大家分享的是有關(guān)基于vue-draggable如何實現(xiàn)三級拖動排序效果的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

10年積累的網(wǎng)站建設(shè)、成都網(wǎng)站制作經(jīng)驗，可以快速應(yīng)對客戶對網(wǎng)站的新想法和需求。提供各種問題對應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認識你，你也不認識我。但先網(wǎng)站制作后付款的網(wǎng)站建設(shè)流程，更有富寧免費網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

vue-draggable

之前項目中需要用到拖動排序，就去網(wǎng)上找資料，本來最開始是想用jquery-ui里的拖動的，后面發(fā)現(xiàn)不符合我的預期也不知道能不能跟vue.js兼容，后面我試過了，單個的可以但是層級太多就不一樣了。

廢話少說直接上代碼

基于vue-draggable如何實現(xiàn)三級拖動排序效果

基于vue-draggable如何實現(xiàn)三級拖動排序效果

先看數(shù)據(jù)結(jié)構(gòu)，和頁面的呈現(xiàn)，等會再來上代碼。

這就是三層結(jié)構(gòu)渲染出來的圖。那個海錨一樣的東西是可以點擊的，點擊后會出現(xiàn)當前類型所帶的產(chǎn)品。等會會說的

我們現(xiàn)在來看下我實現(xiàn)后的拖動效果，如下

基于vue-draggable如何實現(xiàn)三級拖動排序效果

所有父類型里面的產(chǎn)品拖動如下

基于vue-draggable如何實現(xiàn)三級拖動排序效果

控制臺的打印

基于vue-draggable如何實現(xiàn)三級拖動排序效果

好了，放了那么多圖，數(shù)據(jù)結(jié)構(gòu)也發(fā)了。接下來我們來上代碼和思路。

先上html的代碼，這里我的頁面是jsp，但是不影響html兼容，項目中途接手，很古老的jsp我也沒辦法

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>




 
 排序
 
  
  
 
 
                           {{element.name}}     0"     @click="showLeve2(index)">     0">                           {{e.name}}                               
 0&&showOne">   --->>>{{one.name}}                        {{element.name}}     0"     @click="showLeve3(index)">     0">                           {{e.name}}                                 0&&showTwo">   --->>>{{two.name}}                        {{element.name}}     0">                           {{e.name}}                                     保存    重置  

接下來是js。

Vue.component('vue-draggable', vuedraggable)
var vm = new Vue({
 el: '#vueSort',
 data: {
 isActive: true,
 queryObject: {},
 listProductType: [],
 showSon: false,
 index: 0,
 one: {productTypes: []},
 two: {productTypes: []},
 showOne: false,
 showTwo: false
 },
 methods: {
 init: function () {
  var _this = this;
  $.ajax({
  url: '../../mt/combinationSort/sortingData',
  data: null,
  type: 'POST',
  contentType: "application/json",
  dataType: 'json',
  success: function (data) {
   if (data.success = true) {
   if (data.dataObject.length == 0) {
    Util.alert('通知', '異常數(shù)據(jù)', 'info');
    return;
   }
   _this.listProductType = data.dataObject;
   }
   console.log(data)
  }
  })
 },
 reset: function () {
  var _this = this;
  _this.listProductType = _this.listProductType.sort((one, two) => {
  return one.displaySeq - two.displaySeq;
 })
  ;
  for (var i in _this.listProductType) {
  //排序產(chǎn)品類型
  _this.listProductType[i].productTypes = _this.listProductType[i].productTypes.sort((one, two) => {
   return one.displaySeq - two.displaySeq;
  })
  ;
  //排序產(chǎn)品
  _this.listProductType[i].productList = _this.listProductType[i].productList.sort((one, two) => {
   return one.displaySeq - two.displaySeq;
  })
  ;
  for (var a in _this.listProductType[i].productTypes) {
   _this.listProductType[i].productTypes[a].productTypes = _this.listProductType[i].productTypes[a].productTypes.sort((one, two) => {
   return one.displaySeq - two.displaySeq;
  })
   ;
   _this.listProductType[i].productTypes[a].productList = _this.listProductType[i].productTypes[a].productList.sort((one, two) => {
   return one.displaySeq - two.displaySeq;
  })
   ;
   for (var c in _this.listProductType[i].productTypes[a].productTypes) {
   _this.listProductType[i].productTypes[a].productTypes[c].productList = _this.listProductType[i].productTypes[a].productTypes[c].productList.sort((one, two) => {
    return one.displaySeq - two.displaySeq;
   })
   ;
   }
  }
  }
 },
 datadragEnd: function (evt) {
  console.log('拖動前的索引：' + evt.oldIndex);
  console.log('拖動后的索引：' + evt.newIndex);
  var obj = evt.item;
  obj.style.backgroundColor = '#fff';
 },
 submenu: function () {
  var _this = this;
  if (_this.isActive) _this.isActive = false;
  else _this.isActive = true;
  if (_this.showSon) _this.showSon = false;
  else _this.showSon = true;
 },
 datadragEnds: function (evt) {
  console.log('拖動前的索引：' + evt.oldIndex);
  console.log('拖動后的索引：' + evt.newIndex);
  var obj = evt.item;
  obj.style.backgroundColor = '#fff';
 },
 forId: function (index) {
  return "uuid_" + index
 },
 
 showLeve2: function (index) {
  var _this = this;
  _this.index = index;
  // if (_this.one.productTypes.length > 0) _this.one.productTypes = [];
  // else
  _this.one = _this.listProductType[index];
  console.log(_this.one)
  if (_this.showOne) {
  _this.showOne = false;
  _this.showTwo = false;
  }
  else _this.showOne = true;
 },
 showLeve3: function (index) {
  var _this = this;
  // if (_this.two.productTypes.length > 0) _this.two.productTypes = [];
  // else
  _this.two = _this.listProductType[_this.index].productTypes[index];
  console.log(_this.two.productTypes)
  if (_this.showTwo) _this.showTwo = false;
  else _this.showTwo = true;
 },
 getdata: function (event) {
  console.log("下來了");
  var obj = event.dragged;
  obj.style.backgroundColor = '#11cc17';
 },
 save: function () {
  var _this = this;
  Util.confirm('提示', '您確定要保存排序嗎？', function (isOk) {
  if (isOk) {
   console.log(_this.listProductType);
   $.ajax({
   type: "post",
   url: "../../mt/combinationSort/saveSortingData",
   data: {list: JSON.stringify(_this.listProductType)},
   success: function (json) {
    console.log(json);
   }
   });
   Util.alert("提示", '保存成功', 'info');
  }
  }, 'info');
 
 }
 },
 created: function () {
 var _this = this;
 _this.init();
 // _this.heartbeat();
 }
});

最重要的是這幾行代碼

基于vue-draggable如何實現(xiàn)三級拖動排序效果

然后是使用vue把vuedraggable模塊引入，上面圖最下面的js是我剛剛發(fā)過的代碼文件。

Vue.component('vue-draggable', vuedraggable)

這句話顯得尤為重要。注冊成vue的組件，雖然它本身就是vue的一個組件了。

基于vue-draggable如何實現(xiàn)三級拖動排序效果

當然最后我們會進行排序后的順序的保存。這里就不得不說vue的雙向綁定了，你對象只要在頁面改變位置，在內(nèi)存地址里的位置順序也會被改變的，所有我們只需要再次將整個對象回傳就行。后臺去解析保存，當然這種方式我覺得會很繁瑣。比如：我貼個獲取數(shù)據(jù)的代碼

/**
 * 獲取排序數(shù)據(jù)
 * * @param merchantId
 * @return
 */
 public List treeSorting(Long merchantId) {
 //獲取所有的連接項
 List typeRefList = productTypeRefService.findAll();
 //獲取所有的產(chǎn)品
 Map productList = productService.sortFindProduct(merchantId).stream().collect(
  Collectors.toMap(w -> w.getId(), w -> w));
 //最上級父級
 List parentList = byParentProduct(merchantId, 0);
 //平均未分類
 List typeList = byParentProduct(merchantId, 1);
 //
 //獲取產(chǎn)品類型和產(chǎn)品關(guān)聯(lián)
 Map> parentIdChildrenMap = typeRefList.stream().filter(productTypeRef -> productTypeRef.getProductTypeId() != null).collect(Collectors.groupingBy(ProductTypeRef::getProductTypeId));
 parentList.forEach(p -> {
  //篩選第二級菜單
  List districtsOne = typeList.stream().filter(sortProductTypeVo -> sortProductTypeVo.getParentTypeId().equals(p.getId())).collect(Collectors.toList());
  districtsOne.forEach(a -> {
  //第三層菜單
  List districtsTwo = typeList.stream().filter(productType -> productType.getParentTypeId().equals(a.getId())).collect(Collectors.toList());
  districtsTwo.stream().forEach(d -> {
   //獲取產(chǎn)品和產(chǎn)品類型之間的連接關(guān)系
   List l = parentIdChildrenMap.getOrDefault(d.getId(), new ArrayList<>());
   //排序產(chǎn)品關(guān)聯(lián)就相當于產(chǎn)品排序
   l.sort((q, b) -> Integer.compare(q.getDisplaySeq(), b.getDisplaySeq()));
   //根據(jù)排序產(chǎn)品關(guān)聯(lián)去找到產(chǎn)品
   d.setProductList(l.stream().map(e -> {
   ProductVo products = productList.get(e.getProductId());
   if (null != products) products.setDisplaySeq(e.getDisplaySeq());
   return products;
   }).collect(Collectors.toList()).stream().filter(s -> s != null).collect(Collectors.toList()));//數(shù)組中過濾空的產(chǎn)品
//   d.setProductTypeRefs(parentIdChildrenMap.getOrDefault(d.getId(), new ArrayList<>()));
  });
  List l = parentIdChildrenMap.getOrDefault(a.getId(), new ArrayList<>());
  l.sort((q, b) -> Integer.compare(q.getDisplaySeq(), b.getDisplaySeq()));
  a.setProductList(l.stream().map(c -> {
   ProductVo products = productList.get(c.getProductId());
   if (null != products) products.setDisplaySeq(c.getDisplaySeq());
   return products;
  }).collect(Collectors.toList()).stream().filter(s -> s != null).collect(Collectors.toList()));
  districtsTwo.sort((q, b) -> Integer.compare(q.getDisplaySeq(), b.getDisplaySeq()));
  a.setProductTypes(districtsTwo);
//  a.setProductTypeRefs(parentIdChildrenMap.getOrDefault(a.getId(), new ArrayList<>()));
  });
  List l = parentIdChildrenMap.getOrDefault(p.getId(), new ArrayList<>());
  l.sort((q, b) -> Integer.compare(q.getDisplaySeq(), b.getDisplaySeq()));
  p.setProductList(l.stream().map(a -> {
  ProductVo products = productList.get(a.getProductId());
  if (null != products) products.setDisplaySeq(a.getDisplaySeq());
  return products;
  }).collect(Collectors.toList()).stream().filter(s -> s != null).collect(Collectors.toList()));
//  p.setProductTypeRefs(parentIdChildrenMap.getOrDefault(p.getId(), new ArrayList<>()));
  districtsOne.sort((q, b) -> Integer.compare(q.getDisplaySeq(), b.getDisplaySeq()));
  p.setProductTypes(districtsOne);
 });
 parentList.sort((q, b) -> Integer.compare(q.getDisplaySeq(), b.getDisplaySeq()));
 return parentList;
 }

jdk8語法，可能還有需要改進的地方。反正目前來說，功能是實現(xiàn)了。

其實本來想代碼一點點講解的，奈何實在是有事。

關(guān)于怎么讓3級菜單組件相互拖動，你只需要在父級相互拖動這里就能找到答案，

基于vue-draggable如何實現(xiàn)三級拖動排序效果

加上這個屬性就行，理論上。我沒試過，因為我懶，hhhh

vue是什么

Vue是一套用于構(gòu)建用戶界面的漸進式JavaScript框架，Vue與其它大型框架的區(qū)別是，使用Vue可以自底向上逐層應(yīng)用，其核心庫只關(guān)注視圖層，方便與第三方庫和項目整合，且使用Vue可以采用單文件組件和Vue生態(tài)系統(tǒng)支持的庫開發(fā)復雜的單頁應(yīng)用。

感謝各位的閱讀！關(guān)于“基于vue-draggable如何實現(xiàn)三級拖動排序效果”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！


網(wǎng)站名稱：基于vue-draggable如何實現(xiàn)三級拖動排序效果
URL網(wǎng)址：http://weahome.cn/article/jhiogo.html

在線咨詢

微信咨詢

電話咨詢

028-86922220（工作日）

18980820575（7×24）

提交需求

返回頂部