拖拽 = 鼠标按下 + 鼠标移动 + 鼠标弹上
这样就完成了一个拖拽任务,想实现拖拽,自然实现上面的3个动作,便可以模拟拖拽效果,对应JavaScript中的语法就是需要实现这3个动作:
onmousedown , onmousemove , onmouseup
import React, { useEffect, useState } from 'react';
import './window.less';
export default function Page() {
let [act, setact] = useState(-1);
let [menu, setmenu] = useState(false);
let [visiable, setvisiable] = useState(false);
let [img, setimg] = useState(0);
const drag = () => {
//获取对应的节点信息
let target: any = document.querySelector(".modal");
let context = document.querySelector(".context");
//鼠标按下以后
target.onmousedown = function (event: any) {
var event = event || window.event;//兼容性的写法
//获取鼠标当前的坐标值:
var X1 = event.clientX;
var Y1 = event.clientY;
//获取盒子的偏倚位置
var L = target.offsetLeft; //左偏倚的内容