代码参考

<!DOCTYPE html>

<html lang="en">

<title>拖拽</title>

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        #dog {

            width: 150px;

            height: 150px;

            background: red;

            position: fixed;

        }

    </style>

</head>

<body>

    <div id="dog"></div>

</body>

</html>

 <script>

 utils = {

    dragMov:function(dom){

        dom.style.cursor = 'move';

        dom.onmousedown = function (ev) {

                var oEvent = ev || event;

                var gapX = oEvent.clientX - dom.offsetLeft;

                var gapY = oEvent.clientY - dom.offsetTop;

                document.onmousemove = function (ev) {

                    var oEvent = ev || event;

                    //限制在可视区域内运动

                    var l = oEvent.clientX - gapX;

                    var t = oEvent.clientY - gapY;

                    var r = document.documentElement.clientWidth - dom.offsetWidth;

                    var b = document.documentElement.clientHeight - dom.offsetHeight;

                    if (l < 0) {

                        dom.style.left = 0 + "px";

                    } else if (l > r) {

                        dom.style.left = r + "px";

                    } else {

                        dom.style.left = l + "px";

                    }

                    if (t < 0) {

                        dom.style.top = 0 + "px";

                    } else if (t > b) {

                        dom.style.top = b + "px";

                    } else {

                        dom.style.top = t + "px";

                    }

                }

            }

        dom.onmouseup = function () {

            document.onmousemove = null;

            document.onmouseup = null;

        }

    }

 }

 utils.dragMov(document.getElementById('dog'));

</script>

另外一个（转）

<!DOCTYPE html>

<html>

    <head>

        <title>Test</title>

        <style type="text/css" >

            html,body

            {

                height:100%;

                width:100%;

                padding:0;

                margin:0;

            }

            .dialog

            {

                width:250px;

                height:250px;

                position:absolute;

                background-color:#ccc;

                -webkit-box-shadow:1px 1px 3px #292929;

                -moz-box-shadow:1px 1px 3px #292929;

                box-shadow:1px 1px 3px #292929;

                margin:10px;

            }

            .dialog-title

            {

                color:#fff;

                background-color:#404040;

                font-size:12pt;

                font-weight:bold;

                padding:4px 6px;

                cursor:move;

            }

            .dialog-content

            {

                padding:4px;

            }

        </style>

    </head>

    <body>

        <div id="dlgTest" class="dialog">

            <div class="dialog-title">Dialog</div>

            <div class="dialog-content">

                This is a draggable test.

            </div>

        </div>

        <script type="text/javascript">

            var Dragging=function(dom){ //参数为验证点击区域是否为可移动区域，如果是返回欲移动元素，负责返回null

                var draggingObj=null; //dragging Dialog

                var diffX=0;

                var diffY=0;

                function mouseHandler(e){

                    switch(e.type){

                        case 'mousedown':

                            draggingObj=dom;//验证是否为可点击移动区域

                            if(draggingObj!=null){

                                diffX=e.clientX-draggingObj.offsetLeft;

                                diffY=e.clientY-draggingObj.offsetTop;

                            }

                            break;

                        case 'mousemove':

                            if(draggingObj){

                                draggingObj.style.left=(e.clientX-diffX)+'px';

                                draggingObj.style.top=(e.clientY-diffY)+'px';

                            }

                            break;

                        case 'mouseup':

                            draggingObj =null;

                            diffX=0;

                            diffY=0;

                            break;

                    }

                };

                return {

                    enable:function(){

                        document.addEventListener('mousedown',mouseHandler);

                        document.addEventListener('mousemove',mouseHandler);

                        document.addEventListener('mouseup',mouseHandler);

                    },

                    disable:function(){

                        document.removeEventListener('mousedown',mouseHandler);

                        document.removeEventListener('mousemove',mouseHandler);

                        document.removeEventListener('mouseup',mouseHandler);

                    }

                }

            }

            Dragging(document.querySelector('#dlgTest')).enable();

        </script>

    </body>

</html>

js 拖拽实现的更多相关文章

  1. 再谈React.js实现原生js拖拽效果

    前几天写的那个拖拽,自己留下的疑问...这次在热心博友的提示下又修正了一些小小的bug,也加了拖拽的边缘检测部分...就再聊聊拖拽吧 一.不要直接操作dom元素 react中使用了虚拟dom的概念,目 ...

  2. React.js实现原生js拖拽效果及思考

    一.起因&思路 不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖 ...

  3. js拖拽效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. 关于 JS 拖拽功能的冲突问题及解决方法

    前言 我在之前写过关于 JS 拖拽的文章,实现方式和网上能搜到的方法大致相同,别无二致,但是在一次偶然的测试中发现,这种绑定事件的方式可能会和其它的拖拽事件产生冲突,由此产生了对于事件绑定的思考.本文 ...

  5. js拖拽分析

    js拖拽分析 思路 1.三个鼠标事件,mousedown,mousemove,mouseup 2.可移动性absolute 3.边界限制 得到鼠标点击处和div边界的距离,然后得出top 和 left ...

  6. JS拖拽div（移动）

    <!doctype html><html><head> <meta charset="utf-8"> <title>JS ...

  7. 浅谈js拖拽

    本文来自网易云社区 作者:刘凌阳 前言 本文依据半年前本人的分享<浅谈js拖拽>撰写,算是一篇迟到的文章. 基本思路 虽然现在关于拖拽的组件库到处都是,HTML5也把拖放纳入了标准.但考虑 ...

  8. 一步一步实现JS拖拽插件

    js拖拽是常见的网页效果,本文将从零开始实现一个简单的js插件. 一.js拖拽插件的原理 常见的拖拽操作是什么样的呢?整过过程大概有下面几个步骤: 1.用鼠标点击被拖拽的元素 2.按住鼠标不放,移动鼠 ...

  9. 原生js拖拽、jQuery拖拽、vue自定义指令拖拽

    原生js拖拽: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  10. 原生js拖拽功能制作滑动条实例教程

    拖拽属于前端常见的功能,很多效果都会用到js的拖拽功能.滑动条的核心功能也就是使用js拖拽滑块来修改位置.一个完整的滑动条包括 滑动条.滑动痕迹.滑块.文本 等元素,先把html代码写出来,如下所示: ...

随机推荐

  1. Python 相机镜头

    一哥第一卷感叹,这家奥地利~.这是什么g8事件,近盲目安装3g的OpenCV,结果徒劳. . . 入题.!环境Python2.7 严厉格按照什么步骤.必成功: 所需的软件如下面: VideoCaptu ...

  2. Mac周边环境 goBASIC语言HelloWorld

    1. 安装mercurial Mercurial 是一种轻量级分布式版本号控制系统,採用 Python 语言实现 能够输入hg命令查询系统是否安装mercurial,能够例如以下两种命令安装 $sud ...

  3. oracle数据库全然恢复和不全然恢复以及运行用户管理辈分恢复

    比較全然恢复和不全然恢复: 一.全然恢复:将数据库恢复到当前最新状态,包含直至请求恢复时进行的全部已提交的数据更改 二.不全然恢复:将数据库恢复到请求恢复操作之前指定的过去时间点 一.全然恢复过程 以 ...

  4. 使用 Advanced Installer 打包 一键安装Web应用程序

    原文:使用 Advanced Installer 打包 一键安装Web应用程序 安装预览: 资源下载: 示例安装包 操作流程: 1.新建Asp.net Application. 2.设置应用程序名称和 ...

  5. 源码编译安装 MySQL 5.5.x 实践(转)

    1.安装cmakeMySQL从5.5版本开始,通过./configure进行编译配置方式已经被取消,取而代之的是cmake工具.因此,我们首先要在系统中源码编译安装cmake工具. # wget ht ...

  6. Linux Howto

    1. Customize the Xfce menu http://wiki.xfce.org/howto/customize-menu

  7. 大数据下的数据分析平台架构zz

    转自http://www.cnblogs.com/end/archive/2012/02/05/2339152.html 随着互联网.移动互联网和物联网的发展,谁也无法否认,我们已经切实地迎来了一个海 ...

  8. react.js 从零开始（二）组件的生命周期

    什么是生命周期? 组件本质上是一个状态机,输入确定,输出一定确定. 当状态改变的时候 会触发不同的钩子函数,可以让开发者做出响应.. 一个组件的生命周期可以概括为 初始化:状态下 可以自定义的函数 g ...

  9. oracle当需要commit

    今天oracle的SQL plus 运行该删除和查询操作,然后PL/SQL还运行查询.相同的句子,结果是不一样的.我郁闷很大,然后,突然想到这可能对双方造成由数据不一致,为什么不一致呢.就是没用com ...

  10. [转载]CSS元素的定位position

    CSS元素的定位position 属性position   值 描述 absolute                             生成绝对定位的元素,相对于 static 定位以外的第一 ...