<!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. 匿名内部类和内部类中的this

    package test; public class A extends B { public String toString() { return "A"; } public s ...

  2. バイナリハックイージー / Unhappy Hacking (ABC Edit) （stack）

    题目链接:http://abc043.contest.atcoder.jp/tasks/abc043_b Time limit : 2sec / Memory limit : 256MB Score ...

  3. netperf 网络性能测试

    Netperf是一种网络性能的测量工具,主要针对基于TCP或UDP的传输.Netperf根据应用的不同,可以进行不同模式的网络性能测试,即批量数据传输(bulk data transfer)模式和请求 ...

  4. 分页的模块layui

    //调用分页模块 var laypage = layui.laypage; //分页的配置项 laypage.render({ elem:"page",//(指向存放分页的容器,值 ...

  5. 怎样从外网访问内网Web？

    本地部署了一个Web服务端,只能在局域网内访问,怎样从外网也能访问到本地的Web服务呢?本文将介绍具体的实现步骤. 准备工作 部署并启动Web服务程序 默认部署的Web服务端口是8080. 实现步骤 ...

  6. 数据分析之pandas02

    DataFrame 一.DataFrame DataFrame是一个[表格型]的数据结构.DataFrame又按一定顺序排列的多列数据组成,设计初衷是将Series的使用场景从一维扩展到多维.Date ...

  7. ES6知识整理（8）--Promise对象

    (关于promise,以前并不知道是什么,没这个概念.现在来学习总结下) promise含义 es6的异步编程解决方案.需要new新对象操作api. promise对象特点 有3中状态:pending ...

  8. mycat基本概念及配置文件详解

    在介绍mycat之前,首先来了解一下数据库切分. 对于海量数据处理,按照使用场景,主要分为两类:联机事务处理(OLTP)和联机分析处理(OLAP). 联机事务处理也称为面向交易的处理系统,其基本特征是 ...

  9. bzoj1088 P2327 [SCOI2005]扫雷

    P2327 [SCOI2005]扫雷 emmmmm.....这题真可以用状压写 因为每个数字只对3个格子有影响,相当于只有2^3=8种状态,所以可以用状压瞎搞 我们用8个数字代表二进制下的8种状态 0 ...

  10. P1357 花园

    洛咕原题 题解 状压dp+矩乘 首先看到题目说M<=5,这么小的数据明显可以用状压保存相邻状态,于是可以得到一个80分的dp: 先筛出所有可用的状态,然后建立一个矩阵保存可转移的状态,再然后把每 ...