如何用鼠標移動一個div(React實現)

Shimmer 發布于2019-08-26 11:31 / 1356人閱讀

鼠標事件

要用鼠標移動一個div首先要獲取的是鼠標移動的事件。
有三個事件是需要的

onMouseDown 鼠標按下觸發

onMouseMove 鼠標移動觸發

onMouseUp 鼠標按鈕抬起觸發

有了這三個事件，就可以獲得鼠標完整的按下->移動->抬起完整的操作

移動距離

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

在class內存儲一對變量lastX和lastY

第一次鼠標移動獲取數據后將clientX和clientY放入lastX和lastY

第二次鼠標移動獲取數據后，當前clientX與lastX的差即是dx，clientY與lastY的差是dy

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

將dx和dy加上原來的坐標進行setState操作即可移動div

React實現源碼

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提供的原因是防止鼠標移動過快造成事件丟失

this.moving為記錄移動開始標志

stopPropagation作用為終止事件在傳播過程的捕獲、目標處理或起泡階段進一步傳播

div的實際移動由css3屬性transform: { translateX, translateY }提供

高階組件封裝的github項目鏈接react-drag-hoc

更多文章 yjy5264.github.io

GPU云服務器云服務器 DIV跟隨鼠標移動如何用webrtc實現聊天 js實現鼠標拖動div 如何用c語言實現組合

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/107036.html

回到基礎：理解 JavaScript DOM

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

wemallshop 2019-08-23 16:30 評論0 收藏0
不會做動畫的程序猿不是好的動畫師（如何用css3動畫做動畫）

摘要：一過渡一的作用二的屬性二和動畫一動畫序列書寫簡例二書寫簡例常用屬性簡寫屬性三完整動畫簡例代碼三轉換一轉換縮放移動旋轉設置元素轉換的中心點綜合性寫法二轉換三維坐標系透視呈現位移旋轉一過渡一的作用如果你有一個盒子，他的體內也有個小盒子。 ...

xeblog 2021-11-11 16:55 評論0 收藏0
js鼠標事件解析——如何用js實現一個拖動但是不觸發其點擊事件

摘要：前言這個是我在做一個的的時候出現的一個問題吧，就是想要他實現拖動的葉子節點，但是的話，不觸發他的點擊事件。這時候，我就想到一個好方法，就是設計監聽其父組件的事件就可以了，反正都會冒泡的。前言這個是我在做一個d3的demo的時候出現的一個問題吧，就是想要他實現拖動d3的葉子節點，但是的話，不觸發他的點擊事件。在這里，我想過以下兩種種方案：設計監聽mousedown，mouseu...

Tony 2019-08-26 11:49 評論0 收藏0
如何用原生js來寫一個swiper滑塊插件（上）原理

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

Dionysus_go 2019-05-27 17:41 評論0 收藏0
面試試題總結

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

alaege 2019-08-19 18:05 評論0 收藏0