一、React拖拽事件
React中進行拖拽操作時，常用的事件有以下四種：
{` onDragStart：拖拽開始時觸發； onDrag：拖拽中觸發； onDragEnter：拖拽目標進入時觸發； onDragLeave：拖拽目標離開時觸發。`}我們通過操作事件中的參數，就可以實現移動元素的效果，如下面React實現拖拽小球的示例：
{`
import React, { Component } from 'react';
import './App.css';class App extends Component {
state = {
left: 0,
top: 0
}
dragStartHandler = (event) => {
event.dataTransfer.setData("posX", event.clientX - this.state.left)
event.dataTransfer.setData("posY", event.clientY - this.state.top)
}
dragHandler = (event) => {
this.setState({
left: event.clientX - event.dataTransfer.getData("posX"),
top: event.clientY - event.dataTransfer.getData("posY")
})
}
render() {
return (
原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/295647.html
微信掃一掃 
支付寶掃一掃 