代码参考

<!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. js在web绘制在页上的圆

    在web页,要画一个圆.有很多方法,SVG.canvas我们能够得出. 但文章没有使用这两种方法,但使用的div.div通常一个矩形.但是,假设一个圆形的样式设置border-radius有可能div ...

  2. C++ 静态static 变量在 cocos2d-x 里面使用误区

    void Cms::showMonster(CCArray* monsterArray,int type) { <span style="color:#ff0000;"> ...

  3. Gradle digest

    task类型 copy task copyFiles(type: Copy) { from 'resources' into 'target' include '**/*.xml', '**/*.tx ...

  4. TCP/IP 网络编程（六）

    流程模型: 线程模型: 线程的创建和运行流程 #include <pthread.h> int pthread_create(pthread_t * restrict thread, co ...

  5. Android新浪微博client（七）——ListView图片异步加载、高速缓存

    原文出自:方杰|p=193" style="color:rgb(202,0,0); text-decoration:none; font-size:14px; font-famil ...

  6. Java的结构之美【1】——构造对象

    当我们遇到多个构造器參数的时候可能会想到用构件器,代码例如以下: /** * 构建器 * @author 阳光小强 * */ public class Lunch { private String c ...

  7. unity3d 依据指定的Assets下的目录路径 返回这个路径下的全部文件名称

    using UnityEngine; using System.Collections; using System.Collections.Generic; using System.IO; < ...

  8. JQuery读取Exif信息

    <!DOCTYPE html> <html> <head> <script type="text/javascript" src=&quo ...

  9. react.js 从零开始（一）

    React 是什么? 网络上的解释很多...我这里把他定义为 通过javascript 的形式组件化 html的框架... React 仅仅是 VIEW 层. React 提供了模板语法以及一些函数钩 ...

  10. tortoisegit使用密钥连接服务器(转)

    目录 [hide] 1 使用putty的密钥 1.1 生成putty密钥 2 在服务器上添加openssh公钥 3 在tortoisegit上使用密钥 4 putty密钥与openssh密钥转化 5  ...