<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

<style>

#div1{

    width:100px;

    height:100px;

    background:red;

    position:absolute;

    }

</style>

<script>

window.onload = function ()

{

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

    odiv.onmousedown = function (ev)

    {

        var ev = ev || event;

        var dix = ev.clientX - this.offsetLeft;

        var diy = ev.clientY - this.offsetTop;

        document.onmousemove = function (ev)

        {

            var ev = ev || event;

            odiv.style.top = ev.clientY - diy + 'px';

            odiv.style.left =ev.clientX - dix + 'px';

        }

        document.onmouseup = function ()

        {

            document.onmousedown = document.onmousemove = null;

        }

    }

}

</script>

</head>

<body>

<div id="div1"></div>

</body>

</html>

dom 拖拽div的更多相关文章

  1. 简洁的drag效果，自由拖拽div的实现及注意点

    偶然间看到了以前做的一个简洁的div拖拽效果,修改了一下加点注释,经测试完美通过firefox/chrome/ie6-11,现拿来分享一下. 先说一下实现原理及要点,最主要的有三步.第一步是mouse ...

  2. 理解事件捕获。在限制范围内拖拽div+吸附+事件捕获

    一.实现的效果是在限制范围内拖拽div+吸附+事件捕获. 这里需要理解的是事件捕获,这个事件捕获也是为了兼容div在拖拽过程中,文本不被选中这个问题. 如此良辰美景,拖拽也可以很洒脱哈.先看看图, 二 ...

  3. JS拖拽div（移动）

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

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

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

  5. 可拖拽div

    在开发的时候需要一个可拖拽的prompt弹框.自己写了一个,大概思路为: 1.获取鼠标左键按下移动的起点坐标(x,y). 2.获取div的left和top属性. 3.得到鼠标坐标到左上角的距离(x-t ...

  6. 自由拖拽DIV实现

    最近在做的项目有个效果是要实现div随意拖拽改变大小,前端框架选择的是vue.js,UI用的是element,拖拽效果可以很简单的实现,但是在拖拽过程中发现会对其他元素实现全选效果,因此最后选择使用元 ...

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

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

  8. 拼图 canvas分割 dom拖拽 pc 移动端

    参考:Canvas drag 实现拖拽拼图小游戏 参考的案例,不支持手机端.总结下实现过程中遇到的小坑. gitHub:https://github.com/WppFrontEnd/puzzle 大概 ...

  9. dom 拖拽回放

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

随机推荐

  1. [POJ2002]Squares(计算几何，二分)

    题目链接:http://poj.org/problem?id=2002 给定一堆点,求这些点里哪些点可以构成正方形,题目给定n<=1000,直接枚举四个点是肯定会超时的,因此要做一些优化. 有公 ...

  2. Data.gov.uk电子政务云，牛津大学NIE金融大数据实验室王宁：数据治理的现状和实践

    牛津大学NIE金融大数据实验室王宁:数据治理的现状和实践 我是牛津互联网研究院的研究员,是英国开放互联网的一个主要的研究机构和相关政策制订的一个机构.今天主要给大家介绍一下英国数据治理的一些现状和实践 ...

  3. UVa 11137 (完全背包方案数) Ingenuous Cubrency

    题意:用13.23……k3这些数加起来组成n,输出总方案数 d(i, j)表示前i个数构成j的方案数则有 d(i, j) = d(i-1, j) + d(i, j - i3) 可以像01背包那样用滚动 ...

  4. 51nod1257 背包问题 V3

    分数规划经典.开始精度1e-3/1e-4都不行,1e-5就A了 #include<cstdio> #include<cstring> #include<cctype> ...

  5. 一个小面试题sql

    一.            问答题 1简要说明分页是如何实现的. A:sqlserver: Select top(pagesize)  * from  student where id not in( ...

  6. 重拾Excel之为什么

    现在如今想想自己,已经有许久许久没有充过电了.现在想好好地充电. 机遇总是垂青于有准备的人!

  7. PPTP模式跟L2TP模式有什么不同

    使用VPN的时候经常会看到商家说支持PPTP模式和L2TP模式,但是许多朋友都不知道有什么区别,该用哪一个,下面给你们讲讲: 1).PPTP协议是点对点隧道协议:其将控制包与数据包分开,控制包采用TC ...

  8. KVM虚拟化技术简介

    kernel-based Virtual Machine的简称,是一个开源的系统虚拟化模块,自Linux 2.6.20之后集成在Linux的各个主要发行版本中.它使用Linux自身的调度器进行管理,所 ...

  9. Oracle 单实例 迁移到 RAC 实例 -- 使用RMAN 异机恢复

    Oracle 官网有关单实例迁移到RAC的一个步骤说明: How to Convert 10g Single-Instance database to 10g RAC using Manual Con ...

  10. Image.FromFile 方法锁住文件解决方法

    Image.FromFile  一旦使用后,对应的文件在一直调用 其生成的Image对象被Disponse前都不会被解除锁定,这就造成了一个问题,就是在这个图形被解锁前无法对图像进行操作(比如删除,修 ...