react实现
import React, { Component } from 'react';
let boxDom,
topSaveDom,
lugDom;
import './index.scss';
class App extends Component {
constructor(props) {
super(props);
this.state = {
feedbackTop: false,
};
}
componentDidMount() {
boxDom = $('.fixed-paper-create')[0];
topSaveDom = $('.top-save')[0];
lugDom = $('.top-save .iconfont')[0];
boxDom.addEventListener('scroll', this.onScroll);
lugDom.addEventListener('mousedown', this.onMouseDown);
}
componentWillUnmount() {
boxDom.removeEventListener('scroll', this.onScroll);
lugDom.removeEventListener('mousedown', this.onMouseDown);
}
// 滚动条事件
onScroll = (e) => {
if (this.timer) clearTimeout(this.timer);
this.timer = setTimeout(() => {
this.setState({ feedbackTop: e.target.scrollTop > 100 });
}, 100);
}
// 返回顶部
backTop = () => {
$('.fixed-paper-create').scrollTop(0);
}
// 拖拽
onMouseDown(e1) {
let y,
max = document.body.clientHeight - 50;
document.onmousemove = (e) => {
if (e.clientY < 20) {
y = 20;
} else {
y = e.clientY > max ? max : e.clientY - e1.offsetY;
}
topSaveDom.style.top = `${y}px`;
};
document.onmouseup = () => {
document.onmousemove = null;
document.onmouseup = null;
};
}
render() {
return (
<div className="fixed-paper-create">
<div className="con">内容区</div>
<div
className="top-save"
style={{ visibility: this.state.feedbackTop ? 'visible' : 'hidden' }}
>
<button onClick={this.backTop}>返回顶部</button>
<span className="iconfont icon-tuodong" />
</div>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById("app"));
scss样式
.fixed-paper-create {
height: 100vh;
overflow: auto;
.con{
height:1800px;
background:#fbffe0;
}
.top-save {
position: fixed;
right: 80px;
bottom: 30px;
height: fit-content;
.icon-tuodong {
position: absolute;
right: -18px;
top: 50%;
z-index: 10;
line-height: 1;
transform: translateY(-50%);
user-select: none;
color: #7ADEFF;
background: #fff;
border-radius: 50px;
cursor: pointer;
&:hover,
&:active{
color: #00A6FF;
}
}
}
}
原生js
spanDom=$('.top-save .iconfont')[0];
divDom=$('.top-save')[0];
spanDom.addEventListener("mousedown",this.onmousedown.bind(this));
onmousedown(e1){
// 当鼠标在文档移动时，不能再div上移动，因为鼠标可能离开div，造成无法拖拽
let y,max=document.body.clientHeight-80
document.onmousemove=(e)=>{
console.log(444,e.type,e.clientY,max)
// 当鼠标移动时，将当前鼠标相对视口的坐标赋值给元素的left和top
// 因为我们需要在按下的位置拖拽，因此我们还需要获取按下键鼠标相对div的左上角位置
// 使用当前鼠标位置减去这个相对元素的左上角位置，保证鼠标所按位置拖拽
if(e.clientY<8){
y=8
}else{
y= e.clientY>max?max:e.clientY-e1.offsetY
}
divDom.style.top=y+"px";
}
// 当释放鼠标键时，删除鼠标移动事件和删除鼠标释放事件
document.onmouseup=()=>{
document.onmousemove=null;
document.onmouseup=null;
}
}
以下来自https://blog.csdn.net/qq_44957616/article/details/105347921
拖拽功能主要是用在让用户做一些自定义的动作，比如拖动排序，弹出框拖动移动等等
拖拽的流程动作
1、鼠标按下 会触发onmousedown事件
2、鼠标移动 会触发onmousemove事件
3、鼠标松开 会触发onmouseup事件
拖拽原理
1.鼠标按下+鼠标移动 = 拖拽-------事件 onmousedown + onmousemove
2.鼠标松开 = 无拖拽--------停止拖拽 onmouseup
3.鼠标偏移 = 拖拽距离
当点击dom的时候，记录当前鼠标的坐标值，也就是x、y值，以及被拖拽的dom的top、left值，而且还要在鼠标按下的回调函数里添加鼠标移动的事件：
document.addEventListener(“mousemove”, moving, false)
和添加鼠标抬起的事件
document.addEventListener(“mouseup”,function() {
document.removeEventListener(“mousemove”, moving, false);
}, false);
这个抬起的事件是为了解除鼠标移动的监听，因为只有在鼠标按下才可以拖拽，抬起就停止不会移动了。
当鼠标按下鼠标移动的时候，记录移动中的x、y值，那么这个被拖拽的dom的top和left值就是：
top=鼠标按下时记录的dom的top值+（移动中的y值 - 鼠标按下时的y值）
left=鼠标按下时记录的dom的left值+（移动中的x值 - 鼠标按下时的x值）;
//极简单版
/* var div=document.querySelector("div");
// 按下时开始监听在文档中鼠标移动的事件
// 开始监听鼠标松开键的事件
// 只有按下时才准备拖拽
div.onmousedown=function(e1){
// 当鼠标在文档移动时，不能再div上移动，因为鼠标可能离开div，造成无法拖拽
div.onmousemove=function(e){
// 当鼠标移动时，将当前鼠标相对视口的坐标赋值给元素的left和top
// 因为我们需要在按下的位置拖拽，因此我们还需要获取按下键鼠标相对div的左上角位置
// 使用当前鼠标位置减去这个相对元素的左上角位置，保证鼠标所按位置拖拽
div.style.left=e.clientX-e1.offsetX+"px";
div.style.top=e.clientY-e1.offsetY+"px";
}
// 当释放鼠标键时，删除鼠标移动事件和删除鼠标释放事件
div.onmouseup=function(){
document.onmousemove=null;
document.onmouseup=null;
}
} */
// 简单版
/* var div=document.querySelector("div");
var offsetX,offsetY;
div.addEventListener("mousedown",mouseDownHandler);
function mouseDownHandler(e){
offsetX=e.offsetX
offsetY=e.offsetY
document.addEventListener("mousemove",mousemoveHandler)
document.addEventListener("mouseup",mouseupHandler)
}
function mousemoveHandler(e){
div.style.left=e.clientX-offsetX+"px"
div.style.top=e.clientY-offsetY+"px"
}
function mouseupHandler(e){
document.removeEventListener("mousemove",mousemoveHandler)
document.removeEventListener("mouseup",mouseupHandler)
} */
// 简单升级版
var div=document.querySelector("div");
var offsetX,offsetY;
div.addEventListener("mousedown",mouseHandler);
function mouseHandler(e){
if(e.type==="mousedown"){
offsetX=e.offsetX;
offsetY=e.offsetY;
document.addEventListener("mousemove",mouseHandler)
document.addEventListener("mouseup",mouseHandler)
}else if(e.type==="mousemove"){
div.style.left=e.clientX-offsetX+"px"
div.style.top=e.clientY-offsetY+"px"
}else if(e.type==="mouseup"){
document.removeEventListener("mousemove",mouseHandler)
document.removeEventListener("mouseup",mouseHandler)
}
}
注
a、被拖拽的元素的样式要设置成绝对或相对位置才有效果。
b、拖拽加到document，不然内容会脱离
网友评论