bl双性强迫侵犯h_国产在线观看人成激情视频_蜜芽188_被诱拐的少孩全彩啪啪漫画

javascript中怎么封裝一個拖拽類

這篇文章將為大家詳細講解有關javascript中怎么封裝一個拖拽類，文章內容質量較高，因此小編分享給大家做個參考，希望大家閱讀完這篇文章后對相關知識有一定的了解。

成都創新互聯長期為近1000家客戶提供的網站建設服務，團隊從業經驗10年，關注不同地域、不同群體，并針對不同對象提供差異化的產品和服務；打造開放共贏平臺，與合作伙伴共同營造健康的互聯網生態環境。為港南企業提供專業的網站設計制作、成都做網站，港南網站改版等技術服務。擁有十余年豐富建站經驗和眾多成功案例,為您定制開發。

引入js和對應的css

import Drag from '../../static/dragger.js'
import './assets/css/dragger.css'

之后，實例化

new Drag({
  id: 'box-dragger',
  showAngle: true,
  isScale: false,
  showBorder: false
})
new Drag({
  id: 'box-dragger2',
  canZoom: false,
  canRotate: false
})
new Drag({
  id: 'img-box',
  showAngle: true,
  showPosition: true
  })
new Drag({
  id: 'test'
})

具體實現（封裝細節）

功能細節整理：

  1. 旋轉

  2. 縮放

  3. 平移

技術難點：

  1. 旋轉時要注意盒子每一個點的位置發生了變化

  2. 針對拖拽后的盒子的left和top都有變化，計算其left和top時需將其按照中心軸旋轉擺正，再進行計算

  3. 當且僅有一個盒子是被選中的盒子，點擊哪個選中哪個。（當前頁面多個實例化Drag對象時，如何保證操作互不影響）

  4. 實現的兩種不同方式：

可以選中某元素，直接給該元素內部加上操作的點
有一個pannel，選中某元素時，將這個pannel定位到該元素的位置上

這兩種方式都實現過一次，第一種比較簡單，但是第一種，不好控制選中某個元素才讓操作點展示。

如何封裝：

考慮如何讓用戶快速上手使用，可參考的點：

  1. 用戶需要傳入什么必須的參數

  2. 暴露給用戶什么可設置的參數和方法

實現過程：

可配置參數

字段說明是否必填默認值
id目標元素id是無
container父容器id否body
canRotate是否可以旋轉否true
canZoom是否可以縮放否true
canPull是否可以拉升否true
canMove是否可以平移否true
showAngle展示角度否false
showPosition展示位置否false
isScale是否等比例縮放否true
showBorder是否展示pannel的border否false

屬性

  1. canRotate

  2. canZoom

  3. canPull

  4. canMove

  5. showAngle

  6. isScale

  7. id

  8. container

  9. targetObj

  10. pannelDom 操作divdom

  11. ...

具體看圖：

javascript中怎么封裝一個拖拽類

代碼解說

初始化參數

初始化目標dom對象的位置：記錄其：

  1. left平距左

  2. top

  3. width

  4. height

  5. angle

  6. rightBottomPoint 目標dom對象右下坐標

  7. rightTopPoint 目標dom對象右上坐標

  8. leftTopPoint 目標dom對象左上坐標

  9. leftBottomPoint 目標dom對象左下坐標

  10. leftMiddlePoint 目標dom對象左中坐標

  11. rightMiddlePoint 目標dom對象右中坐標

  12. topMiddlePoint 目標dom對象上中坐標

  13. bottomMiddlePoint 目標dom對象下中坐標

  14. centerPos 目標dom對象中心點坐標

初始化pannel結構

當前的父容器中只有一個pannel結構，每次實例化對象時，會判斷一下如果當前這個父容器里已經存在id為pannel的結構，就將其子節點清空，按照當前實例化對象傳進來的屬性重新渲染pannel子結構。如果沒有id為pannel的結構，就創建。

初始化事件

  1. 給pannelDom和targetObj綁定mousedown事件

  2. 給document綁定mousemove和mouseup事件

initEvent () {
  document.addEventListener('mousemove', e => {
    e.preventDefault && e.preventDefault()
    this.moveChange(e, this.targetObj)
  })
  document.addEventListener('mouseup', e => {
    this.moveLeave(this.targetObj)
  })
  if (this.canMove) {
    // 外層給this.pannelDom添加mousedown事件，是在所有實例化結束后，panneldom被展示在最后一個實例化對象上，鼠標按下它時，觸發moveInit事件
    this.pannelDom.onmousedown = e => {
      e.stopPropagation()
      this.moveInit(9, e, this.targetObj)
    }
    this.targetObj.onmousedown = e => {
      e.stopPropagation()
      this.moveInit(9, e, this.targetObj)
      this.initPannel()
      // 在點擊其他未被選中元素時，pannel定位到該元素上，重寫pannelDom事件，因為此時的this.pannelDom已經根據新的目標元素被重寫
      this.pannelDom.onmousedown= e => {
        this.moveInit(9, e, this.targetObj)
      }
    }
  }
}

dom操作

旋轉操作

鼠標按下時，記錄當前鼠標位置距離box中心位置的y/x的反正切函數A1。 

this.mouseInit = {
  x: Math.floor(e.clientX),
  y: Math.floor(e.clientY)
}
this.preRadian = Math.atan2(this.mouseInit.y - this.centerPos.y, this.mouseInit.x - this.centerPos.x)

鼠標移動時，記錄再次計算鼠標位置距離box中心位置的y/x的反正切函數A2。

this.rotateCurrent = {
  x: Math.floor(e.clientX),
  y: Math.floor(e.clientY)
}
this.curRadian = Math.atan2(this.rotateCurrent.y - this.centerPos.y, this.rotateCurrent.x - this.centerPos.x)

求A2-A1，求出移動的弧度

this.tranformRadian = this.curRadian - this.preRadian

求出最后box的旋轉角度，this.getRotate(target)是js中獲取某dom元素的旋轉角度的方法（粘貼過來的，親測好使）

this.angle = this.getRotate(target) + Math.round(this.tranformRadian * 180 / Math.PI)
this.preRadian = this.curRadian //鼠標移動的每一下都計算這個角度，所以每一下移動前的弧度值都上一次移動后的弧度值

計算旋轉后box每個點的坐標，根據余弦公式，傳入：旋轉前每點坐標，旋轉中心坐標和旋轉角度

let disAngle = this.angle - this.initAngle
this.rightBottomPoint = this.getRotatedPoint(this.initRightBottomPoint, this.centerPos, disAngle)
this.rightTopPoint = this.getRotatedPoint(this.initRightTopPoint, this.centerPos, disAngle)
this.leftTopPoint = this.getRotatedPoint(this.initLeftTopPoint, this.centerPos, disAngle)
this.leftBottomPoint = this.getRotatedPoint(this.initLeftBottomPoint, this.centerPos, disAngle)
this.leftMiddlePoint = this.getRotatedPoint(this.initLeftMiddlePoint, this.centerPos, disAngle)
this.rightMiddlePoint = this.getRotatedPoint(this.initRightMiddlePoint, this.centerPos, disAngle)
this.topMiddlePoint = this.getRotatedPoint(this.initTopMiddlePoint, this.centerPos, disAngle)
this.bottomMiddlePoint = this.getRotatedPoint(this.initBottomMiddlePoint, this.centerPos, disAngle)

沿著一個方向拉升操作。

沿著一個角縮放操作。 這兩個操作，主要參考了一個大佬的拖拽思想實現的 github wiki地址

優化，mousemove事件添加節流函數

function throttle(fn, interval) {
  let canRun = true;
  return function () {
    if (!canRun) return;
    canRun = false;
    setTimeout(() => {
      fn.apply(this, arguments);
      canRun = true;
    }, interval);
  };
}
let that = this
document.addEventListener('mousemove', throttle(function (e) {
  e.preventDefault && e.preventDefault()
  that.moveChange(e, that.targetObj)
}, 10))

關于javascript中怎么封裝一個拖拽類就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。

網頁題目：javascript中怎么封裝一個拖拽類
URL地址：http://vcdvsql.cn/article48/gjddhp.html

成都網站建設公司_創新互聯，為您提供微信小程序、網站設計、網站改版、微信公眾號、建站公司、品牌網站設計

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯

成都網站建設