实现div拖拽改变元素大小

实现一个左右拖拽可以控制元素的宽度的需求，其实这个实现起来非常的简单

效果如下图：

步骤： 1、首先先写一个div元素

2、然后获取这个div元素并给元素定义鼠标down事件，当触发事件的时候给元素绑定鼠标移动事件（获取元素也可以使用ref，因为我是在vue项目中实现的）

handleDown (edown) {

      var tuozhuaiNode = document.getElementById('tuozhuai')

      var xNum = edown.clientX - tuozhuaiNode.offsetWidth

      tuozhuaiNode.onmousemove = function (eMove) {

        tuozhuaiNode.style.width = eMove.clientX - xNum + 'px'

      }

    }

3、当松开鼠标的时候要给元素接触移动事件

注意： 在这里松开鼠标事件我是绑定在最外层元素上了，利用冒泡来触发这个事件，防止当你移出目标元素的时候没有触发解绑事件。

handleUp () {

      var tuozhuaiNode = document.getElementById('tuozhuai')

      tuozhuaiNode.onmousemove = null

    }

最后贴上完整代码：