js原生 事件委托 拖拽功能

最新推荐文章于 2023-04-03 08:16:35 发布
最新推荐文章于 2023-04-03 08:16:35 发布
阅读量295 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/MENGCHIXIANZI/article/details/111588250
版权 
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>file</title>
    <style>
      div{
          width: 100px;
          height: 100px;
          background-color: red;
          /* float: left; */
          /* margin-top: 10px; */
          position: absolute;
      }
    </style>
  </head>

    <div drag="drag" style="top:0px"></div>
    <div drag=""  style="top:120px"></div>
    <div drag="drag"  style="top:240px"></div>

    <script type="text/javascript">
      
        document.documentElement.onmousedown = function(){

            if(event.srcElement.getAttribute("drag") == "drag"){

                var _this = event.srcElement;
                var needX = event.clientX - _this.offsetLeft;
                var needY = event.clientY - _this.offsetTop;
                document.onmousemove = function(){

                    // _this.style.left = event.clientX - needX + "px";
                    // _this.style.top = event.clientY - needY + "px";

                    var l = event.clientX - needX;
                    var t = event.clientY - needY;
                    if(l < 0){
                        l = 0;
                    }else if(l > window.innerWidth - _this.offsetWidth){
                        l = window.innerWidth - _this.offsetWidth;
                    }

                    if(t < 0){
                        t = 0;
                    }else if(t > window.innerHeight - _this.offsetHeight){
                        t = window.innerHeight - _this.offsetHeight;
                    }

                    _this.style.left = l + "px";
                    _this.style.top = t + "px";
                }

                document.onmouseup = function(){
                    this.onmousedown = this.onmousemove = null;
                }

                return false;
            }
        }
    </script>
</body>
</html>

给需要能拖动的div添加 drag="drag" 属性 即可被拖拽

晓秒四下
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
原生js网格图片拖拽位置和大小变换效果
11-01
原生js网格图片拖拽位置和大小变换效果
原生js可拖拽排列图片布局代码.zip
04-01
- 为了高效处理多个图片的拖拽事件，可以使用事件委托。将事件监听器添加到图片容器元素，而不是每个单独的图片。这样，当任何图片被点击时，事件会冒泡到容器，然后通过事件对象判断是哪个图片触发了事件。 6. **...
js原生拖拽的两种方法
cxu123321的博客
09-04 726
js原生拖拽的两种方法 2018-08-30 11:30:19Muzilh阅读数 12856更多 分类专栏：js 版权声明：本文为博主原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。 本文链接：https://blog.csdn.net/weixin_41910848/article/details/82218243 一.mousedown、mo...
事件的委托以及拖拽效果
qq_45903009的博客
02-02 218
文章目录一：事件绑定的方式1·1：html元素内进行绑定1·2：JS进行绑定1·3：使用事件监听进行绑定1·4：事件监听的兼容性二：事件的委托2·1：委托的好处2·2：委托的实现方法2·3：例题：三：拖拽效果3·1思路3·2：拖拽的边界问题四：jSON对象4·1定义4·2操作4·3：json的转换五：事件的兼容 一：事件绑定的方式 1·1：html元素内进行绑定 1·2：JS进行绑定 1·3：使用事件监听进行绑定 事件源(元素).addEventListener(去掉on的事件,回调函数,[是否是捕获])
事件委托版拖拽
fusheng_lee的博客
04-03 81
这个算是对上一个元素拖拽及原理案例的变性，这个是相同的作用，只不过通过。这个没有做溢出处理，具体方法可以参考上一个。也是对上一个项目的优化。
QT 委托事件之拖拽对象
小鱼游戏开发的博客
07-08 429
#ifndef DRAGEDGE_H #define DRAGEDGE_H #include &lt;QWidget&gt; class DragEdge : public QWidget { Q_OBJECT enum PointType{ LEFT_TOP,CENTER_TOP,RIGHT_TOP, LEFT_CENTER,RIGHT_CEN...
能冒泡的事件
weixin_33991727的博客
12-27 179
每个 event 都有一个event.bubbles属性，可以知道它可否冒泡。(ref：W3定义的Event Interface) 当然 W3 DOM Level 3 Events 的细则里已经附上这个表格了： Event Type Bubbling phase abort ✗ beforeinput ✔ blur ✗ click...
2020/4/26 拖拽与事件委托
qq1547511739的博客
04-26 142
拖拽（拖拽三剑客） mousedown(鼠标按下) 记录鼠标按下位置和被拖拽物体的相对距离 var offsetX = e.clientX - node.offsetLeft var offsetY = e.clientY - node.offsetTop mousemove(鼠标按下移动) 一致保持相对距离 node.style.left = e.clientX - offsetX + ...
JQ JS javascript 拖拽 排序功能 列表排序 菜单排序 表格排序
04-17
1. 添加事件监听器：使用原生JavaScript的`addEventListener`为元素添加`mousedown`、`mousemove`和`mouseup`事件。 ```javascript var draggingElement = null; document.addEventListener('mousedown', function...
前端页面文件拖拽上传模块js代码示例
10-19
- 虽然现代JavaScript有许多原生的解决方案，但这个示例使用了jQuery库来简化DOM操作和事件处理，如`.click()`和`.show()`。 8. **AJAX上传**： - 文件上传通常是通过AJAX异步完成的，这样可以在上传过程中保持...
js列表图片拖拽排序特效代码
03-20
9. **事件委托**：为了提高性能，可以使用事件委托来处理拖拽事件。将事件监听器添加到列表容器上，而不是每个图片元素，这样可以减少事件监听器的数量。 10. **状态管理**：在大型应用中，可能需要引入状态管理库...
Part4：事件、事件对象、事件委托、拖拽
m0_46403734的博客
02-15 399
一、事件 1.事件及浏览器常用的事件行为 事件是元素天生自带的默认操作行为 =>不论我们是否给其绑定了方法，当我们操作的时候，也会把对应的事件触发 事件绑定是给元素的某个行为绑定一个方法 =>目的是当事件行为触发的时候，可以做一些事情 常用的事件行为： [鼠标事件] * click 点击（移动端click被识别为单击） * dblclick 双击 * mousedown 鼠标按下 * mouseup 鼠标抬起 * mousemove 鼠标移动 *
玩无限消乐的设计示例（基础篇）DataGridView控件添加拖放事件方法和委托
浤济的专栏
07-09 524
给DataGridView控件添加拖放事件方法，预备交换动画元素。         private void 玩无限消乐_DragDrop(object sender, DragEventArgs e)         {             Point 平面二维 = 玩无限消乐.PointToClient(new Point(e.X, e.Y));             玩无限消除
原生js鼠标事件onmousedown、onmousemove、onmouseup实现窗口的拖拽
u010234868的专栏
08-29 1670
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body { margin: 0; } #nav { height: 30px; line-height: 30px; background-color: darkblue; paddin.
如何用JS实现一个简单的拖拽事件
weixin_43938220的博客
03-14 1858
相信各位大佬们在购物的时候，在商品详情页，总能看到下面这种效果，当你把鼠标移到图片上，就会出现一个带有透明度的罩罩跟随着你的鼠标移动 想要实现这个跟随鼠标移动的效果，必须要懂得什么是JS的事件； 咱们先看看这个效果，这个带透明度的罩罩只有在鼠标移入图片的时候才会出现，这就涉及到了一个鼠标移入事件（onmouseover） 先写个基本的布局： <!DOCTYPE html> <...
js中事件绑定3种方法以及事件委托
weixin_42367621的博客
06-02 1289
事件绑定首先，我先来介绍我们平时绑定事件的三种方法。 1.嵌入dom&lt;button onclick="open()"&gt;按钮&lt;/button&gt; &lt;script&gt; function open(){ alert(1) } &lt;/script&gt;12345672.直接绑定&lt;button id="btn"&gt;按钮&lt;/but
JS事件委托(什么情况下使用事件委托)
前端开发-陈善强
12-01 2667
1. 什么是事件委托 事件委托：把事情委托给别人，代为处理。 事件委托也称为事件代理，在 jQuery 里面称为事件委派。 理解：说白了就是，不给子元素注册事件，给父元素注册事件，把处理代码在父元素的事件中执行。 js事件中的委托： <ul> <li>知否知否，应该有弹框在手</li> <li>...
js原生拖拽事件（HTML5的拖放 API）
热门推荐
12-22 3万+
在HTML5之前，如果要实现拖放效果，一般会使用mousedown、mousemove和mouseup三个事件进行组合来模拟出拖拽效果，比较麻烦。而HTML5规范实现了原生拖放功能，使得元素拖放的实现更加方便和高效。 默认情况下，图像、链接和文本是可以拖动的。文本只有在被选中的情况下才能拖动，而图像和链接在任何时候都可以拖动。 HTML5为所有的HTML元素规定了一个draggable属性，表
HTML5 新特性drag API 实现图片拖拽功能（原生JS，Vue， React）
qq_43477721的博客
12-25 2519
拖拽事件 在IE4的时候，Js就可以实现拖放功能了，当时只支持拖放图像和一些文本。后来随着IE版本的更新，拖放事件也在慢慢完善，HTML5就以IE的拖放功能制定了该规范，Firefox 3.5、Safari 3+、chrome以及它们之后的版本都支持了该功能。 默认情况下，网页中的图像、链接和文本是可以拖动的，而其余的元素若想要被拖动，必须将 draggable 属性设置为true，这是HTML5规定的新属性，用于设置元素是否能被拖动。因此，图像、链接、文本的 draggable 属性默认为 true，.
原生js实现拖拽div
最新发布
08-07
### 回答1： 我可以提供一些指引：要实现拖拽div，你首先需要监听div的mousedown，mouseup和mousemove事件。然后记录鼠标的坐标，并通过改变div的CSS left和top属性来实现div的拖拽。 ### 回答2： 原生 JavaScript 可以使用一些事件和方法来实现拖拽 div 的功能。以下是一个简单的示例： 首先，在 HTML 中添加一个可拖拽的 div 元素： ``` <div id="draggableDiv" draggable="true">可拖拽的 div</div> ``` 在 JavaScript 中，我们可以通过监听一些事件来实现拖拽的效果。首先，我们需要监听 div 的 mousedown 事件，当鼠标按下时开始拖拽。然后，我们需要监听鼠标移动事件来更新 div 的位置。最后，在鼠标抬起时停止拖拽。 ``` const draggableDiv = document.getElementById('draggableDiv'); let offsetX, offsetY; draggableDiv.addEventListener('mousedown', (event) => { offsetX = event.clientX - draggableDiv.offsetLeft; offsetY = event.clientY - draggableDiv.offsetTop; document.addEventListener('mousemove', onMouseMove); document.addEventListener('mouseup', onMouseUp); }); function onMouseMove(event) { draggableDiv.style.left = event.clientX - offsetX + 'px'; draggableDiv.style.top = event.clientY - offsetY + 'px'; } function onMouseUp() { document.removeEventListener('mousemove', onMouseMove); document.removeEventListener('mouseup', onMouseUp); } ``` 在上面的代码中，我们通过计算鼠标点击位置与 div 左上角的偏移量，然后通过监听鼠标移动事件来更新 div 的位置。鼠标移动事件会不断触发，从而使得 div 跟随鼠标的移动而移动。最后，当鼠标抬起时，我们需要移除事件监听，停止拖拽。 通过以上代码，我们就可以实现一个简单的原生 JavaScript 拖拽 div 的效果。当鼠标按下 div 并移动时，div 会跟随鼠标的移动而移动，当鼠标抬起时停止拖拽。 ### 回答3： 要实现拖拽div的效果，可以使用原生JavaScript来完成。具体步骤如下： 1. 首先，在HTML中创建一个div元素，并给它设置一个id，用于后续的选择和操作。 ```html <div id="dragDiv">拖拽我</div> ``` 2. 在JavaScript中，创建一个变量来保存当前被拖拽的div元素。 ```javascript var dragElement = document.getElementById("dragDiv"); ``` 3. 添加mousedown事件监听器，当鼠标按下时，开始拖拽。 ```javascript dragElement.addEventListener("mousedown", dragStart); ``` 4. 在dragStart函数中，记录鼠标按下时的初始位置和div元素的初始位置。 ```javascript function dragStart(event) { event.preventDefault(); startX = event.clientX; startY = event.clientY; elementX = dragElement.offsetLeft; elementY = dragElement.offsetTop; document.addEventListener("mousemove", drag); document.addEventListener("mouseup", dragEnd); } ``` 5. 创建drag函数，在该函数中，根据鼠标移动的距离，更新div元素的位置。 ```javascript function drag(event) { var moveX = event.clientX - startX; var moveY = event.clientY - startY; dragElement.style.left = elementX + moveX + "px"; dragElement.style.top = elementY + moveY + "px"; } ``` 6. 创建dragEnd函数，在该函数中，移除鼠标移动和松开事件监听器。 ```javascript function dragEnd() { document.removeEventListener("mousemove", drag); document.removeEventListener("mouseup", dragEnd); } ``` 通过以上步骤，我们就可以实现一个简单的原生JavaScript拖拽div效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值