拖拽神器！Vue.js与JQuery UI对比，谁更顺手？

2024-03-28 技术资讯推广

之前项目中需要用到拖动排序，就去网上找资料，本来最开始是想用jquery-ui里的拖动的，后面发现不符合我的预期也不知道能不能跟vue.js兼容，后面我试过了，单个的可以但是层级太多就不一样了。我们现在来看下我实现后的拖动效果，如下

哈喽宝贝们！给你透露个趣事儿~ 你们造么，我们项目里有那个叫做拖动顺序的东东。这事儿把我弄得头疼了好几天。一开始我想着用JQuery UI的拖拽功能，但感觉有点差强人意。最怕的是跟Vue.js搞冲突。折腾半天，终于实现了拖拽功能，可遇到复杂的层次结构就太费劲了。

快点我们来看看这程序是咋出炉的。你瞅见那像锚一样的东东没? 点它一下就知道你在哪个类别啦!回头我细说哈。

搞定！这个鼠标拖动太牛了，儿子都能用得开心。瞧那控制台，多么直白！

咱们先聊聊编程，首先来谈谈HTML这个东西。你懂的，虽然有些网站可能是用JSP做的，但真正重要的还是纯正的HTML！其实，这个活儿我可是后面接手的，因为要使用那个老旧的JSP技术，没办法只好这样咯。






 [v-cloak] {
 display: none;
 }
 .flip-list-move {
 transition: transform 0.5s;
 }
 .handle {
 float: right;
 padding-top: 2px;
 padding-bottom: 8px;
 }
 .no-move {
 transition: transform 0s;
 }
 .ghost {
 opacity: 0.5;
 background: #c8ebfb;
 }
 .list-group {
 min-height: 20px;
 }
 .list-group-item {
 cursor: move;
 }
 .list-group-item i {
 cursor: pointer;
 }

<div id="vueSort" class="box box-darkness">
 
 排序
 
  
 
 
 
 
  
  
   
   
    0"
     aria-hidden="true"
     :class="{'fa fa-anchor':isActive,'glyphicon glyphicon-pushpin':!isActive}"
     @click="submenu">
    {{element.name}}
    0"
    @click="showLeve2(index)">
    0">
    
     
     
   

     {{e.name}}
   
   
  
  
  
  
  
  
  
 
 0&&showOne">
  --->>>{{one.name}}
  
  
   
   
    0"
     aria-hidden="true"
     :class="{'fa fa-anchor':isActive,'glyphicon glyphicon-pushpin':!isActive}"
     @click="submenu">
    {{element.name}}
    0"
    @click="showLeve3(index)">
    0">
    
     
     
   

     {{e.name}}
   
   
  
  
  
  
  
  
  
 
 0&&showTwo">
  --->>>{{two.name}}
  
  
   
   
    0"
     aria-hidden="true"
     :class="{'fa fa-anchor':isActive,'glyphicon glyphicon-pushpin':!isActive}"
     @click="submenu">
    {{element.name}}
    0">
    
     
     
   

     {{e.name}}

拖拽神器！Vue.js与JQuery UI对比，谁更顺手？

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('通知', '异常数据', '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) {
  //排序产品类型
  _this.listProductType[i].productTypes = _this.listProductType[i].productTypes.sort((one, two) => {
   return one.displaySeq - two.displaySeq;
  })
  ;
  //排序产品
  _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();
 }
});

说到JavaScript, 最重要的是那些关键的代码片段哟~别忘了在vue里面用上那个可以拖拽的功能哦!图下那套JS文件我已经发给你。别忘了先搞好vue组件的注册，这是vue的底子。

记住，别忘了提前保存！下面咱们聊聊Vue的超级利器”双重绑定”.无论你跑到哪里，里边的内容都跟着你跑.直接把所有东西放里边儿不就搞定！不过如果你遇到后台数据保存问题,那我就教教你如何从数据库取数吧(顺便告诉你我们用的可是高大上的JDK 8呀)。

原本是要教你怎么编程序的，但突然来事儿了，得赶紧解决。搞定父子间拖曳的问题后，三级菜单就能随便拖了。多加一点儿简单的设置就行。那个，我还没实际操作过，稍微偷会儿懒哈哈～嘻嘻嘻。

来咯，我们探讨下怎样用vue-draggable搞定三级移动顺序这回事儿，有什么不明白的别客气，随时提问，我好及时回答~感谢大家一直以来对我们网站的支持，热闹日子马上就要来了！那么接下来，我们聊聊在项目中如何运用拖动排序功能这个话题，好好学好好练，相信大家都会熟能生巧的。如果觉得这篇文章对你有所帮助，那就赶紧点赞分享给你的小伙伴们！期待与你们共同进步！

/**
 * 获取排序数据
 * * @param merchantId
 * @return
 */
 public List treeSorting(Long merchantId) {
 //获取所有的连接项
 List typeRefList = productTypeRefService.findAll();
 //获取所有的产品
 Map productList = productService.sortFindProduct(merchantId).stream().collect(
  Collectors.toMap(w -> w.getId(), w -> w));
 //最上级父级
 List parentList = byParentProduct(merchantId, 0);
 //平均未分类
 List typeList = byParentProduct(merchantId, 1);
 //
 //获取产品类型和产品关联
 Map<Long, List> 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 -> {
   //获取产品和产品类型之间的连接关系
   List l = parentIdChildrenMap.getOrDefault(d.getId(), new ArrayList());
   //排序产品关联就相当于产品排序
   l.sort((q, b) -> Integer.compare(q.getDisplaySeq(), b.getDisplaySeq()));
   //根据排序产品关联去找到产品
   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()));//数组中过滤空的产品
//   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;
 }

原文链接：https://www.icz.com/technicalinformation/web/2024/03/11738.html，转载请注明出处~~~

赏 0

vue

请先

拖拽神器！Vue.js与JQuery UI对比，谁更顺手？

排序

--->>>{{one.name}}

--->>>{{two.name}}

评论0

在线客服

每日签到

夜间模式

返回顶部

拖拽神器！Vue.js与JQuery UI对比，谁更顺手？

排序

--->>>{{one.name}}

--->>>{{two.name}}

猜你喜欢

评论0

在线客服

每日签到

夜间模式

返回顶部