javascript事件（三）（实现拖拽）

最新推荐文章于 2020-07-25 10:23:42 发布
最新推荐文章于 2020-07-25 10:23:42 发布
阅读量565 收藏
点赞数
分类专栏： javascript学习 文章标签： 鼠标 移动
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/pleasecallme_522/article/details/58115560
版权

一.拖拽的原理：选择元素时（鼠标按下），保存鼠标的位置和元素位置的差值（以保证鼠标拖住元素移动时相对于元素的位置固定）；移动元素时（鼠标移动），不停地给元素位置赋值（当前鼠标位置减去保存的差值）；释放元素时（鼠标抬起），取消移动事件。

二.可能会遇到的问题
1.若移动速度太快脱离元素时事件就不会执行了；
2.为了避免冒泡，onmousemove事件放在document上就可以了；
3.为了避免当鼠标在其他元素上抬起时元素不会停止运动，故将onmouseup事件也放在document上；
4.鼠标按下时，如果有文字被选中，拖拽会变成复制（浏览器默认行为），这时就会出现冲突，避免该冲突的做法：
A.标准浏览器下：
需要在onmousedown阻止默认行为来防止（非标准浏览器下无效）。
B.IE下：
IE浏览器里有个全局捕获（和事件流里面的捕获不同）。全局捕获的意思是当有其他元素执行一个事件时劫持该事件，在释放元素时需要把全局捕获也释放。

//全局捕获劫持事件
if(元素.setCapture){
    元素.setCapture();
}

...
//释放元素时释放全局捕获
if(元素.releaseCapture){
元素.releaseCapture();
}

这样也可以达到和阻止默认事件一样的效果。

三.封装拖拽（限制范围的拖拽）

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#box{width:100px; height:100px; background-color:red; position:absolute; left:100px; top:100px; z-index:5;}
#box1{width:500px; height:500px; background-color:green; position:absolute; left:100px; top:100px; z-index:3;}
</style>
</head>
<body style="height:2000px;">
<div id="box"></div>
<div id="box1"></div>
<script>
var oDiv = document.getElementById('box');
var oDiv1 = document.getElementById('box1');
downMove(oDiv,oDiv1);


function downMove(ele,ele2){
    ele.onmousedown = function(ev){
        var ev = ev || event;
        if(ele.setCapture){ele.setCapture();}
        var scrollTop =  document.body.scrollTop || document.documentElement.scrollTop;
        var scrollLeft =  document.body.scrollLeft || document.documentElement.scrollLeft;
        var disX = ev.clientX - ele.offsetLeft + scrollLeft;
        var disY = ev.clientY - ele.offsetTop + scrollTop;
        document.onmousemove = function(ev){
            var ev = ev || event;
            var scrollTop =  document.body.scrollTop || document.documentElement.scrollTop;
            var scrollLeft =  document.body.scrollLeft || document.documentElement.scrollLeft;
            var oLeft = ev.clientX - disX + scrollLeft;
            if(oLeft<ele2.offsetLeft){
                oLeft = ele2.offsetLeft;
            }
            if(oLeft>ele2.offsetLeft+ele2.offsetWidth-ele.offsetWidth){
                oLeft = ele2.offsetLeft+ele2.offsetWidth-ele.offsetWidth;
            }
            var oTop = ev.clientY - disY + scrollTop;
            if(oTop<ele2.offsetTop){
                oTop = ele2.offsetTop;
            }
            if(oTop>ele2.offsetTop+ele2.offsetHeight-ele.offsetHeight){
                oTop = ele2.offsetTop+ele2.offsetHeight-ele.offsetHeight;
            }
            ele.style.left = oLeft +'px';
            ele.style.top = oTop + 'px';
        }
        document.onmouseup = function(){
            if(ele.releaseCapture){ele.releaseCapture();}
            document.onmousemove = document.onmouseup = null;
        }
        return false;
    }
}
</script>
</body>
</html>

这里写图片描述

练习1：在上面封装的基础上，做一个磁性吸附效果（当元素距离边界小于50像素时，像磁铁一样一下吸附过去）

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#box{width:100px; height:100px; background-color:red; position:absolute; left:100px; top:100px; z-index:5;}
#box1{width:500px; height:500px; background-color:green; position:absolute; left:100px; top:100px; z-index:3;}
</style>
</head>

<body>
    <div id="box"></div>
    <div id="box1"></div>
    <script>
        var oDiv=document.getElementById("box");
        var oDiv1=document.getElementById("box1");
        downMove(oDiv,oDiv1);
        function downMove(ele,ele2){
            ele.onmousedown = function(ev){
                var ev = ev || event;
                if(ele.setCapture){ele.setCapture();}
                var scrollTop =  document.body.scrollTop || document.documentElement.scrollTop;
                var scrollLeft =  document.body.scrollLeft || document.documentElement.scrollLeft;
                var disX = ev.clientX - ele.offsetLeft + scrollLeft;
                var disY = ev.clientY - ele.offsetTop + scrollTop;
                document.onmousemove = function(ev){
                    var ev = ev || event;
                    var scrollTop =  document.body.scrollTop || document.documentElement.scrollTop;
                    var scrollLeft =  document.body.scrollLeft || document.documentElement.scrollLeft;
                    var oLeft = ev.clientX - disX + scrollLeft;
                    if(oLeft<ele2.offsetLeft+50){
                        oLeft = ele2.offsetLeft;
                    }
                    if(oLeft>ele2.offsetLeft+ele2.offsetWidth-ele.offsetWidth-50){
                        oLeft = ele2.offsetLeft+ele2.offsetWidth-ele.offsetWidth;
                    }
                    var oTop = ev.clientY - disY + scrollTop;
                    if(oTop<ele2.offsetTop+50){
                        oTop = ele2.offsetTop;
                    }
                    if(oTop>ele2.offsetTop+ele2.offsetHeight-ele.offsetHeight-50){
                        oTop = ele2.offsetTop+ele2.offsetHeight-ele.offsetHeight;
                    }
                    ele.style.left = oLeft +'px';
                    ele.style.top = oTop + 'px';
                }
                document.onmouseup = function(){
                    if(ele.releaseCapture){ele.releaseCapture();}
                    document.onmousemove = document.onmouseup = null;
                }
                return false;
            }
        }
    </script>
</body>
</html>

四.拖拽的延伸
1.碰撞检测：就是检查是否有重合（思路：九宫格方式判断）
练习2：做一个方块和图片碰撞时，图片切换成另一张图片，离开时变回。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#box{width:100px; height:100px; background-color:red; position:absolute; left:100px; top:100px; z-index:5;}
#box1{width:500px; height:500px; background-color:green; position:absolute; left:100px; top:100px; z-index:3;}
</style>
</head>

<body style="height:2000px;">
    <div id="box"></div>
    <div id="box1"></div>
    <script>
    var oDiv = document.getElementById('box');
    var oDiv1 = document.getElementById('box1');
    downMove(oDiv,document,oDiv1);
    function downMove(ele,ele2,ele3){
        ele.onmousedown = function(ev){
            var ev = ev || event;
            if(ele.setCapture){ele.setCapture();}
            var scrollTop =  document.body.scrollTop || document.documentElement.scrollTop;
            var scrollLeft =  document.body.scrollLeft || document.documentElement.scrollLeft;
            var disX = ev.clientX - ele.offsetLeft + scrollLeft;
            var disY = ev.clientY - ele.offsetTop + scrollTop;
            document.onmousemove = function(ev){
                var ev = ev || event;
                var scrollTop =  document.body.scrollTop || document.documentElement.scrollTop;
                var scrollLeft =  document.body.scrollLeft || document.documentElement.scrollLeft;
                if(ele2==document){
                    ele2.offsetLeft=scrollLeft;
                    ele2.offsetTop=scrollTop;
                    ele2.offsetWidth=document.documentElement.clientWidth;
                    ele2.offsetHeight=document.documentElement.clientHeight;
                }
                var oLeft = ev.clientX - disX + scrollLeft;
                if(oLeft<ele2.offsetLeft){
                    oLeft = ele2.offsetLeft;
                }
                if(oLeft>ele2.offsetLeft+ele2.offsetWidth-ele.offsetWidth){
                    oLeft = ele2.offsetLeft+ele2.offsetWidth-ele.offsetWidth;
                }
                var oTop = ev.clientY - disY + scrollTop;
                if(oTop<ele2.offsetTop){
                    oTop = ele2.offsetTop;
                }
                if(oTop>ele2.offsetTop+ele2.offsetHeight-ele.offsetHeight){
                    oTop = ele2.offsetTop+ele2.offsetHeight-ele.offsetHeight;
                }
                if(oLeft+ele.offsetWidth>ele3.offsetLeft&&oTop+ele.offsetHeight>ele3.offsetTop&&ele3.offsetLeft+ele3.offsetWidth>oLeft&&ele3.offsetTop+ele3.offsetHeight>oTop){
                //碰撞时背景色变为黄色
                    ele3.style.backgroundColor='yellow';
                }else{
                //离开时背景色变为绿色
                    ele3.style.backgroundColor='green';
                }
                ele.style.left = oLeft +'px';
                ele.style.top = oTop + 'px';
            }
            document.onmouseup = function(){
                if(ele.releaseCapture){ele.releaseCapture();}
                document.onmousemove = document.onmouseup = null;
            }
            return false;
        }
    }
    </script>
</body>
</html>

这里写图片描述

这里写图片描述

2.拖拽改变元素大小
练习3：先找到鼠标按下时，它在元素的什么位置（判断要改变哪个方向），每个方向–上下左右分别为：改变height和top值；改变height；改变width和left值；改变width

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#box{width:100px; height:100px; background-color:red; position:absolute; left:100px; top:100px;}
</style>
</head>

<body>
<div id="box"></div>
<script>
var oDiv = document.getElementById('box');
downMove(oDiv,document);
var oLeft=0;
var oTop=0;
var i=0;
function downMove(ele,ele2){
    ele.onmousedown = function(ev){
        var ev = ev || event;
        if(ele.setCapture){ele.setCapture();}
        var scrollTop =  document.body.scrollTop || document.documentElement.scrollTop;
        var scrollLeft =  document.body.scrollLeft || document.documentElement.scrollLeft;
        var disX = ev.clientX - ele.offsetLeft + scrollLeft;
        var disY = ev.clientY - ele.offsetTop + scrollTop;
        document.onmousemove = function(ev){
            var ev = ev || event;
            var scrollTop =  document.body.scrollTop || document.documentElement.scrollTop;
            var scrollLeft =  document.body.scrollLeft || document.documentElement.scrollLeft;
            if(ele2==document){
                ele2.offsetLeft=scrollLeft;
                ele2.offsetTop=scrollTop;
                ele2.offsetWidth=document.documentElement.clientWidth;
                ele2.offsetHeight=document.documentElement.clientHeight;
            }
            i++;
            var oLeft1=oLeft;
            oLeft = ev.clientX - disX + scrollLeft;
            if(oLeft<ele2.offsetLeft){
                oLeft = ele2.offsetLeft;
            }
            if(oLeft>ele2.offsetLeft+ele2.offsetWidth-ele.offsetWidth){
                oLeft = ele2.offsetLeft+ele2.offsetWidth-ele.offsetWidth;
            }

            var oTop1=oTop;
            oTop = ev.clientY - disY + scrollTop;
            if(oTop<ele2.offsetTop){
                oTop = ele2.offsetTop;
            }
            if(oTop>ele2.offsetTop+ele2.offsetHeight-ele.offsetHeight){
                oTop = ele2.offsetTop+ele2.offsetHeight-ele.offsetHeight;
            }
            ele.style.left = oLeft +'px';
            ele.style.top = oTop + 'px';
            if((disX>0&&disX<20)&&(disY>20&&disY<ele.offsetHeight-20)){
                if(oLeft1<oLeft){
                    ele.style.width=ele.offsetWidth+3+'px';
                }else if(oLeft1>oLeft){
                    ele.style.width=ele.offsetWidth-3+'px';
                }
            }
            if(((disX>ele.offsetWidth-20*i)&&(disX<ele.offsetWidth))&&(disY>20&&disY<ele.offsetHeight-20)){
                if(oLeft1<oLeft){
                    ele.style.width=ele.offsetWidth+3+'px';
                }else if(oLeft1>oLeft){
                    ele.style.width=ele.offsetWidth-3+'px';
                }
            }
            if((disY>0&&disY<20)&&(disX>20&&disX<ele.offsetWidth-20)){
                if(oTop1<oTop){
                    ele.style.height=ele.offsetHeight+3+'px';
                }else if(oTop1>oTop){
                    ele.style.height=ele.offsetHeight-3+'px';
                }
            }
            if((disY>ele.offsetHeight-20*i&&disY<ele.offsetHeight)&&(disX>20&&disX<ele.offsetWidth-20)){
                if(oTop1<oTop){
                    ele.style.height=ele.offsetHeight+3+'px';
                }else if(oTop1>oTop){
                    ele.style.height=ele.offsetHeight-3+'px';
                }
            }
        }
        document.onmouseup = function(){
            if(ele.releaseCapture){ele.releaseCapture();}
            document.onmousemove = document.onmouseup = null;
        }
        return false;
    }
}
</script>
</body>
</html>

3.模拟滚动条：定义一个元素在另一个元素里拖拽，只需要一个方向移动。原理：内部元素的top和两个元素高度差的比例，等于当前要控制的滚动条scrollTop和整个页面高度的比例

练习4：做一个限制范围的模拟滚动条

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#box{width:20px; height:50px; background-color:red; position:absolute; left:100px; top:100px; z-index:5;}
#box1{width:20px; height:500px; background-color:green; position:absolute; left:100px; top:100px; z-index:3;}
</style>
</head>
<body style="height:2000px;">
<div id="box"></div>
<div id="box1"></div>
<script>
var oDiv = document.getElementById('box');
var oDiv1 = document.getElementById('box1');
downMove(oDiv,oDiv1,0);


function downMove(ele,ele2,adsorb){
    ele.onmousedown = function(ev){
        var ev = ev || event;
        if(ele.setCapture){ele.setCapture();}
        var scrollTop =  document.body.scrollTop || document.documentElement.scrollTop;
        var disY = ev.clientY - ele.offsetTop + scrollTop;
        document.onmousemove = function(ev){
            var ev = ev || event;
            var scrollTop =  document.body.scrollTop || document.documentElement.scrollTop;
            var  eleTop  = eleHeight = null;
            if(ele2 == 'allWindow'){
                eleTop = scrollTop;
                eleHeight = document.documentElement.clientHeight;
            }else{
                eleTop = ele2.offsetTop;
                eleHeight = ele2.offsetHeight;
            }
            var oTop = ev.clientY - disY + scrollTop;
            if(oTop<eleTop +adsorb){
                oTop = eleTop;
            }
            if(oTop>eleTop+eleHeight-ele.offsetHeight -adsorb){
                oTop = eleTop+eleHeight-ele.offsetHeight;
            }
            ele.style.top = oTop + 'px';
        }
        document.onmouseup = function(){
            if(ele.releaseCapture){ele.releaseCapture();}
            document.onmousemove = document.onmouseup = null;
        }
        return false;
    }
}

</script>
</body>
</html>

这里写图片描述

练习5：做一个滚动条下拉一个元素高度跟着改变，直到元素高度等滚动条高度

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#box{width:20px; height:60px; background-color:red; position:absolute; left:500px; top:100px; z-index:5;}
#box1{width:20px; height:1000px; background-color:green; position:absolute; left:500px; top:100px; z-index:3;}
#box2{width:100px;background-color:pink;position:absolute;top:100px; left:540px; }
</style>
</head>

<body>
<body style="height:2000px;">
<div id="box"></div>
<div id="box1"></div>
<div id="box2"></div>
<script>
var oDiv = document.getElementById('box');
var oDiv1 = document.getElementById('box1');
var oDiv2 = document.getElementById('box2');
downMove(oDiv,oDiv1,oDiv2);


function downMove(ele,ele2,ele3){
    ele.onmousedown = function(ev){
        var ev = ev || event;
        if(ele.setCapture){ele.setCapture();}
        var scrollTop =  document.body.scrollTop || document.documentElement.scrollTop;
        var scrollLeft =  document.body.scrollLeft || document.documentElement.scrollLeft;
        var disX = ev.clientX - ele.offsetLeft + scrollLeft;
        var disY = ev.clientY - ele.offsetTop + scrollTop;
        document.onmousemove = function(ev){
            var ev = ev || event;
            var scrollTop =  document.body.scrollTop || document.documentElement.scrollTop;
            var scrollLeft =  document.body.scrollLeft || document.documentElement.scrollLeft;
            var oTop = ev.clientY - disY + scrollTop;
            if(oTop<ele2.offsetTop){
                oTop = ele2.offsetTop;
            }
            if(oTop>ele2.offsetTop+ele2.offsetHeight-ele.offsetHeight){
                oTop = ele2.offsetTop+ele2.offsetHeight-ele.offsetHeight;
            }
            ele3.style.height=(ele.offsetTop-ele2.offsetTop)*ele2.offsetHeight/(ele2.offsetHeight-ele.offsetHeight) + 'px';
            ele.style.top = oTop + 'px';
        }
        document.onmouseup = function(){
            if(ele.releaseCapture){ele.releaseCapture();}
            document.onmousemove = document.onmouseup = null;
        }
        return false;
    }
}
</script>
</body>
</html>

这里写图片描述

这里写图片描述

pleasecallme_522
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js拖拽事件
xhsvwf的博客
06-20 702
首先我们创建一个div标签，给div标签一个id，后面写js时要用到；再在style里面写上它的样式 在浏览器内打开是这个样子 然后就是js部分的内容，我们先声明一个变量 btn 来获取div里面的id，从而绑定之后的事件。 拖拽要用到三个事件，分别为onmousedown，onmousemove,onmouseup。下面是这三个事件的定义和功能 我们先写一个onmousedown的方法，该方法是鼠标按下时才能触发。再在该方法里面获取...
从零开始学JavaScript——JS拖拽三大事件
m0_46186102的博客
12-01 1651
说到拖拽，我们要知道的三大事件 onmousedown（鼠标按下选择元素） onmousemove（按住鼠标移动元素） onmousedown(鼠标松开释放元素) 接下来我们来看一个小案例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
拖拽事件_3
didengjie0816的博客
05-09 88
1 *{margin: 0;padding: 0;} 2 li{list-style: none; 3 width: 100px; 4 height: 30px; 5 margin: 10px; 6 background-color: red; 7 text-align: center; 8 } 9 div{ 10 ...
拖拽的几个事件。
weixin_30952103的博客
01-15 374
dragShopStart: function (item) { console.log(item) this.dropData = item //获取拖传过来的对象 }, // 拖动结束 dragShopOver: function (event) { event.preventDefault() }, //获取传过来的URLcode ...
实现简单的元素拖拽事件
Callback_heaven
03-08 1363
通过clientX,clientY,offsetX,offsetY简单实现，代码如下：&lt;style type="text/css"&gt; .d1{ position:fixed; border:1px solid #000; width:100px; height:100px; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &l...
JavaScript实现拖拽盒子效果
11-21
本实例展示了如何通过JavaScript实现以下功能： 1. 单击“关闭”按钮关闭盒子。 2. 点击左上方的“点击注册”打开盒子。 3. 鼠标悬停在盒子上方蓝色区域时显示十字光标。 4. 点击并按住鼠标可移动盒子。 5. 松开...
javascript实现文件拖拽事件
11-30
在给定的标题和描述中，我们看到的是一个简单的JavaScript实现文件拖放事件的例子。接下来，我们将深入讨论如何实现这个功能，并解释相关的HTML、CSS和JavaScript知识点。 首先，我们需要一个HTML结构来承载拖放...
使用javaScript实现鼠标拖拽事件
10-19
**描述**: "主要为大家详细介绍了使用javaScript实现鼠标拖拽事件的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下" 这段描述告诉我们文章内容是详细讲解如何使用JavaScript来实现鼠标拖拽事件，并且...
javascript实现漂亮的拖动层，窗口拖拽特效
10-24
知识点二：JavaScript实现拖拽效果 在实现弹出层的拖拽效果方面，关键在于监听鼠标的按下（mousedown）、移动（mousemove）和释放（mouseup）事件，并在这些事件中计算鼠标指针和弹出层元素的相对位置，从而改变弹出...
实现拖拽
Charlene_lx的博客
05-09 337
draggable="true"属性设置为true,即可以拖拽. 通过在拖动dom上设置οndragstart="drag(event)"属性方法,在方法中进行ev.dataTransfer.setData(“Text”,ev.target.id);储存. 在释放目标上设置οndrοp=“drop(event)” 属性方法,通过dataTransfer.getData("Text")进行获...
拖放事件原理及实现详解
fatansitic的博客
07-18 3089
移动端现在正是发展高潮期，一说到移动端就会想到的前端技术就是H5啦，它就像一种时尚潮流，now是它的主场，就任性地带着移动端头也不回地走向最高峰~ 最近再写一个简单的图片拖拽上传，所以就给大家说下这个拖拽。 先分析一哈拖拽整个过程，方便大家理解哈，在拖拽某元素时，会依次触发以下事件： dragstart drag dragend ps:在选中被拖动元素时，开始移动鼠标时，会触发drag
js实现拖拽事件
lizhengxv的博客
03-20 1万+
HTML &lt;body&gt; &lt;div&gt;&lt;/div&gt; &lt;/body&gt; CSS div{ position: absolute; width: 200px; height: 200px; background: #369 } JS window....
用鼠标事件实现拖拽
景洪的博客
08-27 5513
首先复习一下鼠标事件：click: 在用户单击主鼠标按钮，或者按下回车键时触发。 mousedown：用户按下任意鼠标按钮时触发，不能通过键盘触发； mouseenter：在鼠标光标从元素外部首次移动到元素范围之内时触发。 mouseleave： 在鼠标光标移动到元素范围之外时触发 mousemove：当鼠标指针在元素内部移动时重复地触发，不能通过键盘事件触发这个事件； mouseout：
javascript实现简单拖曳功能
王工头的博客
01-29 458
欢迎访问我的博客，祝码农同胞们早日走上人生巅峰，迎娶白富美~~~ 相比大家对这一类场景很熟悉，QQ登陆面板跟着鼠标的拖动，鼠标到哪它到哪，飞机大战小游戏里，鼠标或者手指到哪，飞机到哪，这一类场景用的很多，那么下面来简单实现一下： 思路： 在鼠标移动的时候，计算鼠标位置 给盒子一个绝对定位，将鼠标位置赋值给盒子 HTML 结构 &amp;amp;amp;amp;lt;!DOCTYPE HTML&amp;amp;amp;amp;gt; &am
论实现拖拽的几种方法
qq_35046943的博客
02-08 536
实现拖拽效果主要跟鼠标的三个事件有关：　　　　 　　　　onmousedown : 选择要拖拽的元素 　　　　onmousemove : 移动元素 　　　　onmouseup : 释放元素 　　　　三个事件的关系： obj.onmousedown = function(ev){ var ev = ev||event; var disX = ev.clientX - this.offsetLeft;...
HTML5中鼠标拖拽的事件需要的属性
恬静的男子的博客
11-11 1468
draggable:拖拽的属性 在拖动目标上触发事件 (源元素): ondragstart - 用户开始拖动元素时触发 ondrag - 元素正在拖动时触发 ondragend - 用户完成元素拖动后触发 释放目标时触发的事件: ondragenter - 当被鼠标拖动的对象进入其容器范围内时触发此事件 ondragover - 当某被拖动的对象在另一对象容器范围内拖动时触发此事件 ondragl...
关于JavaScript元素拖拽的一个简单的例子
程序猿
07-13 179
最近再做一个项目，用到了javascript中的拖拽，本来就对javascript中的事件不是特别熟悉，对于拖拽更是一知半解，现在在网上找到了一个简单的拖拽的例子，觉得很不错，先摘录下来，希望对对拖拽同样有困惑的朋友们有所帮助。 1.定义一个被拖拽的对象: 这里面有个属性draggable="true",表示这个img元素允许被拖拽到其他地方。ondr...
使用js中常用的鼠标事件实现一个拖拽的例子
热门推荐
kellywong的博客
06-20 1万+
一、js中常用的几个必备鼠标事件 onclick: 元素上发生鼠标点击时触发. ondblclick: 元素上发生鼠标双击时触发. onmousedown: 当元素上按下鼠标按钮时触发. onmouseup: 当在元素上释放鼠标按钮时触发. onmouseout: 当鼠标指针移出元素时触发. onmousemove: 当鼠标指针移动到元素上时触发. onmouseover: 当鼠标指针移动到元素上时
JS基础练习题及答案（三）
Hi_Eleven的博客
07-25 1万+
1.下列哪些属性不是事件对象event的属性 A clientX B offsetX C offsetLeft D target 正确答案: C 解析: offsetLeft为元素针对offsetParent的水平坐标，并不是事件对象中的鼠标位置 2.下列关于事件委托说法错误的是 A 事件委托可以解决事件绑定程序过多的问题 B 事件委托利用了事件捕获原理 C 事件委托可以提高代码性能 D 事件委托可以应用在click,onmousedown事件中 正确答案: B 解析: 事件委托利用的是事件冒泡的原理 3.
JavaScript实现对象拖动事件及其处理
在JavaScript中，对象拖动事件是一种重要的用户交互机制，用于实现元素的拖放功能。本文主要探讨了两种拖放方法：系统拖放和模拟拖放。微软为IE浏览器提供了两类拖放事件，分别是拖放项事件（ondrag、ondragend和...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值