前端 JavaScript -- 实现元素的拖拽功能

客官°小女子只卖身不卖艺 2022-10-29 11:24 281阅读 0赞

实现元素的拖拽功能，类似于桌面的图标，鼠标点击长按可以移动元素 当鼠标松开，元素固定到鼠标松开的位置。

<style> #box1{ width: 100px; height: 100px; background-color: rebeccapurple; position: absolute; } </style> 
    <script> window.onload = function () { var box1 = document.getElementById("box1"); drag(box1); }; /** * 专门用来拖拽的方法，参数为拖拽元素的ID */ function drag(obj) { //当鼠标在被拖拽元素上按下，开始拖拽 obj.onmousedown = function (event) { //设置obj捕获所有的鼠标按下事件，而不仅仅是在元素内部区域 // obj.setCapture && obj.setCapture(); //解决兼容性问题,实现IE8的兼容 event = event || window.event; //鼠标在元素中的偏移量等于 鼠标的clientX - 元素的offsetLeft var ol = event.clientX - obj.offsetLeft; var ot = event.clientY - obj.offsetTop; //为document绑定一个onmousemove事件 document.onmousemove = function (event) { event = event || window.event; //当鼠标移动时，被拖拽元素跟随鼠标移动 //获取鼠标的坐标 var left = event.clientX - ol; var top = event.clientY - ot; //修改元素的位置 修改元素的位置只能通过 元素.style.属性 = "属性值"; obj.style.left = left + "px"; obj.style.top = top + "px"; }; //为document绑定一个鼠标松开事件onmouseup document.onmouseup = function () { //当鼠标松开时，被拖拽元素固定在当前位置 //当鼠标松开时，取消onmousemove事件 document.onmousemove = null; //当鼠标松开时，onmouseup事件，要不每次一松开鼠标都触发此事件 document.onmouseup = null; //鼠标松开，取消事件的捕获 //obj.releaseCapture && obj.releaseCapture(); }; /** * 当我们拖拽一个网页中的内容时，浏览器默认会使用搜索引擎去搜索拖拽的文本内容 * 可以通过return false取消这种行为 * * 注：IE8 使用return false无效 */ return false; }; } </script>
    
    <body>
    <div id="box1"></div>
    
    </body>

> 注： 一定要将元素的css样式的position进行设置，否则无效果 一般设置为position: absolute;

正在学习中，如果不足之处，感谢各位指正

发表评论取消回复

表情：

评论列表（有 0 条评论，281人围观）

还没有评论，来说两句吧...

相关阅读

相关复杂前端组件 - 拖拽排序功能设计与实现

复杂前端组件 - 拖拽排序功能设计与实现最终效果 ![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-e9JjMCZZ-16

左手的ㄟ右手/ 2024年03月16日 14:08/ 0 赞/ 46 阅读

相关 JavaScript经典案例：页面元素拖拽

效果展示： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nL

小鱼儿/ 2022年12月23日 11:14/ 0 赞/ 201 阅读

相关前端 JavaScript -- 实现元素的拖拽功能

实现元素的拖拽功能，类似于桌面的图标，鼠标点击长按可以移动元素当鼠标松开，元素固定到鼠标松开的位置。 <style> box1{ width: 100px; hei

客官°小女子只卖身不卖艺/ 2022年10月29日 11:24/ 0 赞/ 282 阅读

相关 easyUI拖拽功能讲解以及多选拖拽的实现

首先我们考虑这样一个业务场景：一个维修部门中分了N个维修组，维修部门的负责人需要将这个部门的维修人员分配到这些组里去。当然，他可以选中一个维修人员，然后给他分配维修组，但是

￡神魔★判官ぃ/ 2022年08月06日 05:04/ 0 赞/ 559 阅读

相关 javascript拖拽盒子移动的实现

原理比较简单，可以参照之前的文章[javascript淘宝主图放大镜功能][javascript]帮助理解。 <!DOCTYPE html> <html>

刺骨的言语ヽ痛彻心扉/ 2022年07月16日 09:07/ 0 赞/ 204 阅读

相关 JavaScript 实现简单的拖拽效果

之前一直对js中常用坐标属性不是很熟，特意花了一个下午的时间研究，并写了一个实现元素拖动的函数，在这边分享一下。（如果有不对的地方，还请批评指正~）先介绍一下实现

Myth丶恋晨/ 2022年06月07日 00:59/ 0 赞/ 264 阅读

相关 JavaScript 拖拽效果实现

我们在访问一些网站时，会发现有些内容是可以拖拽的，比较方便，那么使用JS怎么实现呢？今天结合代码展示下拖拽效果的实现。这里需要先熟悉下几个JS事件： onmouse

淩亂°似流年/ 2022年05月17日 07:39/ 0 赞/ 305 阅读

相关原生js实现拖拽功能

如果要设置物体拖拽，必须使用三个事件，分别是： 1、onmousedown:鼠标按下事件 2、onmousemove:鼠标移动事件 3、onmouseup:鼠标抬开事件

爱被打了一巴掌/ 2021年12月15日 13:57/ 0 赞/ 502 阅读

相关 JavaScript实现网页元素的拖拽效果

下面的页面中放了两个div，可以通过鼠标拖拽这两个元素到任意位置。 ![SouthEast][] ![SouthEast 1][] 实现该效果的HTML页面代

桃扇骨/ 2021年09月22日 03:46/ 0 赞/ 399 阅读

相关 javascript元素拖拽效果的实现

主要涉及三个鼠标事件 mousedown,onmousemove和onmouseup 注意：onmouseup绑定在document对象上，因为释放鼠标时，有可能鼠标不在拖

Dear 丶/ 2021年07月26日 15:38/ 0 赞/ 495 阅读