拖拽的三大事件：
onmousedowm / onmousemove / onmouseup
如果把移动事件放在box上，那么当鼠标移动快的时候，鼠标会脱离盒子，导致盒子不跟着鼠标走。
解决：把移动事件放在document上，就能解决
如果把抬起事件放在box上，那么鼠标放到了浏览器的地址栏时，松开鼠标还会导致盒子一直跟着鼠标走。
解决：把抬起事件放在document上
当页面中有文字（图片）并且选中的时候，那么会有浏览器的默认行为（使得拖拽元素拖动和抬起有问题）
解决：在按下的时候阻止默认行为：
DOM 0：return false
DOM2 ：ev.preventDefault()
解除事件绑定 ：
普通绑定：
ele.onmouseup = null
ES6绑定：
元素 . removeEventListener ( "不带on的事件名"，函数名）
ele.removeEventListener("mousemove",this.m)
例子1：拖拽盒子ES6的类+DOM2事件绑定练习
<body> <div id="box" style=" 100px;height:100px;background-color: red;position: absolute" ></div> <script> class Drag{ constructor(id){ this.disX = 0; this.disY = 0; this.box = document.getElementById(id); this.m = this.move.bind(this); this.u = this.up.bind(this) } init(){ this.box.addEventListener("mousedown",this.down.bind(this)) } down(ev){ this.disX = ev.pageX - this.box.offsetLeft; this.disY = ev.pageY - this.box.offsetTop; document.addEventListener("mousemove",this.m); document.addEventListener("mouseup",this.u) } move(ev){ this.box.style.left = ev.pageX - this.disX + "px"; this.box.style.top = ev.pageY - this.disY + "px" } up(){ document.removeEventListener("mousemove",this.m); document.removeEventListener("mouseup",this.u); } } let xxx = new Drag("box"); xxx.init(); </script> </body>
例子2：react 版本 + 加磁吸效果
import React, { Component } from "react";
import "./BaseMoveBox.css";
import PropTypes from "prop-types";
let canRun = true;
let timer = null;
let time = null;
class BaseMoveBox extends Component {
constructor(props) {
super(props);
this.state = {
boxsInitialTop: null,
boxsInitialLeft: null
};
};
componentWillUnmount() {
if (timer) {
clearTimeout(timer)
}
if (time) {
clearTimeout(time)
}
}
getPosition = (ev) => {
const box = document.getElementById(this.props.domId);
let {boxsInitialTop, boxsInitialLeft} = this.state;
if(!boxsInitialTop) { //存下一个初始值，为磁吸做准备。
boxsInitialTop = box.offsetTop;
boxsInitialLeft = box.offsetLeft;
this.setState({
boxsInitialTop,
boxsInitialLeft
})
}
const disX = ev.clientX - box.offsetLeft;
const disY = ev.clientY - box.offsetTop;
return { disX, disY } //鼠标点击的位置，到盒子的左边距，和下边距的距离。
}
onMouseDown = (ev) => {
if (ev.target.className === "BaseMoveBox_header") { //判断可以拖动的事件源("header"上有其它组件或者按钮，不能触发拖拽)
ev.target.parentNode.style.zIndex = 20;
ev.preventDefault(); //阻止默认行为(防止拖拽过程中可能选中文字，"box"错误跟随的尴尬)
const position = this.getPosition(ev);
window.onmousemove = this.onMouseMove; //在 window / document 绑定 onmousemove 和 onmouseup
window.onmouseup = this.onMouseUp;
this.setState({ disX: position.disX, disY: position.disY });
}
}
onMouseMove = (ev) => {
if (!canRun) return; //防抖
canRun = false;
timer = setTimeout(() => {
const { disX, disY } = this.state;
const x = ev.clientX - disX;
const y = ev.clientY - disY;
const { clientWidth, clientHeight } = document.documentElement;
const box = document.getElementById(this.props.domId);
if (box) { //控制 left/top 使"box"不要超出合理的范围
const maxHeight = clientHeight - box.offsetHeight
const H = document.getElementsByClassName("page_head")[0].offsetHeight; //减去大标题的高度
const maxWidth = clientWidth - box.offsetWidth;
let top = y > H ? (y < maxHeight ? y : maxHeight) : H;
let left = x > 0 ? (x < maxWidth ? x : maxWidth) : 0;
this.setState({ pageX: left, pageY: top })
}
canRun = true;
}, 17);
}
onMouseUp = async (ev) => {
window.onmousemove = null;
window.onmouseup = null;
//磁吸效果
const { boxsInitialTop, boxsInitialLeft } = this.state;
const T = boxsInitialTop;
const L = boxsInitialLeft;
const { pageX, pageY } = this.state;
const dT = Math.pow(Math.abs(pageY - T), 2) + Math.pow(Math.abs(pageX - L), 2);
const dZ = Math.sqrt(dT);
if (dZ < 100) {
time = setTimeout(() => {
this.setState({ pageX: L, pageY: T })
ev.target.parentNode.style.zIndex = 10;
}, 50)
}
}
render() {
const { title, width, height, domId, renderDom, backgroundColor } = this.props;
const { pageX, pageY } = this.state;
// console.log(pageX, pageY)
return (
<div className="BaseMoveBox" id={domId} style={{ left: pageX, top: pageY, width, height: height }}>
<header className="BaseMoveBox_header" onMouseDown={this.onMouseDown} title={title}>{title}</header>
<div className="BaseMoveBox_content" style={{backgroundColor: backgroundColor}}>{renderDom}</div>
</div>
)
}
}
BaseMoveBox.propTypes = {
T: PropTypes.number,
L: PropTypes.number,
domId: PropTypes.string,
title: PropTypes.string,
PropTypes.string,
height: PropTypes.string
}
BaseMoveBox.defaultProps = {
domId: `${new Date().getTime() + Math.floor(Math.random() * 1000)}BaseMoveBox`,
title: "改变标题，传title",
"27.8rem",
height: "18.2rem"
}
export default BaseMoveBox
/*
* 定位父级很重要 position:"relative" ，基于Window定位 position:fixed
*
*/
// CSS 部分
.BaseMoveBox{
height: 100%;
100%;
position: fixed;
border-style: solid;
border-color: #ccc;
border- 0.05rem;
border-radius: 0.2rem;
/* overflow: hidden; */
z-index: 10;
/*background-color: #E1E3EC */
}
.BaseMoveBox>.BaseMoveBox_header{
.BaseMoveBox>.BaseMoveBox_header{
height: 1.5rem;
line-height: 1.5rem;
padding: 0.1rem 0.5rem;
background-color: #E1E3EC;
cursor: move;
}
.BaseMoveBox>.BaseMoveBox_content{
height: calc(100% - 1.65rem);
100%;
}
更多好玩的效果，看2018年11月20日的课件