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