// 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把vuedraggable模块引入，上面图最下面的js是我刚刚发过的代码文件。
Vue.component('vue-draggable', vuedraggable)这句话显得尤为重要。注册成vue的组件，虽然它本身就是vue的一个组件了。
当然最后我们会进行排序后的顺序的保存。这里就不得不说vue的双向绑定了，你对象只要在页面改变位置，在内存地址里的位置顺序也会被改变的，所有我们只需要再次将整个对象回传就行。后台去解析保存，当然这种方式我觉得会很繁琐。比如：我贴个获取数据的代码
/**
* 获取排序数据
* * @param merchantId
* @return
*/
public List<SortProductTypeVo> treeSorting(Long merchantId) {
//获取所有的连接项
List<ProductTypeRef> typeRefList = productTypeRefService.findAll();
//获取所有的产品
Map<Long, ProductVo> productList = productService.sortFindProduct(merchantId).stream().collect(
Collectors.toMap(w -> w.getId(), w -> w));
//最上级父级
List<SortProductTypeVo> parentList = byParentProduct(merchantId, 0);
//平均未分类
List<SortProductTypeVo> typeList = byParentProduct(merchantId, 1);
