2. 程式人生 > 程式設計 >vue實現放大縮小拖拽功能

vue實現放大縮小拖拽功能

阿新 • • 發佈：2021-05-16

本文例項為大家分享了vue實現放大縮小拖拽功能的具體程式碼，供大家參考，具體內容如下

點選放大至全屏 再次點選縮小至原始 這個彈框是基於element dialog的基礎上寫的

vue實現放大縮小拖拽功能

vue實現放大縮小拖拽功能

1.再utils資料夾下面新建一個directives.js (封裝好了 直接拿去用）

impo程式設計客棧rt Vue from 'vue';
import bigPic from '../assets/images/bigChange.png';
// v-dialogDrag: 彈窗拖拽屬性
Vue.directive('dialogDrag',{
  bind(el,binding,vnode,oldVnode) {
    //彈框可拉伸最小寬高
    let minWidth = 400;
 
    let minHeight = 300;
 
    //初始非全屏
 
    let isFullScreen = false;
 
    //當前寬高
 
    let nowWidth = 0;
 
    let nowHight = 0;
 
    //當前頂部高度
 
    let nowMarginTop = 0;
 
    //獲取彈框頭部（這部分可雙擊全屏）
 
    const dialogHeaderEl = el.querySelector('.el-dialog__header');
 
    //彈窗
 
    const dragDom = el.querySelector('.el-dialog');
 
    // 全屏按鈕
 
    dialogHeaderEl.insertAdjacentHTML('beforeEnd','<div class="bigbtn"><div class="changeBig"></div><div class="changeSmall"></div></div>');
 
    const bigBtn = el.querySelector('.bigbtn');
 
    const changeBig = el.querySelector('.changeBig');
 
    const changeSmall = el.querySelector('.changeSmall');
    //給彈窗加上overflow auto；不然縮小www.cppcns.com
 
時框內的標籤可能超出dialog；
 
    dragDom.style.overflow = "auto";
 
    //清除選擇頭部文字效果
 
    //dialogHeaderEl.onselectstart = new Function("return false");
 
    //頭部加上可拖動cursor
 
    dialogHeaderEl.style.cursor = 'move';
 
    // 獲取原有屬性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素,null);
 
    const sty = dragDom.currentStyle || window.getComputedStyle(dragDom,null);
 
    let moveDown = (e) => {
      // 滑鼠按下，計算當前元素距離可視區的距離
 
      const disX = e.clientX - dialogHeaderEl.offsetLeft;
 
      const disY = e.clientY - dialogHeaderEl.offsetTop;
 
      // 獲取到的值帶px 正則匹配替換
 
      let styL,styT;
 
      // 注意在ie中 第一次獲取到的值為元件自帶50% 移動之後賦值為px
 
      if (sty.left.includes('%')) {
 
        styL = +document.body.clientWidth * (+sty.left.replace(/\%/g,'') / 100);
 
        styT = +document.body.clientHeight * (+sty.top.replace(/\%/g,'') / 100);
 
      } else {
 
        styL = +sty.left.replace(/\px/g,'');
 
        styT = +sty.top.replace(/\px/g,'');
 
      };
 
      document.onmousemove = function (e) {
        // 通過事件委託，計算移動的距離
 
        const l = e.clientX - disX;
 
        const t = e.clientY - disY;
 
        // 
 
程式設計客棧移動當前元素
 
        dragDom.style.left = `${l + styL}px`;
 
        dragDom.style.top = `${t + styT}px`;
 
        //將此時的位置傳出去
 
        //binding.value({x:e.pageX,y:e.pageY})
 
      };
 
      document.onmouseup = function (e) {
 
        document.onmousemove = null;
 
        document.onmouseup = null;
 
      };
 
    }
 
    dialogHeaderEl.onmousedown = moveDown;
 
    //雙擊頭部全屏效果
 
    bigBtn.onclick = (e) => {
      if (isFullScreen == false) {
 
        changeBig.style.display = 'none';
 
        changeSmall.style.display = 'block';
 
        nowHight = dragDom.clientHeight;
 
        nowWidth = dragDom.clientWidth;
 
        nowMarginTop = dragDom.style.marginTop;
 
        dragDom.style.left = 0;
 
        dragDom.style.top = 0;
 
        dragDom.style.height = "100VH";
 
        dragDom.style.width = "100VW";
 
        dragDom.style.marginTop = 0;
 
        isFullScreen = true;
 
        dialogHeaderEl.style.cursor = 'initial';
 
        dialogHeaderEl.onmousedown = null;
 
      } else {
 
        changeBig.style.display = 'block';
 
        changeSmall.style.display = 'none';
 
        dragDom.style.height = "auto";
 
        dragDom.style.width = nowWidth + 'px';
 
        dragDom.style.marginTop = nowMarginTop;
 
        isFullScreen = false;
 
        dialogHeaderEl.style.cursor = 'move';
 
        dialogHeaderEl.onmousedown = moveDown;
 
      }
 
    }
 
    dra
 
程式設計客棧gDom.onmousemove = function (e) {
      // console.log(dialogHeaderEl,dragDom.querySelector('.el-dialog__body'),123);
      let moveE = e;
 
      if (e.clientX > dragDom.offsetLeft + dragDom.clientWidth - 10 || dragDom.offsetLeft + 10 > e.clientX) {
 
        dragDom.style.cursor = 'w-resize';
 
      } else if (el.scrollTop + e.clientY > dragDom.offsetTop + dragDom.clientHeight - 10) {
 
        dragDom.style.cursor = 's-resize';
 
      } else {
 
        dragDom.style.cursor = 'default';
 
        dragDom.onmousedown = null;
 
      }
 
      dragDom.onmousedown = (e) => {
 
        const clientX = e.clientX;
 
        const clientY = e.clientY;
 
        let elW = dragDom.clientWidth;
 
        let elH = dragDom.clientHeight;
 
        let EloffsetLeft = dragDom.offsetLeft;
 
        let EloffsetTop = dragDom.offsetTophttp://www.cppcns.com;
 
        dragDom.style.userSelect = 'none';
 
        let ELscrollTop = el.scrollTop;
 
        //判斷點選的位置是不是為頭部
 
        if (clientX > EloffsetLeft && clientX < EloffsetLeft + elW && clientY > EloffsetTop && clientY < EloffsetTop + 100) {
 
          //如果是頭部在此就不做任何動作，以上有繫結dialogHeaderEl.onmousedown = moveDown;
 
        } else {
 
          document.onmousemove = function (e) {
 
            e.preventDefault(); // 移動時禁用預設事件
 
            //左側滑鼠拖拽位置
 
            if (clientX > EloffsetLeft && clientX < EloffsetLeft + 10) {
 
              //往左拖拽
 
              if (clientX > e.clientX) {
 
                dragDom.style.width = elW + (clientX - e.clientX) * 2 + 'px';
 
              }
 
              //往右拖拽
 
              if (clientX < e.clientX) {
 
                if (dragDom.clientWidth < minWidth) {
 
                } else {
 
                  dragDom.style.width = elW - (e.clientX - clientX) * 2 + 'px';
 
                }
 
              }
 
            }
 
            //右側滑鼠拖拽位置
 
            if (clientX > EloffsetLeft + elW - 10 && clientX < EloffsetLeft + elW) {
 
              //往左拖拽
 
              if (clientX > e.clientX) {
 
                if (dragDom.clientWidth < minWidth) {
 
                } else {
 
                  dragDom.style.width = elW - (clientX - e.clientX) * 2 + 'px';
 
                }
 
              }
 
              //往右拖拽
 
              if (clientX < e.clientX) {
 
                dragDom.style.width = elW + (e.clientX - clientX) * 2 + 'px';
 
              }
 
            }
 
            //底部滑鼠拖拽位置
 
            if (ELscrollTop + clientY > EloffsetTop + elH - 20 && ELscrollTop + clientY < EloffsetTop + elH) {
 
              //往上拖拽
 
              if (clientY > e.clientY) {
 
                if (dragDom.clientHeight < minHeight) {
 
                } else {
 
                  dragDom.style.height = elH - (clientY - e.clientY) * 2 + 'px';
 
                }
 
              }
 
              //往下拖拽
 
              if (clientY < e.clientY) {
 
                dragDom.style.height = elH + (e.clientY - clientY) * 2 + 'px';
 
              }
 
            }
 
          };
 
          //拉伸結束
 
          document.onmouseup = function (e) {
 
            document.onmousemove = null;
 
            document.onmouseup = null;
 
          };
 
        }
 
      }
 
    }
  }
})

2.再main.js引入

import './utils/directives.js';

3.頁面直接以自定義屬性名進行使用 ( v-dialogDrag )

<el-dialog
     v-dialogDrag
      title="使用者資訊"
      :visible.sync="dialogVisible"
      width="50%"
      :close-on-click-modal="false"
      :before-close="handleClose">
      <div>
        <el-table :data="phoneData" style="width: 100%">
          <el-table-column prop="fullName" label="姓名" width="100"></el-table-column>
          <el-table-column prop="sex" label="性別" width="80"></el-table-column>
          <el-table-column prop="idCard" label="身份證號" min-width="120" show-overflow-tooltip></el-table-column>
          <el-table-column prop="mobile" label="聯絡電話" width="150"></el-table-column>
          <el-table-column prop="censusAreaName" label="戶籍區劃" min-width="120" show-overflow-tooltip></el-table-column>
          <el-table-column prop="censusAddr" label="戶籍地址" min-width="100" show-overflow-tooltip></el-table-column>
          <el-table-column label="操作" width="120" fixed="right" align="center">
            <template slot-scope="{row}">
              <span @click="chooseInfor(row.id)" class="table-btn">選擇</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
</el-dialog>

4.css也一併奉上 （注意檢視directives.js裡面的標籤元素）

.changeBig {
    width: 20px;
    height: 20px;
    background: url("../assets/images/bigChange.png") no-repeat center;
    background-size: 100% 100%;
    cursor: pointer;
    position: absolute;
    top: 14px;
    right: 60px;
}
.changeSmall {
    width: 20px;
    height: 20px;
    background: url("../assets/images/smallChange.png") no-repeat center;
    background-size: 100% 100%;
    cursor: pointer;
    position: absolute;
    top: 14px;
    right: 60px;
    display: none;
}

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。

相關推薦

vue實現放大縮小拖拽功能

本文例項為大家分享了vue實現放大縮小拖拽功能的具體程式碼，供大家參考，具體內容如下

純 JS 實現放大縮小拖拽採坑之旅

前言 最近團隊需要做一個智慧客服懸浮窗功能，需要支援拖動、放大縮小等功能，因為這個是全域性外掛，為了相容性考慮全部使用原生js實現，不引用任何第三方庫或者外掛。開發過程中遇到的一些問題及解決方法，在這裡和

vue實現滑塊拖拽校驗功能的全過程

效果圖 定義骨架，寫html和 html部分 <template> <div class=\"drag-wrapper\" ref=\"dragDiv\">

vue 後管專案實現跨目錄拖拽功能

我使用的是vuedraggable外掛。參考文件：https://www.itxst.com/vue-draggable/fueijmfy.html 安裝：npm i -S vuedraggable

Vue實現移動端拖拽交換位置

本文例項為大家分享了Vue實現移動端拖拽交換位置的具體程式碼，供大家參考，具體內容如下

Vue實現簡單的拖拽效果

本文例項為大家分享了Vue實現簡單拖拽效果的具體程式碼，供大家參考，具體內容如下

Vue實現開關按鈕拖拽效果

本文例項為大家分享了Vue實現開關按鈕拖拽效果的具體程式碼，供大家參考，具體內容如下

vue 實現迴圈div拖拽變換位置

技術標籤：vuejs 效果圖(兩張圖看效果吧) 首先安裝外掛 vue-class-component 和 vue-property-decorator

Vue 實現視覺化拖拽頁面編輯器

線上地址 (用梯子會更快些) 視覺化頁面編輯器，聽起來可望不可即是吧，先來張動圖觀摩觀摩一番！

vue實現移動端觸屏拖拽功能

vue實現移動端可拖拽浮球，供大家參考，具體內容如下 1 首先建立一個div <div class=\"floatball\" id=\"floatball\"

Draggable為基於Sortable.js的vue元件，用以實現拖拽功能。

特性 支援觸控裝置 支援拖拽和選擇文字 支援智慧滾動 支援不同列表之間的拖拽

Vue.Draggable學習總結 （ Draggable為基於Sortable.js的vue元件，用以實現拖拽功能 ）

1.在專案中總會遇見一些需要排序的資料 ， 我們可以通過vue.draggable 進行拖動排序 。

Vue實現彈窗拖動放大縮小

Vue實現彈窗拖動放大縮小 寫專案的時候，看到了別人專案裡彈窗都可以拖動，可以放大縮小，很是眼饞（主要是互動很人性化），近幾天抽出時間實現了下，特來給分享下,因為官方的Element-Ui沒有自帶的拖動效果，所以，我

vue 使用 sortable 實現 el-table 拖拽排序功能

npm 下載： npm install sortablejs --save 引入： import Sortable from \"sortablejs\"; 程式碼： <template>

vue中如何簡單使用vue.draggable元件實現拖拽功能

技術標籤：技術分享vuejs前端 Vue.Draggable是一款基於Sortable.js實現的vue拖拽外掛。支援移動裝置、拖拽和選擇文字、智慧滾動，可以在不同列表間拖拽、不依賴jQuery為基礎、vue 2過渡動畫相容、支援撤銷操作，

vue實現圖片拖拽功能

本文例項為大家分享了實現圖片拖拽功能的具體程式碼，供大家參考，具體內容如下

利用vue元件實現圖片的拖拽和縮放功能

目錄前言如圖所示：方法如下：總結前言 實現一個元件其實很簡單但是要寫出一個好的可複用的元件那就需要多學習和鑽研一下，一個好的元件必須有其必不可少的有優點：一是能提高應用開發效率、測試性、複用性等；二是元

JavaScript實現拖拽功能

本文例項為大家分享了JavaScript實現拖拽功能的具體程式碼，供大家參考，具體內容如下

JS面向物件程式設計實現的拖拽功能案例詳解

本文例項講述了JS面向物件程式設計實現的拖拽功能。分享給大家供大家參考，具體如下：

Vue使用vue-draggable 外掛在不同列表之間拖拽功能

今天分享一個vue專案中在不同列表拖拽設定選項的功能，這個功能也是在做專案中遇到的，先說下這個功能的要點(參考下圖)，有2個列表，左側列表展示已選，右側列表展示未選，通過拖拽進行設定，已選的選項不能超過4個，