成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

如何用鼠標(biāo)移動(dòng)一個(gè)div(React實(shí)現(xiàn))

Shimmer / 1371人閱讀

鼠標(biāo)事件

要用鼠標(biāo)移動(dòng)一個(gè)div首先要獲取的是鼠標(biāo)移動(dòng)的事件。
有三個(gè)事件是需要的

onMouseDown 鼠標(biāo)按下觸發(fā)

onMouseMove 鼠標(biāo)移動(dòng)觸發(fā)

onMouseUp 鼠標(biāo)按鈕抬起觸發(fā)

有了這三個(gè)事件，就可以獲得鼠標(biāo)完整的按下->移動(dòng)->抬起完整的操作

移動(dòng)距離

鼠標(biāo)onMouseMove事件會(huì)得到很多的距離
這些都不是需要的，真正需要的距離是鼠標(biāo)移動(dòng)的距離dx和dy
那么我們選取onMouseMove返回的其中的一組clientX和clientY來處理

在class內(nèi)存儲(chǔ)一對(duì)變量lastX和lastY

第一次鼠標(biāo)移動(dòng)獲取數(shù)據(jù)后將clientX和clientY放入lastX和lastY

第二次鼠標(biāo)移動(dòng)獲取數(shù)據(jù)后，當(dāng)前clientX與lastX的差即是dx，clientY與lastY的差是dy

并且再將clientX和clientY分別放入lastX和lastY，供下次移動(dòng)使用

將dx和dy加上原來的坐標(biāo)進(jìn)行setState操作即可移動(dòng)div

React實(shí)現(xiàn)源碼 
import React from "react"

export default class extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            translateX: 0,
            translateY: 0,
        };
        this.moving = false;
        this.lastX = null;
        this.lastY = null;
        window.onmouseup = e => this.onMouseUp(e);
        window.onmousemove = e => this.onMouseMove(e);
    }

    onMouseDown(e) {
        e.stopPropagation();
        this.moving = true;
    }

    onMouseUp() {
        this.moving = false;
        this.lastX = null;
        this.lastY = null;
    }

    onMouseMove(e) {
        this.moving && this.onMove(e);
    }

    onMove(e) {
        if(this.lastX && this.lastY) {
            let dx = e.clientX - this.lastX;
            let dy = e.clientY - this.lastY;
            this.setState({ translateX: this.state.translateX + dx, translateY: this.state.translateY + dy })
        }
        this.lastX = e.clientX;
        this.lastY = e.clientY;
    }

    render() {
        return (
            
 this.onMouseDown(e)}
                style={{transform: `translateX(${this.state.translateX}px)translateY(${this.state.translateY}px)`}}
            >
                

            

        )
    }
};
注

onMouseDown事件由div提供，onMouseMove和onMouseUp事件由window提供的原因是防止鼠標(biāo)移動(dòng)過快造成事件丟失

this.moving為記錄移動(dòng)開始標(biāo)志

stopPropagation作用為終止事件在傳播過程的捕獲、目標(biāo)處理或起泡階段進(jìn)一步傳播

div的實(shí)際移動(dòng)由css3屬性transform: { translateX, translateY }提供

高階組件封裝的github項(xiàng)目鏈接react-drag-hoc

更多文章 yjy5264.github.io

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/107036.html

相關(guān)文章

  • 回到基礎(chǔ)：理解 JavaScript DOM

    摘要：事件處理允許對(duì)事件做出反應(yīng)。還可以用代碼為多個(gè)元素分配相同的事件。指定事件監(jiān)聽器接下來看看怎樣為元素分配事件監(jiān)聽器。 翻譯：瘋狂惡的技術(shù)宅https://medium.freecodecamp.o... 本文首發(fā)微信公眾號(hào)：jingchengyideng歡迎關(guān)注，每天都給你推送新鮮的前端技術(shù)文章 Javascript DOM（文檔對(duì)象模型）是一個(gè)允許開發(fā)人員操縱頁面內(nèi)容、結(jié)構(gòu)和風(fēng)...

    wemallshop 評(píng)論0 收藏0

  • 不會(huì)做動(dòng)畫的程序猿不是好的動(dòng)畫師（如何用css3動(dòng)畫做動(dòng)畫）

    摘要：一過渡一的作用二的屬性二和動(dòng)畫一動(dòng)畫序列書寫簡例二書寫簡例常用屬性簡寫屬性三完整動(dòng)畫簡例代碼三轉(zhuǎn)換一轉(zhuǎn)換縮放移動(dòng)旋轉(zhuǎn)設(shè)置元素轉(zhuǎn)換的中心點(diǎn)綜合性寫法二轉(zhuǎn)換三維坐標(biāo)系透視呈現(xiàn)位移旋轉(zhuǎn)一過渡一的作用如果你有一個(gè)盒子，他的體內(nèi)也有個(gè)小盒子。 ...

    xeblog 評(píng)論0 收藏0

  • js鼠標(biāo)事件解析——如何用js實(shí)現(xiàn)一個(gè)拖動(dòng)但是不觸發(fā)其點(diǎn)擊事件

    摘要：前言這個(gè)是我在做一個(gè)的的時(shí)候出現(xiàn)的一個(gè)問題吧，就是想要他實(shí)現(xiàn)拖動(dòng)的葉子節(jié)點(diǎn)，但是的話，不觸發(fā)他的點(diǎn)擊事件。這時(shí)候，我就想到一個(gè)好方法，就是設(shè)計(jì)監(jiān)聽其父組件的事件就可以了，反正都會(huì)冒泡的。 前言 這個(gè)是我在做一個(gè)d3的demo的時(shí)候出現(xiàn)的一個(gè)問題吧，就是想要他實(shí)現(xiàn)拖動(dòng)d3的葉子節(jié)點(diǎn)，但是的話，不觸發(fā)他的點(diǎn)擊事件。 在這里，我想過以下兩種種方案： 設(shè)計(jì)監(jiān)聽mousedown，mouseu...

    Tony 評(píng)論0 收藏0

  • 如何用原生js來寫一個(gè)swiper滑塊插件（上）原理

    嗨~ 這里是芝麻，今天我們一塊來做一個(gè)滑塊插件。那么啥是滑塊插件呢？滑塊插件能干嘛呢？請(qǐng)看下圖： showImg(https://user-gold-cdn.xitu.io/2019/5/27/16af8370362d18e4); 是不是有點(diǎn)印象了，沒錯(cuò)，他的最基本的用法就是左右滑動(dòng)，插件使用者只需要寫幾行簡單的html和js即可實(shí)現(xiàn)一個(gè)簡單滑動(dòng)效果，不過你完全可以組合各種元素來適應(yīng)不同的場(chǎng)景...

    Dionysus_go 評(píng)論0 收藏0

  • 面試試題總結(jié)

    摘要：閑心面試題一任選一題分的區(qū)別的區(qū)別是無序列表，是有序列表，是定義列表有層次關(guān)系。無任何語義，僅僅用作樣式化或者腳本化的鉤子是有一定語義的，適合有主題性的內(nèi)容，表示一個(gè)專題，一般有標(biāo)題，但是不可以亂用。誕生于年，由等人創(chuàng)建，后為所收購。 閑心面試題 一、任選一題（5分）a) ul、ol、dl的區(qū)別？b) div、section、article的區(qū)別？ a:ul是無序列表，ol是有序列表，...

    alaege 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<