跟随鼠标指针跑的div拖拽效果

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style>
       #div1 {
           height:100px;
           width:100px;
           background-color:#0094ff;
           position:absolute;
        }
    </style>
</head>
<body>
    <div id="div1"></div>
    <div id="div2"></div>
    <script>
       var  div1 = document.getElementById("div1");
       var  div2 = document.getElementById("div2");
       div1.onmousedown=function(e) {
            var er=e||event;
            var disx=er.offsetX;
            var disy = er.offsetY;
           div1.onmousemove=function(e1) {
                var er1 = e1 || event;
                var x = er1.clientX - disx;
                var y = er1.clientY - disy;

            div1.style.left =  x + "px";
            div1.style.top =  y + "px";
           }
       }
       div1.onmouseup = function () {
           div1.onmousemove = null;
       }
    </script>
</body>
</html>

原文地址:https://www.cnblogs.com/lhl66/p/8868373.html

时间: 2024-07-29 06:27:53

跟随鼠标指针跑的div拖拽效果的相关文章

Ant Design -- 图片可拖拽效果,图片跟随鼠标移动

Ant Design 图片可拖拽效果,图片跟随鼠标移动,需计算鼠标在图片中与图片左上角的X轴的距离和鼠标在图片中与图片左上角的Y轴的距离. constructor(props) { super(props); this.dragDrop = false; // 图片是否被拖动中 this.apartX = 0; // 鼠标在图片中与图片左上角的X轴的距离 this.apartY = 0; //鼠标在图片中与图片左上角的Y轴的距离 this.state = { value: 1, previewV

JS 鼠标事件练习—拖拽效果

拖拽效果 HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>拖拽效果</title> <link rel="stylesheet" type="text/css" href="拖拽效果.css"> </head> <body> <div

Jquery实现div拖拽

Jquery实现div拖拽 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title> New Document </title> <script type="text/javascript"

js实现鼠标的拖拽效果

拖拽效果在我们上网的过程中是很常见的,大家都应该在电脑上面登陆过qq吧,当这个qq的登陆框弹出来的时候,我们是可以进行拖动的.这就是一个拖拽效果 这是我在慕课网上面看到的,我直接拿过来了,地址http://www.imooc.com/learn/60 这个视频讲的蛮好的,一清二楚,不懂的可以去看看. 首先,理清楚一下总体的思路. 第一步:当鼠标按下弹出框某个区域的时候,可以进行拖拽 第二步:弹出框拖拽进行中 第三部:鼠标松开,弹出框拖动到了某个位置. 先上源代码.这个是慕课网的老师提供的 . <

jquery鼠标拖拽效果分享

//html代码部分 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="../js/jquery-1.11.1.js"></script> </head> <style> body

HTML5实现div拖拽

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" con

简单的鼠标拖拽效果(原生js实现)

之前在聊天群里看到有人说面试的时候被问到了怎样实现一个拖拽效果,当时看到后在心里默默思考了下,结果发现好像我也写不出来啊.本着遇到一个解决一个的思想,就亲自敲了一个,看到张鑫旭大神写的代码,真的很厉害,多多学习了,(感觉随便搜一个关于前端方面的问题都能看到他的网站,真是太佩服了,写了那么多文章,十分感谢.)好了,接下来就进入正题了.想实现一个效果首先得明白其中的逻辑,知道了实现逻辑后,就可以码代码了.首先我实现的效果是: 鼠标按下后,才可以执行后续效果 鼠标已经按下,然后鼠标移动,需要拖拽的元素

纯js实现DIV拖拽

写代码的时候遇到需要对绝对布局的div进行拖拽的功能,起初为了省事直接在网上扒拉了一番,看到大神张鑫旭的一篇文章<JavaScript实现最简单的拖拽效果>,便直接拿来使用(膜拜大神).但发现这段代码使用前必须设置top和left样式属性,否则拖动时div会有跳动,而且不支持多个div的拖动.于是对代码大概修改了一番,贴在这里,以备后用,希望大神勿怪. var startDrag = function(bar, target, callback) { (function(bar, target

Html Div 拖拽

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><style type="text/css"&g