HTML：实现鼠标拖拽，释放效果

第一部分body：

先定义一个块标签，例如div class="drag"

第二部分style：

自由书写其样式，不可或缺的属性position：absolute；

第三部分script：鼠标拖动元素移动，即元素的位置放上变化---坐标.

var drag=document.querySelector(".drag");//获取元素
//鼠标按下事件，获取起点位置信息
drag.onmousedown=function(e1){var x1=e1.clientX;//可显示出事件发生时鼠标指针的横坐标：var y1=e1.clientY;//可显示出事件发生时鼠标指针的纵坐标：var l1=this.offsetLeft;var t1=this.offsetTop;
//查找变量时有个就近原则  形参就是局部变量
//   鼠标移动事件，计算差值，drag重新定位
window.onmousemove=function(e2){var x2=e2.clientX;//移动旧的位置var y2=e2.clientY;var l2=l1+(x2-x1);//原来的位置加上移动的距离就是移动之后的位置(坐标)var t2=t1+(y2-y1);//边界处理 防止越界 （）优先级最高l2=l2<0?0:(l2>window.innerWidth-drag.offsetWidth?window.innerWidth-drag.offsetWidth:l2);
t2=t2<0?0:(t2>window.innerHeight-drag.offsetHeight?window.innerHeight-drag.offsetHeight:t2);drag.style.left=l2+'px';drag.style.top=t2+'px';
}
}
//当鼠标抬起时，去掉mousemove事件
drag.onmouseup=function(){window.onmousemove=null;
}

HTML：实现鼠标拖拽，释放效果相关推荐

html div 可鼠标滚动,js实现鼠标拖拽div左右滑动
本文实例为大家分享了js鼠标拖拽div左右滑动的具体代码,供大家参考,具体内容如下 Title body{ position: relative; margin:0; padding:0; width ...
弹出框的鼠标拖拽事件
几个与定位有关的概念: js: clientX/clientY属性:获得事件发生时鼠标指针在视口中的水平和垂直坐标. screenX/screenY属性:获取鼠标事件发生时鼠标光标相对于整个电脑屏幕的 ...
自动化测试之鼠标悬浮操作、双击、鼠标拖拽
鼠标操作.封装在ActionChains中 -move_to_element -double_click 双击 -context_click right_click 右键 -drag_and_drop ...
JavaFX鼠标拖拽事件
一.节点原拖拽事件 //鼠标拖拽进入node node.setOnMouseDragEntered(event->{//do something });//鼠标拖拽退出node node.set ...
java鼠标左键按下后拖动实现多选_鼠标拖拽多选功能
鼠标拖拽多选功能 *{ box-sizing:border-box; } ul{ width:500px; height:auto; margin:0; padding:20px; font-size ...
html5的鼠标拖拽
鼠标拖拽 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8 ...
javascript鼠标拖拽的那些事情
<html> <head> <title>javascript鼠标拖拽的那些事情</title> <meta http-equiv="C ...
3dmax java_Java3D读取3DMax模型并实现鼠标拖拽、旋转、滚轮缩放等功能
/**-------------------------------------------------代码区--------------------------------------------- ...
html点击控制盒子左右移动,JS实现鼠标拖拽盒子移动及右键点击盒子消失效果示例...
JS实现鼠标拖拽盒子移动及右键点击盒子消失效果示例发布时间:2020-10-04 12:47:25 来源:脚本之家阅读:121 作者:s_psycho 本文实例讲述了JS实现鼠标拖拽盒子移动及右键 ...
计算机图形学实现鼠标拖拽图元
计算机图形学实现鼠标拖拽图元问题描述当计算机图形学中需要实现拖拽图元时,关键在于如何判断鼠标是否在拖拽,鼠标被拖拽时的移动确定鼠标是在图元内部按下还是按下后移动到图元内确定鼠标的移动,点击图 ...

HTML：实现鼠标拖拽，释放效果

HTML：实现鼠标拖拽，释放效果相关推荐

最新文章

热门文章