关于jquery: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工程师😆