最终代码：
 <!DOCTYPE html>
 <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
     <title></title>
     <meta charset="utf-8" />
     <style type="text/css">
         #divTest {
             width : 200px;
             height : 200px;
             background-color : red;
             border : 1px solid #00ffff;
             position : absolute;
         }
     </style>
 </head>
 <body>
     测试一下
     <div id="divTest">
     </div>

     <script type="text/javascript">
         var oDiv = document.getElementById("divTest");
         oDiv.onmousedown = function (en) {
             var ev = ev || event;
             var disX = en.clientX - oDiv.offsetLeft;
             var disY = en.clientY - oDiv.offsetTop;
             if (oDiv.setCapture) {
                 oDiv.setCapture();
             }

             document.onmousemove = function (en) {
                 var ev = ev || event;
                 oDiv.style.top = en.clientY - disY + 'px';
                 oDiv.style.left = en.clientX - disX + 'px';
             }
             document.onmouseup = function () {
                 document.onmousemove = null;
                 if (oDiv.releaseCapture) {
                     oDiv.releaseCapture()
                 }
             }
             return false;//阻止默认行为（如果页面中有文字，则会默认拖动文字），ie8及一下不行
         }
     </script>

 </body>
 </html>

注意点：

1.获取当前div离上方和左方的距离之前使用了oDiv.style.left，获取不到

2.注意后面加px，老是容易忘记，然后还找不到错误原因浪费事件

3.

4.以后还是得实践，一味的看视频效果并不好，一定要明确最终目的，是需要掌握而不是单纯的看完视频。

js事件处理相关-实现一个div的拖拽的更多相关文章

  1. 实现一个div的拖拽效果

    实现思路: 鼠标按下开始拖拽 记录摁下鼠标时的鼠标位置以及元素位置 拖动鼠标记下当前鼠标的位置 鼠标当前位置-摁下时鼠标位置= 鼠标移动距离 元素位置= 鼠标移动距离+鼠标摁下时元素的位置 class ...

  2. JS实现多Div模块拖拽功能

    空闲时间,同事让帮忙整个JS拖拽div模块功能.于是便在网上搜索,总结如下一个可实现多div模块拖拽的功能.一下是整体的HTML代码, 里边可以控制到 拖拽开始(onStart),拖拽时候(onMov ...

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

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

  4. day23—JavaScript实现DIV盒子拖拽（原生方式）

    转行学开发,代码100天——2018-04-08 <!doctype html> <html> <head> <meta charset="utf- ...

  5. 移动端多个DIV简单拖拽功能

    移动端多个DIV简单拖拽功能. 这个demo与之前写的一个例子差不了多少,只是这个多了一层遍历而已. <!DOCTYPE html> <html lang="en" ...

  6. Android高级控件（六）——自定义ListView高仿一个QQ可拖拽列表的实现

    Android高级控件(六)--自定义ListView高仿一个QQ可拖拽列表的实现 我们做一些好友列表或者商品列表的时候,居多的需求可能就是需要列表拖拽了,而我们选择了ListView,也是因为使用L ...

  7. 【原创】js实现一个可随意拖拽排序的菜单导航栏

    1.想做这个效果的原因主要是用在UC上看新闻发现他们的导航菜单很有趣.无聊的时候在哪划着玩了很久.所以就干脆自己写一个.原效果如下 2.整体效果如下,在已推荐和未添加里面每个小方块可以触摸移动位置互换 ...

  8. 自制一个H5图片拖拽、裁剪插件（原生JS）

    前言 如今的H5运营活动中,有很多都是让用户拍照或者上传图片,然后对照片加滤镜.加贴纸.评颜值之类的.尤其是一些拍照软件公司的运营活动几乎全部都是这样的. 博主也做过不少,为了省事就封装了一个简单的图 ...

  9. 点滴积累【JS】---JS小功能（onmousedown实现鼠标拖拽div移动）

    效果: 思路: 利用onmousedown事件实现拖拽.首先获得鼠标横坐标点和纵坐标点到div的距离,然后当鼠标移动后再用可视区的距离减去横纵坐标与div的距离.然后在判断不让DIV移出可视区,然后再 ...

随机推荐

  1. 根据ip查询地区，经纬度等-geoip2

    这项工作难度主要在数据上,数据越准确越有利. 1. 下载数据文件: http://geolite.maxmind.com/download/geoip/database/GeoLite2-City.m ...

  2. asp.net+swfupload 多图片批量上传(附源码下载)

    asp.net的文件上传都是单个文件上传方式,无法执行一次性多张图片批量上传操作,要实现多图片批量上传需要借助于flash,通过flash选取多个图片(文件),然后再通过后端服务进行上传操作. 本次教 ...

  3. 【查找结构 2】二叉查找树 [BST]

    当所有的静态查找结构添加和删除一个数据的时候,整个结构都需要重建.这对于常常需要在查找过程中动态改变数据而言,是灾难性的.因此人们就必须去寻找高效的动态查找结构,我们在这讨论一个非常常用的动态查找树— ...

  4. Java：基本数据类型包装类

    基本数据类型对象包装类    基本数据类型(关键字)   引用数据类型(类)          byte                          Byte          short   ...

  5. Android Edittext 显示光标 获取焦点 监听焦点

    Edittext java 代码控制获取焦点 EditText mEditText = (EditText) findViewById(R.id.et); mEditText.setFocusable ...

  6. javascript 网络是否连接的几种方案

    js   网络是否连接的几种方案 1.通过html5的新属性: window.onload = function () {            var isOnLine = navigator.on ...

  7. c# 计算1-100之间的所有奇数的和

    求1-100之间所有奇数整数和: class Program { static void Main(string[] args) { ,); Console.WriteLine("1-100 ...

  8. AngularJs-ui modal 封装 dialog

    常常在操作中和用户进行交互,及时反馈操作结果:用到alert 和confrim 功能 找到一个基于anguarjs-ui的modal,方便我们使用 angular-dialog-service 注意要 ...

  9. POJ 1322 Chocolate（母函数）

    题目链接:http://poj.org/problem?id=1322 题意: 思路: double C[N][N]; void init() { C[0][0]=1; int i,j; for(i= ...

  10. 手机号段、ip地址归属地大全，最新手机号段归属地,IP地址归属地数据库

    百事通:http://www.114best.com/dh/114.aspx?w=17097232323,联通识别为电信的,1349错 二三四五:http://tools.2345.com/frame ...