<!DOCTYPE html>

<html>

<head>

    <title></title>

    <style type="text/css">

        #a{

            width: 100px;

            height: 100px;

            background: yellow;

            position: absolute;

        }

    </style>

</head>

<body>

  <div id='a'></div>

  <script type="text/javascript">

      a.onmousedown=function(e){

          var ev=e||event

          var l=ev.clientX -this.offsetLeft;

          var t=ev.clientY -this.offsetTop;

          document.onmousemove=function(e){

           var ev=e||event

            a.style.left=ev.clientX-l+'px';

            a.style.top=ev.clientY-t+'px'

          };

          document.onmouseup=function(){

              document.onmousemove=null;

              document.onmousedown=null;

          }
    return false;

      }

  </script>

</body>

</html>

javascript拖拽事件的更多相关文章

  1. day52—JavaScript拖拽事件的应用（自定义滚动条）

    转行学开发,代码100天——2018-05-07 前面的记录里展示了JavaScript中鼠标拖拽功能,今天利用拖拽功能实现另一个应用场景——自定义滚动条(作为控制器)的用法. 常通过自定义滚动条控制 ...

  2. javascript 拖拽事件

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. 每日分享！～ JavaScript(拖拽事件）

    浏览器的拖拉事件 拖拉(drag)指的是,用户在某个对象上按下鼠标键不放,拖动它到另一个位置,然后释放鼠标键,将该对象放在那里. 拖拉的对象有好几种,包括元素节点.图片.链接.选中的文字等等.在网页中 ...

  4. day50—JavaScript鼠标拖拽事件

    转行学开发,代码100天——2018-05-05 今天通过鼠标拖拽事件复习巩固一下鼠标事件. 鼠标拖拽事件需要记住两点: 1.距离不变 2.鼠标事件(按下,移动,抬起) <div id=&quo ...

  5. html5拖拽事件 xhr2 实现文件上传 含进度条

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  6. Javascript 拖拽的一些高级的应用——逐行分析代码，让你轻松了解拖拽的原理

    我们看看之前的拖拽在周围有东西的时候会出现什么问题? 在高级浏览器中不会有啥问题,我们放到IE7下面测试一下,问题就出来了.如图 我们可以很清楚的看到,文字都已经被选中了.那这个用户体验很不好,用起来 ...

  7. Javascript 拖拽的一些简单的应用——逐行分析代码，让你轻松了解拖拽的原理

    今天我们来看看如何让拖拽的物体不能拖出某个div之外和拖拽的吸附功能 上次讲到我们的拖拽是不可拖出可视区范围的,在这基础上我们加个父级的div,不让他拖出父级.原理和之前的一样,简单吧. <di ...

  8. Javascript 拖拽雏形中的一些问题——逐行分析代码，让你轻松了解拖拽的原理

    今天我们就来解决上一次拖拽雏形中的一些问题.下面看看有哪些问题? 附上上期的Javascript代码,方便大家查看问题. <script type="text/javascript&q ...

  9. 完美实现鼠标拖拽事件，解决各种小bug，基于jquery

    鼠标拖拽事件是web中使用频率极高的事件,之前写过的代码包括网上的代码,总存在各种各样的问题,包括拖拽体验差,松开鼠标后拖拽效果仍存在以及代码冗余过大等 本次我才用jQuery实现一个尽可能高效的拖拽 ...

随机推荐

  1. web.config中namespace的配置（针对页面中引用）

    1,在页面中使用强类型时: @model GZUAboutModel @using Nop.Admin.Models//命名空间(注意以下) 2,可以将命名空间提到web.config配置文件中去,此 ...

  2. Rename Oracle Managed File (OMF) datafiles in ASM(ZT)

    Recently I was asked to rename a tablespace. The environment was Oracle version 11.2.0.3 (both datab ...

  3. 问题：table 可否实现对角线；结果：用div+css模拟表格对角线

    首先声明: 这只是探讨一种CSS模拟表格对角线的用法,实际在工作中可能觉得这样做有点小题大作,这不是本主题讨论的重点.如果对此深以为然的朋友,请一笑过之... 有时在插入文档时,要用到表格对角线,常见 ...

  4. Runtime机制的使用整理

    一.基本概念 1.1.RunTime简称运行时,就是系统在运行的时候的一些机制,其中最主要的是消息机制. 1.2.对于C语言,函数的调用在编译的时候会决定调用哪个函数,编译完成之后直接顺序执行,无任何 ...

  5. 用JS，打印99乘法表

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  6. request 10.0 模块安装

     https://pypi.python.org/packages/49/6f/183063f01aae1e025cf0130772b55848750a2f3a89bfa11b385b35d7329d ...

  7. ImageView 的 ScaleType

    /** * Options for scaling the bounds of an image to the bounds of this view. 将一个图片的边界缩放到这个view边界的几种选 ...

  8. Python之路：面向对象及相关

    其他相关 一.isinstance(obj, cls) 检查是否obj是否是类 cls 的对象 class Foo(object):     pass   obj = Foo()   isinstan ...

  9. multi-mechanize安装实践

    关于multi-mechanize的详细介绍参见如下链接,是其官网 http://testutils.org/multi-mechanize/setup.html multi-mechanize是一款 ...

  10. vue 之 面向对象

    JavaScript 语言中,生成实例对象的传统方法是通过构造函数. function Animal(name,age){ this.name = name; this.age = age; } An ...