自由拖拽DIV實現

最近在做的項目有個效果是要實現div隨意拖拽改變大小，前端框架選擇的是vue.js，UI用的是element，拖拽效果可以很簡單的實現，但是在拖拽過程中發現會對其他元素實現全選效果，因此最后選擇使用元素屬性設置將全選功能關閉，當拖拽取消時全選功能還原；

簡單的消息提示框（效果圖如下，通過選中消息提示框當前行可以進行上下隨意拖拽）：

 

HTML代碼如下，

<template>
    <div class="msgbox">
      <el-card class="box-card" v-if="msgshow" ref="msgSpan">
        <div class="msgbox-top" v-on:mousedown="onmouse">
          <h4>消息提示框</h4>
          <span class="clear" @click="clearMesBox"><span>清空提示框</span><i class="el-icon-circle-cross" @click="msghide"></i></span>
        </div>
        <div class="msgbox-news" ref="msgtop">
        <div v-for="item in items" :key="item" class="text item" @dblclick="goLook(item)" v-bind:style="{'background': item.bgcolor}">
          {{item.value}}
        </div>
        </div>
      </el-card>
    </div>
</template>

拖拽效果的原理其實很簡單，以下是功能實現的JS代碼：

 onmouse:function(){
        var that=this;
        var hei=window.innerHeight;//獲取窗體高度
        var oDiv = this.$refs.msgSpan.$el;//vue通過$refs獲取元素屬性
        var oTop = this.$refs.msgtop;
        that.$refs.msgSpan.$parent.$parent.$parent.$el.style.webkitUserSelect='none';//添加樣式控制拖拽時禁止全選動作
        that.$refs.msgSpan.$parent.$parent.$parent.$el.style.mozUserSelect='none';//添加樣式控制拖拽時禁止全選動作
        oDiv.onmousedown = function(ev){
          var disY = ev.clientY - oDiv.offsetTop;
          var web='-webkit-user-select';
          // console.log(ev.clientY)
          // console.log(oDiv.offsetTop)
          document.onmousemove = function(ev){
            // var t = ev.clientY-disY;
            var t = hei-ev.clientY;
            if(t<=180){ 
              oTop.style.height=170+'px';
            }else{
              oDiv.style.height = t+'px';
              oTop.style.height = t - 30 +'px';
            }
          };
          document.onmouseup = function(){
          document.onmousemove=null;  
          document.onmouseup=null;
          that.$refs.msgSpan.$parent.$parent.$parent.$el.style.webkitUserSelect='';//取消樣式控制拖拽時禁止全選動作
          that.$refs.msgSpan.$parent.$parent.$parent.$el.style.mozUserSelect='';//取消樣式控制拖拽時禁止全選動作
          };
        };
      },

　　CSS樣式代碼：

<style scoped>
  .text {font-size: 14px;}
  .space{height: 30px;width: 100%}
  .item {padding: 0px 10px;color: #000;height: 30px;line-height: 30px;padding-left:15px;}
  .box-card {position: fixed;bottom: 0;height: 200px;right: 20px;left: 250px;border-top:3px solid #ddd;z-index: 100;background: #eee;}
  .msgbox-top{height: 30px;right:38px;background: #d6d6d6;border-bottom: 1px solid #ddd;z-index: 100;;cursor: n-resize;}
  .msgbox-top h4{color:#000;font-size: 14px;line-height: 30px;padding-left: 10px;float: left;}
  .msgbox-top>span{float:right;text-align: right;margin-right: 10px;line-height: 26px;height: 30px;}
  .msgbox-top span>span{font-size: 14px;color: #00adff;cursor: pointer;margin-right: 20px;}
  .msgbox-top span>span:hover{color:#10709e;}
  .box-card span>i{float: right;line-height: 30px;color:#ff7b7b;}
  .box-card span>i:hover{color:red;}
  .msgbox-news{overflow-y: scroll;height: 170px;}
</style>