正文

js实现鼠标的拖拽效果

阿柴  2022-02-13  364

关键词：

拖拽效果在我们上网的过程中是很常见的，大家都应该在电脑上面登陆过qq吧，当这个qq的登陆框弹出来的时候，我们是可以进行拖动的。这就是一个拖拽效果

这是我在慕课网上面看到的，我直接拿过来了，地址 http://www.imooc.com/learn/60

这个视频讲的蛮好的，一清二楚，不懂的可以去看看。

首先，理清楚一下总体的思路。

第一步：当鼠标按下弹出框某个区域的时候，可以进行拖拽

第二步：弹出框拖拽进行中

第三部：鼠标松开，弹出框拖动到了某个位置。

先上源代码。这个是慕课网的老师提供的。

<!DOCTYPE html>
<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>拖拽效果</title>

<style type="text/css">

    body{background: url(images/baidu_demo.png) #fff top center no-repeat;padding: 0px;margin: 0px;font-size: 12px;font-family: "微软雅黑";}

    .link{text-align: right;line-height: 20px;padding-right: 40px;}

    .ui-dialog{
        width: 380px;height: auto;display: none;
        position: absolute;z-index: 9000;
        top: 0px;left: 0px;
        border: 1px solid #D5D5D5;background: #fff;
    }

    .ui-dialog a{text-decoration: none;}

    .ui-dialog-title{
        height: 48px;line-height: 48px; padding:0px 20px;color: #535353;font-size: 16px;
        border-bottom: 1px solid #efefef;background: #f5f5f5;
        cursor: move;
        user-select:none;
    }
    .ui-dialog-closebutton{
        width: 16px;height: 16px;display: block;
        position: absolute;top: 12px;right: 20px;
        background: url(images/close_def.png) no-repeat;cursor: pointer;

    }
    .ui-dialog-closebutton:hover{background:url(images/close_hov.png);}

    .ui-dialog-content{
        padding: 15px 20px;
    }
    .ui-dialog-pt15{
        padding-top: 15px;
    }
    .ui-dialog-l40{
        height: 40px;line-height: 40px;
        text-align: right;
    }

    .ui-dialog-input{
        width: 100%;height: 40px;
        margin: 0px;padding:0px;
        border: 1px solid #d5d5d5;
        font-size: 16px;color: #c1c1c1;
        text-indent: 25px;
        outline: none;
    }
    .ui-dialog-input-username{
        background: url(images/input_username.png) no-repeat 2px ;
    }

    .ui-dialog-input-password{
        background: url(images/input_password.png) no-repeat 2px ;
    }
    .ui-dialog-submit{
        width: 100%;height: 50px;background: #3b7ae3;border:none;font-size: 16px;color: #fff;
        outline: none;text-decoration: none;
        display: block;text-align: center;line-height: 50px;
    }
    .ui-dialog-submit:hover{
        background: #3f81b0;
    }

    .ui-mask{
        width: 100%;height:100%;background: #000;
        position: absolute;top: 0px;height: 0px;z-index: 8000;
        opacity:0.4; filter: Alpha(opacity=40);
    }
</style>
</head>
<body >

<div class="link">
    <a href="javascript:showDialog();">登录</a>
</div>
<div class="ui-mask" id="mask" onselectstart="return false"></div>

<div class="ui-dialog" id="dialogMove" onselectstart=‘return false;‘>
    <div class="ui-dialog-title" id="dialogDrag"  onselectstart="return false;" >

        登录通行证

        <a class="ui-dialog-closebutton" href="javascript:hideDialog();"></a>

    </div>
    <div class="ui-dialog-content">
        <div class="ui-dialog-l40 ui-dialog-pt15">
            <input class="ui-dialog-input ui-dialog-input-username" type="input" value="手机/邮箱/用户名" />
        </div>
        <div class="ui-dialog-l40 ui-dialog-pt15">
            <input class="ui-dialog-input ui-dialog-input-password" type="input" value="密码" />
        </div>
        <div class="ui-dialog-l40">
            <a href="#">忘记密码</a>
        </div>
        <div>
            <a class="ui-dialog-submit" href="#" >登录</a>
        </div>
        <div class="ui-dialog-l40">
            <a href="#">立即注册</a>
        </div>
    </div>
</div>


<script type="text/javascript">

    var dialogInstace , onMoveStartId , mousePos = {x:0,y:0};    //    用于记录当前可拖拽的对象

    // var zIndex = 9000;

    //    获取元素对象
    function g(id){return document.getElementById(id);}

    //    自动居中元素（el = Element）
    function autoCenter( el ){
        var bodyW = document.documentElement.clientWidth;
        var bodyH = document.documentElement.clientHeight;

        var elW = el.offsetWidth;
        var elH = el.offsetHeight;

        el.style.left = (bodyW-elW)/2 + ‘px‘;
        el.style.top = (bodyH-elH)/2 + ‘px‘;

    }

    //    自动扩展元素到全部显示区域
    function fillToBody( el ){
        el.style.width  = document.documentElement.clientWidth  +‘px‘;
        el.style.height = document.documentElement.clientHeight + ‘px‘;
    }

    //    Dialog实例化的方法
    function Dialog( dragId , moveId ){

        var instace = {} ;

        instace.dragElement  = g(dragId);    //    允许执行 拖拽操作 的元素
        instace.moveElement  = g(moveId);    //    拖拽操作时，移动的元素

        instace.mouseOffsetLeft = 0;            //    拖拽操作时，移动元素的起始 X 点
        instace.mouseOffsetTop = 0;            //    拖拽操作时，移动元素的起始 Y 点

        instace.dragElement.addEventListener(‘mousedown‘,function(e){

            var e = e || window.event;

            dialogInstace = instace;
            instace.mouseOffsetLeft = e.pageX - instace.moveElement.offsetLeft ;
            instace.mouseOffsetTop  = e.pageY - instace.moveElement.offsetTop ;

            onMoveStartId = setInterval(onMoveStart,10);
            return false;
            // instace.moveElement.style.zIndex = zIndex ++;
        })

        return instace;
    }

    //    在页面中侦听 鼠标弹起事件
    document.onmouseup = function(e){
        dialogInstace = false;
        clearInterval(onMoveStartId);
    }
    document.onmousemove = function( e ){
        var e = window.event || e;
        mousePos.x = e.clientX;
        mousePos.y = e.clientY;


        e.stopPropagation && e.stopPropagation();
        e.cancelBubble = true;
        e = this.originalEvent;
        e && ( e.preventDefault ? e.preventDefault() : e.returnValue = false );

        document.body.style.MozUserSelect = ‘none‘;
    }

    function onMoveStart(){


        var instace = dialogInstace;
        if (instace) {

            var maxX = document.documentElement.clientWidth -  instace.moveElement.offsetWidth;
            var maxY = document.documentElement.clientHeight - instace.moveElement.offsetHeight ;

            instace.moveElement.style.left = Math.min( Math.max( ( mousePos.x - instace.mouseOffsetLeft) , 0 ) , maxX) + "px";
            instace.moveElement.style.top  = Math.min( Math.max( ( mousePos.y - instace.mouseOffsetTop ) , 0 ) , maxY) + "px";

        }

    }



    //    重新调整对话框的位置和遮罩，并且展现
    function showDialog(){
        g(‘dialogMove‘).style.display = ‘block‘;
        g(‘mask‘).style.display = ‘block‘;
        autoCenter( g(‘dialogMove‘) );
        fillToBody( g(‘mask‘) );
    }

    //    关闭对话框
    function hideDialog(){
        g(‘dialogMove‘).style.display = ‘none‘;
        g(‘mask‘).style.display = ‘none‘;
    }

    //    侦听浏览器窗口大小变化
    window.onresize = showDialog;

    Dialog(‘dialogDrag‘,‘dialogMove‘);
    showDialog();

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

看看js代码

1）获取元素对象

 function g(id){return document.getElementById(id);}

这个很简单，就是一个对 document.getElementById方法的封装，用来获取页面的元素

2）自动居中元素

function autoCenter( el ){
        var bodyW = document.documentElement.clientWidth;
        var bodyH = document.documentElement.clientHeight;

        var elW = el.offsetWidth;
        var elH = el.offsetHeight;

        el.style.left = (bodyW-elW)/2 + ‘px‘;
        el.style.top = (bodyH-elH)/2 + ‘px‘;

    }

这里有一个document.documentElement.clientWidth 和 el.offsetWidth ，这两个是什么宽度？

这里也有一个视频。可以去看看，讲的蛮仔细的 http://www.imooc.com/learn/608 这个老师的风格有点奇葩，做好心理准备

原生js实现弹出窗口的拖拽（直接copy可用）

　　上一篇说了一下弹出窗口功能的实现思路，一般情况下紧接着就会需要做到弹窗的移动，当然现在有很插件、库比如hammer可以使用，效率也非常好。但我觉得还是有必要了解一下原生JS的实现思路及方式，如下：　　思路：... 查看详情

ui组件之浮出层的拖拽

...题，不过最后也解决了，这里也总结一下。首先，我们要实现的效果是浮出层在鼠标点击之后随着鼠标移动，松开之后停止移动，并且边框不得超出边界。网上很多教程已经说得很清楚了，这里就再啰嗦两句，这个过程总共分查看详情

js简易拖拽效果

原理：注册mousemove事件，使元素跟随鼠标挪动；注册mouseup事件，移除mousemove事件，使得松开鼠标时元素不再跟随移动，能够固定在指定位置。在mousedown事件中注册mousemove事件和mouseup事件，这样便可完成一次完整的拖拽。重... 查看详情

js—实现拖拽

JS中的拖拽示例: 1)实现拖拽思路:当鼠标按下和拖拽过程中,鼠标与拖拽物体之间的相对距离保持不变 2)实现拖拽遇到的问题: 问题1:当鼠标按下移动过快时,离开了拖拽的物体时,... 查看详情

javascript实现最简单的拖拽效果

一、一些无关痛痒的唠叨拖拽还是挺不错的一个页面效果，我个人认为，其生命力在于可以让用户自己做一些操作，所谓自定义。例如：①浏览器标签顺序的拖拽切换现在基本上所有的选项卡式的浏览器都有顺序拖拽切换的功能... 查看详情

javascript小实例，pc网页里的拖拽（转）

...楼栋号，也跟着图片一起移动，当时js能力还不行，未能实现项目经理的要求，不过后来项目经理又把这个效果推掉了，换了另外的一个效果尽管项目经理不想要这个效果了，但是当时就在我心里留下了一个节，到今天都忘不了... 查看详情

canvasn拖拽效果

...s拖拽是有区别的普通的js是设置目标为绝对定位，再根据鼠标的移动来改变left和top的值canvas是获得了鼠标的位置，直接在目标点进行重新绘制下面给一个简单的拖拽代码<canvasid="can"width="400"height="400"></canvas><scripttype="t... 查看详情

js实现登陆页面的拖拽功能

<!DOCTYPEhtml><html> <head> <metacharset="UTF-8"> <title>登陆页面的拖拽功能实现</title> </head> <styletype="text/css"> *{ margin:0; padding:0; } a{ text-d 查看详情

three.js如何实现在x,y,z轴上的拖拽

...谢谢就是类似于3Dmax里的那种模型的拖拽参考技术ATHREE.js实现在x,y,z轴上的拖拽需要用户注册拖拽控件。1、注册的js代码如下：varscript=document.createElement('script'); script.type='text/javascript'; &nb... 查看详情

通过js实现简单的拖拽功能并且可以在特定元素上禁止拖拽

...处理这些细节，经过翻阅jqueryui的源码才找到答案。拖拽实现关于拖拽功能不再啰嗦，直接贴代码/***[draggable拖拽方法]*@param{[type]}modal[移动元素]*@param 查看详情

基于h5实现的react拖拽排序组件(代码片段)

...果要求兼容性丰富，使用鼠标点击的相关事件也很简单。实现的效果如下：第一步是先了解H5拖放的相关属性，MDN上有详细的说明，链接为https://developer.mozilla.org...有一点需要注意的是，react.js会给所有的属性事件名称前加上"on",... 查看详情

game面板实现鼠标拖拽物体

大家都知道在Unity场景面板（Scene面板）可以实现拖拽物体。具体操作步骤是变换工具栏选择“手”的拖拽工具（或者快捷键“Q”）之后，直接用鼠标左键按住竟可以实现拖拽物体。当然这样的效果实际上并不是实现了拖拽物体... 查看详情

（原创）[c#]一步一步自定义拖拽（drag&drop）时的鼠标效果：基本原理及基本实现

...拖拽效果。所以，我们就通过这一系列文章，来一步一步实现自己的查看详情

cookie结合js实现记住的拖拽

哈喽!!!我胡汉三又回来啦!!!有木有记挂挪啊!咱们今天说一个cookie结合JS的小案例哦!话不多说直接上代码:<!DOCTYPEhtml><html> <head> <metacharset="UTF-8"> <title></title> <style> #drag{ width:200px; 查看详情

pyqt5学习记录---监听鼠标拖拽事件实现mac上百度云盘拖拽效果(代码片段)

...醒了操作者。本文介绍用PyQt5监听鼠标的拖拽事件，实现一个类似的效果，当拖拽时动态的改变整个界面边框颜色.下面先上源码，共两个文件。一个是入口的main.py文件，一个是自己写的MainWidget.源码widgets.py# 查看详情

原生拖拽,拖放事件(draganddrop)

参考技术A拖拽,拖放事件可以通过拖拽实现数据传递,达到良好的交互效果,如:从操作系统拖拽文件实现文件选择,拖拽实现元素布局的修改.一个完整的draganddrop流程通常包含以下几个步骤:1.设置可拖拽目标.设置属性draggable="true"实... 查看详情

原来这样可以实现鼠标拖拽(代码片段)

...一下这两个属性，发现居原来还可以用来做简单的拖拽。实现原理与放大镜那里一样，改变left与top的数值让div移动。 1#box2width:100px;3height:100px;4border:1pxsolidred;5background:rgba(24,41,2 查看详情

简单实现svg的拖拽和缩放

...，来控制svg（正方形）刚好在父元素内，radio是缩放比例实现方式是<fontcolor=\'red\'>重绘</font>，所以元素太多会造成卡顿。一、拖拽我们来分析拖拽的过程，鼠标按下---->鼠标移动------>松开鼠标。对应的事件分别是mo... 查看详情