一、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/n/295647.html
微信扫一扫 
支付宝扫一扫 