<!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. 《OD大数据实战》HBase入门实战

    官方参考文档:http://abloz.com/hbase/book.html#shell_tricks 1.2.3. Shell 练习 用shell连接你的HBase $ ./bin/hbase s ...

  2. STL笔记(2) STL之父访谈录

    年3月,dr.dobb's journal特约记者, 著名技术书籍作家al stevens采访了stl创始人alexander stepanov. 这份访谈纪录是迄今为止对于stl发展历史的最完备介绍 ...

  3. bzoj4127

    肯定是树链剖分+线段树,关键是怎么维护 绝对值和这个东西显然不能简单的合并标记 因为对于负数,加之后绝对值和是变小的 那我们考虑对负数和非负数数分别维护 下面的问题就是经过操作如果负数变成了正数怎么办 ...

  4. js兼容多浏览器的关闭当前页面

    关闭当前页面,相信不少人在开发中都遇到过这个需求,但面对这么多的浏览器,要做到js的兼容还需要做特殊的处理.关于这方面网上有很多的资料,但大多都是复制粘贴的,没有达到兼容的效果,或者是效果不好. 下面 ...

  5. OC 设计模式——单例模式

    单例模式的作用:可以保证在程序运行过程,一个类只有一个实例,而且这个实例易于供外界访问.永远只分配一次内存给这个类.由于在调用alloc方法的时候,都会调用allocWithZone,所以要重写这个方 ...

  6. IOS中tableView每组的头部控件、通过tableView的代理方法控制某一行的cell能否达到高亮选中状态

    一.tableView每组的头部控件 1.控件宽度默认就是tableView的宽度 2.控件高度由下面的代理方法决定 - (CGFloat)tableView:(UITableView *)table ...

  7. php 调试工具及学习PHP垃圾回收机制了解引用计数器的概念

    php代码工具:Xdebug  与分析工具 WinCacheGrind Xdebug之函数大全: string xdebug_call_class()返回当前被调用的函数或方法所属的类的类名 stri ...

  8. python练习程序（c100经典例10）

    题目: 打印楼梯,同时在楼梯上方打印两个笑脸. print '..' for i in range(1,9): print '**' for j in range(1,i+1): print ' ',

  9. 射手网字幕打包下载(73.16G)

    射手网陪着我度过15年了. 我所希望射手网所具有的价值,就是能令更多人跨越国家的樊篱,了解世界上不同的文化. 如果这个网站有帮到人,我就已经很满足了. 但是,需要射手网的时代已经走开了. 因此,今天, ...

  10. ios import和@class的区别

    二者的区别在于: 1.import会包含这个类的所有信息,包括实体变量和方法,而@class只是告诉编译器,其后面声明的名称是类的名称,至于这些类是如何定义的,暂时不用考虑,后面会再告诉你. 2.在头 ...