<!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. web3.js编译Solidity，发布，调用全部流程（手把手教程）

    web3.js编译Solidity,发布,调用全部流程(手把手教程) 下面教程是打算在尽量牵涉可能少的以太坊的相关工具,主要使用web3.js这个以太坊提供的工具包,来完成合约的编译,发布,合约方法调 ...

  2. GUI常用对话框3

    %进度条 %waitbar h=waitbar(,'实例'); get(h); %获得进度条的子对象 get(get(h,'Children')) ha=get(h,'Children'); %获得坐 ...

  3. HDU 2077 汉诺塔IV （递推）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2077 还记得汉诺塔III吗?他的规则是这样的:不允许直接从最左(右)边移到最右(左)边(每次移动一定是 ...

  4. VisualSVN Server 服务器搭建 和 TortoiseSVN的配置和使用方法

    摘自:https://blog.csdn.net/litaoshoujiao/article/details/8526136 一.VisualSVN Server的配置和使用方法[服务器端] 安装好V ...

  5. Tomcat配置Manager管理员

    修改文件: D:\MyDev\Tomcat\apache-tomcat-7.0.68\conf\tomcat-users.xml  配置内容: <role rolename="mana ...

  6. java内存泄漏与内存溢出

    https://www.cnblogs.com/panxuejun/p/5883044.html 内存溢出 out of memory,是指程序在申请内存时,没有足够的内存空间供其使用,出现out o ...

  7. Linux使用scp远程传输命令进行服务器文件互传(阿里云服务器)

    阿里云同一个区的的两个云服务器,通过内网进行文件传输,速度快不说(正常传输文件的速度能达到35m~50m/s),还不占用公网带宽. 阿里云云服务器有一个安全组策略,可能需要设置下 内网入.出方向的IP ...

  8. Mybatis的Mapper接口方法不能重载

    今天给项目的数据字典查询添加通用方法,发现里边已经有了一个查询所有数据字典的方法 List<Dict> selectDictList(); 但我想设置的方法是根据数据字典的code查询出所 ...

  9. metasploit(MSF)对windows的ms17-010漏洞利用

    picture 配置exploit msf > use exploit/windows/smb/ms17_010_eternalblue msf exploit(windows/smb/ms17 ...

  10. Bitbucket备份恢复

    我们需要备份什么? home directory:contains  repository data, log files, plugins, and so on. database:contains ...