<!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. ATM-JAVA程序 //程序有5处相同错误，找不出原因 转账功能没有实现，修改密码来不及实现了

    package JCC;//信1705-3 20173681 靳晨晨import java.io.BufferedReader;import java.io.File;import java.io.F ...

  2. 算法提高 P0102

    用户输入三个字符,每个字符取值范围是0-9,A-F.然后程序会把这三个字符转化为相应的十六进制整数,并分别以十六进制,十进制,八进制输出,十六进制表示成3位,八进制表示成4位,若不够前面补0.(不考虑 ...

  3. 51Nod 1090 3个数和为0

    题目链接:https://www.51nod.com/onlineJudge/questionCode.html#!problemId=1090 思路:排序 三个for循环 但是要控制循环 不能从头开 ...

  4. Linux下MySQL远程链接配置

    配置步骤: 1).首先进入数据库,使用系统数据库mysql mysql -u root -p mysql 2).接着对系统数据库的root账户设置远程访问的密码,与本地的root访问密码并不冲突 gr ...

  5. TensorFlow 分布式实践

    此wiki主要介绍分布式环境使用的一些条件,一直所要注意的内容: 确保在此之前阅读过TensorFlow for distributed 1.集群描述 当前tensorflow 的版本(0.8.0), ...

  6. Web开发相关笔记 #05# MySQL中文无法匹配

    2018-06-02 在 Class.forName 的时候记得先尝试 import 一下. 2018-06-04 1.JDBC SELECT 查询,中文条件查不出东西,可能是字符编码问题: Stri ...

  7. Spring Maven 包的依赖

    <properties> <spring.version>4.3.11.RELEASE</spring.version> </properties> & ...

  8. host元素的属性autoDeploy和reloadable的区别

    web.xml文件的修改会触发AutoDeploy,受host节的autoDeploy配置值的影响. class类文件修改会触发Reload操作,受reloadable配置值的影响. 而autoDep ...

  9. windows下常用linux对应工具

    tail 可从http://files.cnblogs.com/hantianwei/tail.zip下载,解压后exe,如下: e:\>tail -fn 300 tool-slow.logus ...

  10. phpstorm 配置点右上角浏览器图标时用浏览器打开当前页面

    文件>设置 只要这一步就可以这样了