代码参考

<!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. Scala 专题指南

    Scala 专题教程-Case Class和模式匹配 Scala 专题教程-Case Class和模式匹配(1):简单的演示样例 Scala 专题教程-Case Class和模式匹配(2): 模式的种 ...

  2. arcgis,mapinfo(mapxtreme),openlayers专业GIS系统开发

    专业从事基于C#,WinForm ,WPF,Silverlight,WCF以及MS Sql Server 2000/2005/2008/2012 Oracle 9i/10g/11g数据库系统的ERP, ...

  3. Android中部署自己的su

    本人博客原文 首先把你的自己的su的放到Android应用程序project的assets文件夹,为了和系统的su区分,我自己的su文件叫做sur. 另外我这里没有考虑x86架构的cpu的手机. 废话 ...

  4. 加州理工大学公开课：机器学习与数据挖掘_线性模型 II（第IX类）

    课程简要: 主要内容包括线性分类和回归分析简单的回忆.除了Logistic回归分析,具体解说误差测量和算法三方面,同时归纳法的非线性变换的分析. 课程大纲: 1.Review 2.Nonlinear ...

  5. CSS3图片轮播效果

    原文:CSS3图片轮播效果 在网页中用到图片轮播效果,单纯的隐藏.显示,那再简单不过了,要有动画效果,如果是自己写的话(不用jquery等),可能要费点时间.css3的出现,让动画变得不再是问题,而且 ...

  6. Echarts Jqplot嵌extjs4 windows 装配方法

    js组件绘图终于是画在一个指定id的div或dom元素中. 在项目中有可能须要画在 Extjs容器中,研究了一下,能够通过下面的思路实现,方法跟大家共享下: 1.首先做一个容器,把此内容加入到wind ...

  7. 十天学Linux内核之第七天---电源开和关时都发生了什么

    原文:十天学Linux内核之第七天---电源开和关时都发生了什么 说实话感觉自己快写不下去了,其一是有些勉强跟不上来,其二是感觉自己越写越差,刚开始可能是新鲜感以及很多读者的鼓励,现在就是想快点完成自 ...

  8. php 开发技巧

    以下九种PHP一个非常有用的功能.我不知道你还没有使用?1. 的功能,你可能知道的参数,任意数量PHP我同意你定义一个函数默认参数. 但你可能并不知道PHP还同意你定义一个全然随意的參数的函数以下是一 ...

  9. NYoj 素数环（深搜入门）

    题目链接: http://acm.nyist.edu.cn/JudgeOnline/problem.php?pid=488 深搜模板: void dfs(int 当前状态) { if(当前状态为边界状 ...

  10. IMSDroid遇到注册问题（蘼1S 计3等一下 Android4.4）

    最近的研究视频通话,开源项目IMSDroid编译测试,这实在是不幸的,饭1 Android4.1和大米3 Android4.4该系统不是对生命和死亡登记.... .后来通过大神日志分析和建议.发现改变 ...