效果：

思路：

利用onmousedown事件实现拖拽。首先获得鼠标横坐标点和纵坐标点到div的距离，然后当鼠标移动后再用可视区的距离减去横纵坐标与div的距离。然后在判断不让DIV移出可视区，然后再赋予DIV的位置。最后关闭鼠标onmouseup事件。

代码：

 <head runat="server">

     <title></title>

     <style type="text/css">

         #div1

         {

             width: 200px;

             height: 200px;

             background: #00FFFF;

             position: absolute;

             border: 1px solid;

         }

     </style>

     <script type="text/javascript">

         window.onload = function () {

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

             var disX = 0;

             var disY = 0;

             document.onmousedown = function (ev) {  //鼠标按下

                 var oEvent = ev || event;       //判断浏览器兼容

                 disX = oEvent.clientX - div1.offsetLeft;    //鼠标横坐标点到div的offsetLeft距离

                 disY = oEvent.clientY - div1.offsetTop;     //鼠标纵坐标点到div的offsetTop距离

                 document.onmousemove = function (ev) {      //鼠标移动

                     var oEvent = ev || event;

                     var l = oEvent.clientX - disX;          //获取div左边的距离

                     var t = oEvent.clientY - disY;          //获取div上边的距离

                     if (l < 0) {        //判断div的可视区，为避免DIV失去鼠标点

                         l = 0;

                     }

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

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

                     }

                     if (t < 0) {

                         t = 0;

                     }

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

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

                     }

                     div.style.left = l + 'px';      //确定DIV的左边位置

                     div.style.top = t + 'px';       //确定DIV的上边位置

                 }

                 document.onmouseup = function () {      //当鼠标松开后关闭移动事件和自身事件

                     document.onmousemove = null;

                     document.onmouseup = null;

                 }

                 return false;

             }

         }

     </script>

 </head>

 <body>

     <div id="div1">

     </div>

 </body>

点滴积累【JS】---JS小功能（onmousedown实现鼠标拖拽div移动）的更多相关文章

  1. js - 面向对象 - 小案例：轮播图、随机点名、选项卡、鼠标拖拽

    面向对象 对象 : (黑盒子)不了解内部结构, 知道表面的各种操作. 面向对象 : 不了解原理的情况下 会使用功能 . 面向对象是一种通用思想,并非编程中能用,任何事情都能用. 编程语言的面向对象的特 ...

  2. JS组件系列——Bootstrap Table 表格行拖拽（二：多行拖拽）

    前言:前天刚写了篇JS组件系列——Bootstrap Table 表格行拖拽,今天接到新的需要,需要在之前表格行拖拽的基础上能够同时拖拽选中的多行.博主用了半天时间研究了下,效果是出来了,但是感觉不尽 ...

  3. JS拖拽div（移动）

    <!doctype html><html><head> <meta charset="utf-8"> <title>JS ...

  4. JS Event 鼠标拖拽事件

    <!DOCTYPE html><html> <head>        <meta charset="UTF-8">         ...

  5. JS之scrollTop、offsetHeight和offsetTop等属性用法详解和拖拽div

    标题中的几个相关相关属性在网页中有这大量的应用,尤其是在运动框架中,但是由于有些属性相互之间的概念比较混杂或者浏览器兼容性问题,导致掌握起来比较有难度,下面就介绍一下相关属性的用法.先来看一张比较经典 ...

  6. 微信小程序 -- 基于 movable-view 实现拖拽排序

    微信小程序 -- 基于 movable-view 实现拖拽排序 项目基于colorui样式组件 ColorUI组件库 (color-ui.com) 1.实现效果 2. 设计思路 movable-vie ...

  7. 完美实现鼠标拖拽事件，解决各种小bug，基于jquery

    鼠标拖拽事件是web中使用频率极高的事件,之前写过的代码包括网上的代码,总存在各种各样的问题,包括拖拽体验差,松开鼠标后拖拽效果仍存在以及代码冗余过大等 本次我才用jQuery实现一个尽可能高效的拖拽 ...

  8. Java3D读取3DMax模型并实现鼠标拖拽、旋转、滚轮缩放等功能

    /**-------------------------------------------------代码区--------------------------------------------- ...

  9. JS类小功能

    工作中,总是要处理一些前端的小功能.都是网上搜的JS脚本 <script> //防止页面后退 history.pushState(null, null, document.URL); wi ...

随机推荐

  1. HDU 1864 Brave Game 【组合游戏，SG函数】

    简单取石子游戏,SG函数的简单应用. 有时间将Nim和.SG函数总结一下……暂且搁置. #include <cstdio> #include <cstring> #define ...

  2. UTF8

    Here's a couple of functions (based on Brian Bondy's example) that use WideCharToMultiByte and Multi ...

  3. RACLE 错误 12899 处理， oracle 11g 更改字符集

    工作需要,安装装了oracle 11g,在导入其他机器上的备份数据的时间,发生一个错误: IMP-00019: 由于 ORACLE 错误 12899 而拒绝行IMP-00003: 遇到 ORACLE ...

  4. juqery.fn.extend和jquery.extend

    jquery.fn == jquery.prototype //true jquery.extend( obj1,obj2 ) 用一个或多个对象来拓展一个对象,返回拓展之后的对象 var aaa = ...

  5. Julia：高性能 GPU 计算的编程语言

    Julia:高性能 GPU 计算的编程语言 0条评论 2017-10-31 18:02    it168网站 原创 作者: 编译|田晓旭 编辑: 田晓旭 [IT168 评论]Julia是一种用于数学计 ...

  6. linux之fork()函数详解

    一.fork入门知识 一个进程,包括代码.数据和分配给进程的资源.fork()函数通过系统调用创建一个与原来进程几乎完全相同的进程, 也就是两个进程可以做完全相同的事,但如果初始参数或者传入的变量不同 ...

  7. Jquery事件冒泡

    事件冒泡 什么是事件冒泡 在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么 ...

  8. DirectX游戏开发——从一个小游戏開始

    本系列文章由birdlove1987编写,转载请注明出处. 文章链接: http://blog.csdn.net/zhurui_idea/article/details/26364129 写在前面:自 ...

  9. JMS之——ActiveMQ 高可用与负载均衡集群安装、配置(ZooKeeper + LevelDB + Static discovery)

    一.说明 从 ActiveMQ 5.9 开始, ActiveMQ 的集群实现方式取消了传统的 Master-Slave 方式,增加了基于ZooKeeper + LevelDB 的 Master-Sla ...

  10. Java程序的结构

    1.由一个或多个独立的类组成: 2.最多一个公有类 3.源代码文件名必须与类名相同 4.类由一个或多个方法组成,其中公有类中的main()方法作为程序的入口. 注:javaSE中一定有main方法. ...