<!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. JAVA 方法或者类的注释快捷键

    JAVA 方法或者类的注释快捷键 /*** 登录验证* @param 传入的* @return* @throws Exception*/这种注释效果 方法: 1.先敲“/”在敲两个**,然后回车 方法 ...

  2. BZOJ 2173 整数的lqp拆分

    题目链接:http://61.187.179.132/JudgeOnline/problem.php?id=2173 题意:给出输出n.设一种拆分为n=x1+x2+x3,那么这种拆分的价值为F(x1) ...

  3. 上下左右布局（DIV+CSS）

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. Linux Kernel CMPXCHG函数分析

    原文地址:http://blog.csdn.net/penngrove/article/details/44175387 最近看到Linux Kernel cmpxchg的代码,对实现很不理解.上网查 ...

  5. Z-偏移量

    使用Z-偏移量 在一个三维场景中,我们可以对共面的多边形使用z-偏移量来使它们不再共面.这项技术通常用于在场景中正确的显示阴影.例如,一堵墙上的阴影与这堵墙的深度值是相同的,如果我们先渲染了墙再来渲染 ...

  6. JS function的定义方法，及function对象的理解。

    废话篇: 今天看到了Function的内容,各种晕,各种混淆有木有.简直是挑战个人脑经急转弯的极限啊.不过,最终这一难题还是被我攻克了,哇咔咔.现在就把这东西记下来,免得到时候又忘了就悲催了.... ...

  7. (转载) jQuery 页面加载初始化的方法有3种

    jQuery 页面加载初始化的方法有3种 ,页面在加载的时候都会执行脚本,应该没什么区别,主要看习惯吧,本人觉得第二种方法最好,比较简洁. 第一种: $(document).ready(functio ...

  8. 切记一定要防止恶意用户直接访问Ajax请求地址

    多年前的一个web项目, 有一个地方是用ajax发送短信验证码, 当时没考虑好, 没判断来路, 这几天被人恶意滥用发送了很多垃圾短信, 投诉到公司来了.  今天一看代码吓出一身冷汗! 以后一定要记得判 ...

  9. VB6 仿.netWinfrom控件 Anchor属性类

    vb6中控件没有anchor与dock属性,窗体变大后原来要在resize中调整控件的move属性,否则就面目全非了.网上找到一些调整控件大小的代码,发现并不太适合自己,于是按照思路自己做了一个类似a ...

  10. POJ 2395 Out of Hay 草荒 （MST，Kruscal，最小瓶颈树）

    题意:Bessie要从牧场1到达各大牧场去,他从不关心他要走多远,他只关心他的水袋够不够水,他可以在任意牧场补给水,问他走完各大牧场,最多的一次需要多少带多少单位的水? 思路:其实就是要让所带的水尽量 ...