代码参考

<!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. JAVA CAS原理深度分析(转)

    看了一堆文章,终于把JAVA CAS的原理深入分析清楚了. 感谢GOOGLE强大的搜索,借此挖苦下百度,依靠百度什么都学习不到! 参考文档: http://www.blogjava.net/xylz/ ...

  2. HDU 3853 LOOPS 可能性dp（水

    在拐~ #include <stdio.h> #include <cstring> #include <iostream> #include <map> ...

  3. Hibernate的一些相关信息

    在没有学习Hibernate之前,我们一直都是用jdbc来连接数据库和操纵数据库.所以在刚接触Hibernate时,我们都有一个疑问,为什么要学Hibernate,jdbc不是挺好的吗?那么接下来就来 ...

  4. Bind和Eval的区别详解

    原文:Bind和Eval的区别详解 1.简单描述Eval和Bind的区别 绑定表达式 <%# Eval("字段名") %> <%# Bind("字段名& ...

  5. Android:ViewPager详细解释（异步网络负载图片，有图片缓存，）并与导航点

    android 应用.准则欢迎页面. 和图像旋转木马特征, 或者没有很多其他的内容显示在一个页面.以被划分成多个页面,在这一刻viewpager这是非常容易使用. 首先看下效果: 以下是一个样例.带异 ...

  6. 解决RecyclerView无法onItemClick问题

    供RecyclerView采用.会员可以查看将替代ListView的RecyclerView 的使用(一),单单从代码结构来说RecyclerView确实比ListView优化了非常多.也简化了我们编 ...

  7. php实现和c#一致的DES加密解密

    原文:php实现和c#一致的DES加密解密 php实现和c#一致的DES加密解密,可以从网上搜到一大堆,但是测试后发现都没法用.以下正确代码是我经过苦苦才找到的.希望大家在系统整合时能用的上. 注意: ...

  8. debugging python with IDLE

    1. start IDLE "Python 2.5"→"IDLE(Python GUI)" 2. open your source file window Fr ...

  9. 他们控制的定义--让背景颜色变化ViewPager逐步幻灯片

    转载请注明出处.谢谢~ 今天想说一个简单但很好的效果达到.代码是绝对简单,达到绝对easy,就是你可能想不到而已. 不多说,上效果图. 第一个效果是仿最美应用的滑动颜色变化,第二个是我项目中要用的效果 ...

  10. DevExpress的Web控件汉化方法

    原文:DevExpress的Web控件汉化方法 项目中用到devexpress的web控件,机器没有安装devexpress控件,直接在项目中引用的dev的dll,项目运行时发现都是英文界面,所以解决 ...