在html监听鼠标拖动,使用javaScript实现鼠标拖拽事件

body{

margin: 0;

padding: 0;

}

div{

position: absolute;

top: 200px;/*div的y轴*/

left: 150px;/*div的x轴*/

width: 300px;

height: 200px;

background-color: gray;

}

div:hover{

cursor: move;

}

* 分析：

* 获取鼠标实时移动的坐标；m_move_x,m_move_y

* 鼠标按下时的坐标；m_down_x,m_down_y

* div的坐标；dx,dy

* 鼠标按下时，鼠标与div的偏移量；md_x,md_y

* div的新坐标；ndx,ndy

var isDown = false;//记录鼠标状态

var move_div ;//要操作的div对象

var m_move_x,m_move_y,m_down_x,m_down_y,dx,dy,md_x,md_y,ndx,ndy;

//鼠标按下

function down(){

move_div = document.getElementById("move_div");

isDown = true;

//获取鼠标按下时坐标

m_down_x = event.pageX;

m_down_y = event.pageY;

//获取div坐标

dx = move_div.offsetLeft;

dy = move_div.offsetTop;

//获取鼠标与div偏移量

md_x = m_down_x - dx;

md_y = m_down_y - dy;

}

//鼠标移动

function move(){

move_div = document.getElementById("move_div");

//实时更新div的坐标

dx = move_div.offsetLeft;

dy = move_div.offsetTop;

//获取鼠标移动实时坐标

m_move_x = event.pageX;

m_move_y = event.pageY;

//鼠标按下时移动才触发

if(isDown){

//获取新div坐标，鼠标实时坐标 - 鼠标与div的偏移量

ndx = m_move_x - md_x;

ndy = m_move_y - md_y;

//把新div坐标值赋给div对象

move_div.style.left = ndx+"px";

move_div.style.top = ndy+"px";

}

//鼠标释放

function up(){

isDown = false;

}

在html监听鼠标拖动,使用javaScript实现鼠标拖拽事件相关推荐

JavaScript中的拖拽事件且限制出界
JavaScript中的拖拽事件限制出界 JavaScript事件中很多都会用到拖拽,而在现实中很多拖拽是会限制在浏览器界面禁止出界的,下面是封装好的限制出界的拖拽事件. function drag( ...
qml鼠标拖动_qml实现窗口的拖拽效果
核心思想是: 在main中引入QMainWindow对象,将qml文件作为该对象的widget,并将该对象注册到qml中,然后再qml中通过识别鼠标的位移来更改这个mainwindow的pos属性. ...
puppeteer 鼠标定位滑块_监听滑块滑动或滑块随鼠标移动 | JShare
监听滑块滑动或滑块随鼠标移动 | JShare fork from "Column with rotated labels" var data = [29,12,32,28,22, ...
onchange监听input值变化及input隐藏后change事件不触发的原因与解决方法(设置readonly后onchange不起作用的解决方案)
onchange监听input值变化及input隐藏后change事件不触发的原因与解决方法(设置readonly后onchange不起作用的解决方案) 参考文章: (1)onchange监听inpu ...
监听返回app_基于 Redis 消息队列实现 Laravel 事件监听及底层源码探究
在 Laravel 中,除了使用 dispatch 辅助函数通过 Illuminate\Bus\Dispatcher 显式推送队列任务外,还可以通过事件监听的方式隐式进行队列任务推送,在这个场景下,事 ...
Android监听系统输入法键盘弹出显示与隐藏事件
Android监听系统输入法键盘弹出显示与隐藏事件有时候需要监听Android系统输入法的弹出显示事件,比如:微信聊天时,不管你当前在聊天中的什么位置(上滑查看消息历史),每当你点击输入框时,都会自 ...
【JavaScript 进阶之旅 DOM篇第九章】鼠标行为、pageX|Y封装、拖拽事件封装
文章目录一.鼠标行为 1.clientX/Y 2.pageX/Y 3.screenX/Y 4.offsetX/Y 5.layerX/Y(不推荐使用) 6.x/y(不推荐使用) 二.pageX|Y封装 ...
JavaFX鼠标拖拽事件
一.节点原拖拽事件 //鼠标拖拽进入node node.setOnMouseDragEntered(event->{//do something });//鼠标拖拽退出node node.set ...
弹出框的鼠标拖拽事件
几个与定位有关的概念: js: clientX/clientY属性:获得事件发生时鼠标指针在视口中的水平和垂直坐标. screenX/screenY属性:获取鼠标事件发生时鼠标光标相对于整个电脑屏幕的 ...

在html监听鼠标拖动,使用javaScript实现鼠标拖拽事件

在html监听鼠标拖动,使用javaScript实现鼠标拖拽事件相关推荐

最新文章

热门文章