<!DOCTYPE html>

<html lang="zh">

<head>

    <meta charset="UTF-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <meta http-equiv="X-UA-Compatible" content="ie=edge" />

    <title>Document</title>

</head>

<style>

      #div1{width: 100px;height: 100px;background-color: red;position: absolute;}    

</style>

<body>

        <div id="div1"></div>

</body>

<script type="text/javascript">

             window.onload=function(){

                   var oDiv=document.getElementById('div1');

                      disX=0;

                        disY=0;

                   oDiv.onmousedown=function(ev){

                          var oEvent=ev || event;

                          disX=oEvent.clientX-oDiv.offsetLeft;

                          disY=oEvent.clientY-oDiv.offsetTop;

                           document.onmousemove=function(ev){

                                    var oEvent=ev||event;

                                    var l=oEvent.clientX-disX;

                                    var t=oEvent.clientY-disY;

                                    if(l<0){

                                        l=0;

                                    }else if(l>document.documentElement.clientWidth-oDiv.offsetWidth){

                                        l=document.documentElement.clientWidth-oDiv.offsetWidth;

                                    }if(t<0){

                                        t=0;

                                    }else if(t>document.documentElement.clientHeight-oDiv.offsetHeight){

                                        t=document.documentElement.clientHeight-oDiv.offsetHeight;

                                    }

                                    oDiv.style.left=l+'px';

                                    oDiv.style.top=t+'px';

                               }

                           document.onmouseup=function(){

                              document.onmousemove=null;

                              document.onmouseup=null;

                           }

                          return false;//阻止默认事件 屏蔽火狐的bug

                   }

             }

</script>

</html>

js实现可视化区域内拖拽的更多相关文章

  1. JS实现漂亮的窗口拖拽效果(可改变大小、最大化、最小化、关闭)

    转自<JS实现漂亮的窗口拖拽效果(可改变大小.最大化.最小化.关闭)>:http://www.jb51.net/article/73157.htm   这篇文章主要介绍了JS实现漂亮的窗口 ...

  2. 理解事件捕获。在限制范围内拖拽div+吸附+事件捕获

    一.实现的效果是在限制范围内拖拽div+吸附+事件捕获. 这里需要理解的是事件捕获,这个事件捕获也是为了兼容div在拖拽过程中,文本不被选中这个问题. 如此良辰美景,拖拽也可以很洒脱哈.先看看图, 二 ...

  3. 拖拽系列二、利用JS面向对象OOP思想实现拖拽封装

    接着上一篇拖拽系列一.JavaScript实现简单的拖拽效果这一篇博客将接着对上一节实现代码利用JS面向对象(OOP)思维对上一节代码进行封装; 使其模块化.避免全局函数污染.方便后期维护和调用:写到 ...

  4. 基于svg.js实现对图形的拖拽、选择和编辑操作

    本文主要记录如何使用 svg.js 实现对图形的拖拽,选择,图像渲染及各类形状的绘制操作. 1.关于SVG SVG 是可缩放的矢量图形,使用XML格式定义图像,可以生成对应的DOM节点,便于对单个图形 ...

  5. (Demo分享)利用JavaScript（JS）实现一个九宫格拖拽功能

    利用JavaScript(JS)实现一个九宫格拖拽功能   Demo实现了对任意方格进行拖拽,可以交换位置,其中Demo-1利用了勾股定理判断距离! Demo-1整体思路: 1.首先div实现自由移动 ...

  6. 前端js区域上下拖拽

    先说说需求吧,网页内又上下两个区域,需要做到的功能是,第一个区域A底部的边可以进行拖拽使得区域变大或变小,同时第二个区域B跟着拖动的变化进行自适应. 思路: 1.使用一个假的div定义为那条可进行拖拽 ...

  7. 【原创】js实现一个可随意拖拽排序的菜单导航栏

    1.想做这个效果的原因主要是用在UC上看新闻发现他们的导航菜单很有趣.无聊的时候在哪划着玩了很久.所以就干脆自己写一个.原效果如下 2.整体效果如下,在已推荐和未添加里面每个小方块可以触摸移动位置互换 ...

  8. 纯JS.CSS编写的可拖拽并左右分栏的插件（复制代码就能用）

    <!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equ ...

  9. 基于JS的WEB会议室预订拖拽式图形界面的实现

    06年的一篇blog,转到这个博客上: 很早之前写的,后来由于这个功能模块取消,最终没有上线,所以与Server交互的那部分还没有写,不过那部分方案我也已经出来了,而且现在客户端这一部分已经通过了比较 ...

随机推荐

  1. 转：Process类的使用

    转载自:http://www.oschina.net/code/snippet_119226_6188 一.根据进程名获取进程的用户名? 需要添加对 System.Management.dll 的引用 ...

  2. Q_DECL_OVERRIDE

    Q_DECL_OVERRIDE也就是c++的override # define Q_DECL_OVERRIDE override 在重写虚函数时会用到, 作用是防止写错虚函数: void keyPre ...

  3. nginx+php+memcache实现hash一致性memcache 集群

    我们工作中可能会遇到key-value数据库,如果我们面对的不止一台memcache服务器,而是很多台.那么现在就回出现一个问题: 当我们访问nginx服务器的时候,我们会判断memcache中是否有 ...

  4. selenium使用location定位元素坐标偏差

    python+selenium+Chromedriver使用location定位元素坐标偏差使用xpath定位元素,用.location获取坐标值,截取网页截图的一部分出现偏差. 之所以会出现这个坐标 ...

  5. Python3+Dlib实现简单人脸识别案例

    Python3+Dlib实现简单人脸识别案例 写在前边 很早很早之前,当我还是一个傻了吧唧的专科生的时候,我就听说过人脸识别,听说过算法,听说过人工智能,并且也出生牛犊不怕虎般的学习过TensorFl ...

  6. Java中断异常 InterruptedException 的正确处理方式

    你看到这篇文件可能是因为你已经调用了一个抛出 InterruptedException 异常的方法,并且需要以某种方式处理它. 首先,需要了解为一个方法为啥会 throws InterruptedEx ...

  7. entry points

    https://amir.rachum.com/blog/2017/07/28/python-entry-points/

  8. HTTP协议和XMPP协议、MQTT协议

    应用层协议:每个应用层的都是为了解决某一类应用问题.而问题的解决又必须通过位于不同主机中的多个应用进程之间的通信和协同工作来完成.应用进程之间必须遵守严格的规则.应用层协议应当定义如下几个: 应用进程 ...

  9. 学习Struts2的个人疑惑及问题解决

    刚开始学习SSH框架中Struts2时,个人疑惑以及一些问题总结一下. 1.package节点namespace属性值决定访问路径问题       namespace不写或写namespace=&qu ...

  10. 装了as之后提示NO JVM installation found.....

    如图. 解决:在AS安装目录下,找到对应的程序[jdk是多少位就打开多少位的]