html5移动拖拽,H5鼠标拖拽移动

2024-05-09 19:28:12

刚开始学H5的js，所以就全用js做的，只是为了锻炼自己的js基础

以下就是我整个H5的代码

var box = document.createElement('div');

box.style.width = '100px';

box.style.height = '100px';

box.style.background = 'red';

box.style.position = 'absolute';

document.body.appendChild(box);

//onmounsedown、onmounsemove、onmouseup;

// 这三个事件标识着鼠标拖移的三个状态点，

// 1、鼠标按下 2、鼠标移动 3、鼠标弹起

box.onmousedown = function (event) {

event = event || window.event;

//disX和disY是鼠标在box上点击的位置距离左、上的边距

// var disX = event.clientX - box.offsetLeft;

// var disY = event.clientY - box.offsetTop;

var disX = event.offsetX;

var disY = event.offsetY;

//紧接着触发鼠标移动事件

document.onmousemove = function (event) {

event = event || window.event;

//通过鼠标在可视范围内的横纵坐标，来计算div的left和top值

var left = event.clientX - disX;

var top = event.clientY - disY;

//通过新的left、top值来修改div的位置

box.style.left = left +'px';

box.style.top = top + 'px';

}

//鼠标弹起事件

document.onmouseup = function() {

document.onmousemove = null;//结束移动事件监听

}

}

html5移动拖拽,H5鼠标拖拽移动相关推荐

JavaFX鼠标拖拽事件
一.节点原拖拽事件 //鼠标拖拽进入node node.setOnMouseDragEntered(event->{//do something });//鼠标拖拽退出node node.set ...
span标签的鼠标滑入提示_彻底搞懂拖拽——基于鼠标事件的拖拽以及基于HTML5 API的拖拽...
一.基于鼠标事件的拖拽原理--onmousedown.onmousemove.onmouseup onmousedown 该事件会在鼠标按键被按下时触发支持该事件的HTML标签: html < ...
html5拖动鼠标直线,html5的鼠标拖拽
鼠标拖拽 Title .one {width:200px;height:200px;border:1px solid blue;margin:10px;} .two {width:50px;heigh ...
html5的鼠标拖拽
鼠标拖拽 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8 ...
php实现拖拽排序,H5实现拖拽排序的代码
本篇文章给大家带来的内容是关于H5实现拖拽排序的代码 ,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 一.需求豆果食谱系统,sku列表实现拖拽排序,如图: 二.HTML5拖放API ...
JS实现拖拽并解决拖拽过程中鼠标抬起仍旧处于拖拽状态问题
需求分析实现一个任意元素可以被鼠标任意拖拽:鼠标在这个元素上按下,开始拖拽,元素跟着鼠标一起移动,当鼠标松开时,被拖拽的元素固定在当前位置上.如图所示(底下灰色的轨迹不知道为啥录制动图就出现了,实际 ...
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 ...

最新文章

热门文章