pc端实现一个简单的抽拉式的动态效果

先上效果图:

ps：为啥要专门上个图呢，主要是不想变成自己讨厌的人🤣。
开始正经讲解一下思路：
主要是用到了，鼠标的移动，鼠标按下和抬起的动作。
遇到的难点，鼠标抬起的动作触发不了，其实是浏览器错把鼠标抬起的动作识别成了复制，有没有发现你up的时候内容区域字变成选中的状态，只需一行css代码：user-select: none;就可以了。
上代码，用的jquery大家自己安装完之后直接copy：

draggable (model) {
      // model你所要触发操作的页面元素
      var location1
      var location2
      console.log('初始值 ', location1, location2)
      $(model).mousedown(function (e) {
        location1 = e.clientY
        console.log('mousedown', location1)
        $(model).css({
          cursor: 'move'
        })
      }).mouseup(function (e) {
        location2 = e.clientY
        console.log('元素内mouseup', location2)
        if (location1 - location2 > 5) {
          $(model).css({height: '306px', cursor: 'auto'})
        } else {
          $(model).css({height: '46px', cursor: 'auto'})
        }
      })
      $(document).mouseup(function (e) {
        if (location1 - location2 > 5) {
          $(model).css({height: '306px', cursor: 'auto'})
        } else {
          $(model).css({height: '46px', cursor: 'auto'})
        }
        console.log('整个页面mouseup', e.clientY)
      })
    }

希望能帮到你，做个快乐的cv工程师😆