参考解决办法： 狗尾草-Vue拖拽组件
遇到问题及解决：
1.unable to preventDefault inside passive event listener due to taeget being treated as passive
原因是为了滚动顺滑，touchmove等事件会被浏览器默认设置为passive：true，需要手动设置成false。参考： Unable to preventDefault inside passive event listener 。文中提到的两种办法，第一种可以，第二种css办法试了无效（可能是设置的位置不对？）
2.拖拽之后，被拖拽的组件大小会改变
我是只需要y轴拖拽，拖拽后空间的高度改变了，拖过的路径都变成了div的高度，再点击之前组件挡住的地方，会出现点击到组件的效果。解决办法是设置组件height属性。
3.设置tansition后拖拽“不动”
网上看的一个例子里边加了transition，可能是想让效果平滑一些，但是却有一种拖不动的感觉。当时以为是拖拽功能实现的有问题，于是删了换了上边链接里的方法，拖拽get√。然后试着加了一下transition，又出现了阻塞。所以这里应该是不适合用transition属性的，而且不用也挺平滑的。
学习总结：
拖拽功能的实现，主要是通过监听鼠标事件，计算各种数值，不断调整组件的位置。因此，需要复习的知识点是鼠标事件，各种尺寸数据及之间的关系。存在的不足是，虽然发现了问题并解决了，但还是不知道问题原理层面的原因。知其然，不知其所以然，希望之后能把这块补充起来。
resize属性的具体用法可见MDN： https://developer.mozilla.org/zh-CN/docs/Web/CSS/resize实现左右拖拽改变大小时：
HTML
此时的div会出现滚动边框，此时可拖拽的区域只有右下角的一小块。
此时需要将这个区域扩大可进行如下设置。
此时内部文字就被隐藏了，在实际使用时可以通过设置兄弟元素展示文字。
HTML:
CSS
效果链接： http://js.jirengu.com/voleracixe/2/edit
