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