代码参考

<!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. 好大滴坑， Spring MVC覆盖了Trsaction

    好大滴坑. Spring MVC覆盖了Trsaction 解决方式: <!-- package-scan 4 Spring MVC --> <context:component-sc ...

  2. c#左右socket连接超时控制方案

    之前有一个项目中使用Remoting技术.当远程地址无效或server不执行,访问远程对象的方法,它会经过几十秒的时间来抛出异常秒. 由于我使用tcp状态.因此,认为可以使用socket为了测试连接, ...

  3. 如何安装一个优秀的BUG管理平台（转）

    前言 就BUG管理而言,国内的禅道做得很不错,而且持续有更新.我们来看看如何从头到尾安装禅道,各位要注意的是,不是文章深或者浅,而是文章如何在遇到问题的时候,从什么途径和用什么方法解决问题的.现在发觉 ...

  4. Eclipse 发布到网站的附加产品的形式 Update Site

    Eclipse 发布到网站的附加产品的形式 Update Site 通过Update Site Project项目将自己做的插件产品公布到公网上,给客户或其它測试人员下载和应用,这样自己的插件就以网站 ...

  5. 谈话Java在ThreadLocal理解类

    我们必须先了解:ThreadLocal不超过一个线程类,或者它应该被称为线程局部变量.这从ThreadLocal的JDK我们可以看到的定义 public class ThreadLocal<T& ...

  6. 在MVC5中的使用Ninject

    在MVC5中的使用 Ninject 从MVC3中就开始接触Ninject这个IOC工具.也一直是MVC Framework系列书籍中推荐的IOC工具,当然还有优秀的Autofac等.性能和使用上面个有 ...

  7. 网络资源(7) - JAX-WS视频

    2014_08_25 http://v.youku.com/v_show/id_XNjMzNDcyMTk2.html 基于JAX-WS编程模型的WebService 1. @WebService注释类 ...

  8. Android物业动画研究（Property Animation）彻底解决具体解释

     前p=1959">Android物业动画研究(Property Animation)全然解析具体解释上已经基本展示了属性动画的核心使用方法: ObjectAnimator实现动画 ...

  9. cocos2d 缓存池 对象的再利用

    1.简单的叙述说明池 例如,我们知道,游戏的游戏类型跑酷,游戏元素都在不断重复.游戏的内容将继续从屏幕右侧的创建,当元件在屏幕的左侧的,将消失.假设不变new 对象.release 对象 性能影响.怎 ...

  10. HDU 3523 Image copy detection（KM最大匹配）

    HDU 3523 Image copy detection 题目链接 题意:这题事实上题意读懂就简单了,说白了就是1-n放到1-n列,每列的值为每列上数字和该数字的差的绝对值,然后求总和最小 思路:就 ...