<!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. 微信小程序制作家庭记账本之六

    第六天,自己根据样本代码做的记账本可实现添加账目,删除账目和消费总和,实机可以测试,但是没有域名,别人无法访问.

  2. redux 数据规律

    counter increase info  todos 为 reducers 文件名 export default combineReducers({ todos, visibilityFilter ...

  3. javascript常用积累

    一.JS动画与动作不一致解决: if(!$( "#handle").is(":animated")){ //判断元素是否处于动画状态 } 二.停止事件冒泡 ev ...

  4. nodejs typescript怎么发送get、post请求,如何获取网易云通信token

    nodejs typescript怎么发送get.post请求,如何获取网易云通信token yarn add jshashesyarn add superagent检查语法yarn lint==== ...

  5. いっしょ / Be Together （暴力枚举）

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

  6. .NET 常用ORM之iBatis

    ibatis 一词来源于“internet”和“abatis”的组合,是一个由Clinton Begin在2001年发起的开放源代码项目,到后面发展的版本叫MyBatis但都是指的同一个东西.最初侧重 ...

  7. 简单的图像显著性区域特征提取方法-----opencv实现LC,AC,FT

    https://blog.csdn.net/cai13160674275/article/details/72991049?locationNum=7&fps=1 四种简单的图像显著性区域特征 ...

  8. Spring Boot(十八)：使用Spring Boot集成FastDFS

    Spring Boot(十八):使用Spring Boot集成FastDFS 环境:Spring Boot最新版本1.5.9.jdk使用1.8.tomcat8.0 功能:使用Spring Boot将文 ...

  9. SqlBulkCopy类（将一个表插入到数据库）

    利用SqlBulkCopy类一次插入多条数据,即将一个表直接插入数据库. 首先,新建一个表,要保证表中的列名与数据库表的字段保持一致. 如果数据库一张TableMenuRole表,ID自增,MenuI ...

  10. html5-Input类型

    <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>html5-Input类型& ...