前言:新入职然后发现需要实现一个拖动的demo,一个div包裹着几个宽度,高度不同的div盒子,内部的盒子可以自由拖动,但肯定是有限制的。
限制:
1.内部的div高度宽度都是需要根据后端传来的w,h属性来生成
2.不能随意拖动,宽度不同的盒子不能相互拖动
3.每个盒子需要一个标志,判断该盒子是否能够拖动,就算宽度相同,当限制为true的 时候也不能够拖动
4.只是demo,更多限制,随着需求变更吧
实现
首先install然后在vue文件里注册为组件然后就可以使用了。
这个组件有几个自带的属性方法, end move 其中move是拖动的时候触发,这里就可以写限制代码了
可以看到我限制了宽度不同,以及判断flag
存储功能的实现也很简单
获得数据的时候,这里面下面的代码可以优化
存储数据的时候 注意存储是要在移动后存储,方法就是绑定到插件自己的end方法里面。