<!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. C#判断字符串为空的几种方法和效率判断

    C#判断字符串为空的几种方法和效率判断 string定义 1.1 string str1="":会定义指针(栈),并在内存里划一块值为空的存储空间(堆),指针指向这个空间.1.2 ...

  2. NET垃圾回收机制【Copy By Internet】

    尽管在.NET framework下我们并不需要担心内存管理和垃圾回收(Garbage Collection),但是我们还是应该了解它们,以优化我们的应用程序.同时,还需要具备一些基础的内存管理工作机 ...

  3. Nginx proxy_pass 加与不加 "/" 区别

    下面四种情况分别用http://192.168.1.100/proxy/test.html 进行访问. 第一种: location  /proxy/ { proxy_pass http://127.0 ...

  4. [转载] mysql5.6 删除之前的ibdata1文件后再重新生成，遇到[Warning] Info table is not ready to be used. Table 'mysql.slave_master_info' cannot be opened.问题

    [转载] mysql5.6 删除之前的ibdata1文件后再重新生成,遇到[Warning] Info table is not ready to be used. Table 'mysql.slav ...

  5. 【英语】Bingo口语笔记(17) - 表示“感谢/不用客气“

  6. 《Unix网络编程》卷2 读书笔记 第1章-简介

    1. 概述 2. 进程.线程与信息共享 Unix进程间的信息共享有多种方式:注意下图中内核的位置   左边的两个进程共享存留于文件系统中某个文件上的某些信息.为访问这些信息,每个进程都得穿越内核. 中 ...

  7. Comparator与Comparable的异同

    同 它们都是Java的一个接口,都是用来实现集合中元素的比较.排序. 异 Comparator位于java.util下: Comparable位于java.lang下: Comparable(可比较的 ...

  8. 一天一点MySQL复习——存储过程

    一.存储过程概念 使用SQL编写访问数据库的代码时,可用两种方法存储和执行这些代码,一种是在客户端存储代码,并创建向数据库服务器发送的SQL命令(或SQL语句),比如在C#.Java等客户端编程语言中 ...

  9. JBPM4入门——3.JBPM4开发环境的搭建

    本博文只是简要对JBPM4进行介绍,如需更详细内容请自行google 链接: JBPM入门系列文章: JBPM4入门——1.jbpm简要介绍 JBPM4入门——2.在eclipse中安装绘制jbpm流 ...

  10. Datawindow.net 子数据窗口出错

    devexpress通过标签页面打开用户控件,数据窗口嵌入用户控件中.当点击数据窗口含下拉数据窗口字段时出现如下错误: 未处理 System.NullReferenceException Messag ...