JavaScript图片或者div拖动拖动函数的实现

moboyou 2025-06-18 18:37 3 浏览

* 拖动图片封装

html格式：<img lay-src="${item.Resourcesurl}" alt="${item.ResourcesName}" style="position: absolute;" onmousemove="drag(this)" >

function drag(obj) {

/*实现div的拖拽功能

* 实现拖拽功能的思路

* 首先需要鼠标按下之后 onmousedown()

* div会跟随鼠标进行移动 onmousemove()

* 在鼠标松开之后，div会立刻固定位置 onmouseup()

//当鼠标在被拖拽元素上按下时，开始拖拽 onmousedown

obj.onmousedown = function (event) {

//设置捕获所有鼠标按下的事件

* setCapture()

* - 只有IE支持，但是在火狐中调用时不会报错，

* 而如果使用chrome调用，会报错

/*if(box1.setCapture){

box1.setCapture();

}*/

obj.setCapture && obj.setCapture();

event = event || window.event;

//div的偏移量鼠标.clentX - 元素.offsetLeft

//div的偏移量鼠标.clentY - 元素.offsetTop

var ol = event.clientX - obj.offsetLeft;

var ot = event.clientY - obj.offsetTop;

//为document绑定一个onmousemove事件

document.onmousemove = function (event) {

event = event || window.event;

//当鼠标移动时被拖拽元素跟随鼠标移动 onmousemove

//获取鼠标的坐标

var left = event.clientX - ol;

var top = event.clientY - ot;

// console.log(left, top);

//修改box1的位置

obj.style.left = left + "px";

obj.style.top = top + "px";

};

//为document绑定一个鼠标松开事件

document.onmouseup = function () {

//当鼠标松开时，被拖拽元素固定在当前位置 onmouseup

//取消document的onmousemove事件

document.onmousemove = null;

//取消document的onmouseup事件

document.onmouseup = null;

//当鼠标松开时，取消对事件的捕获

obj.releaseCapture && obj.releaseCapture();

};

* 当我们拖拽一个网页中的内容时，浏览器会默认去搜索引擎中搜索内容，

* 此时会导致拖拽功能的异常，这个是浏览器提供的默认行为，

* 如果不希望发生这个行为，则可以通过return false来取消默认行为

* 但是对IE8不起作用

return false;

};

}

css教程文字移动

上一篇：用 Cursor 开发 10 +项目后，汇总了40 多条提示词
下一篇：你不知道的css小技巧

JavaScript图片或者div拖动拖动函数的实现

相关推荐

Linux环境中查看Oracle错误和警告日志信息

絮语----工作四年的碎碎念

SQL 中的 (+)用法

MYSQL经典面试题汇总

oracle常见问题处理

医院信息系统突发应急演练记录

最全面的IBMS系统集成系统技术规格书，赶紧收藏起来!

Windows 11:已知问题和已解决问题列表(更新时间:2022年1月)

苹果停止更新Windows版QuickTime!

Navicat Data Modeler使用教程十二:配置