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工程師😆