<!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. Java学习之SpringMVC零配置实践

    概述:本实践主要是对SpringMVC的主要功能做了一个大概的体验,将原来的SpringMVC的大量配置改成用SpringBoot进行集成,做到了零XML配置,本次实践分为两个部分,一部分为基本功能实 ...

  2. X509 文件扩展名

    编码 (也用于扩展名) .DER = 扩展名DER用于二进制DER编码的证书.这些证书也可以用CER或者CRT作为扩展名.比较合适的说法是“我有一个DER编码的证书”,而不是“我有一个DER证书”. ...

  3. 1107SQLserver基础--语句、存储过程

    [随堂练习]--查询‘李数’老师教的数学成绩大于80分的学生的信息, 并且人数大于3的话,输出达标:否则输出不达标. 存储过程 --带参数的程序代码块---代表执行命令存储在数据库中,存储代码,没有调 ...

  4. DDD学习笔录——简介领域驱动设计的实践与原则

    DDD在存在许多DDD模式的同时,也有大量实践和指导原则,这些都是DDD思想体系成功的关键. 1.专注于核心领域 DDD强调的是在核心子域付出最多努力的需要.核心子域是你的产品会成功还是会失败的差异化 ...

  5. django之admin组件

    一.面向对象复习 1.类的继承 class Base(object): def __init__(self,val): self.val = val def func(self): self.test ...

  6. css代码结构

    整个文档结构如下: 一般性样式 主体样式 reset样式 链接 标题 其他元素 辅助样式 表单 通知和错误 一致的条目 页面结构 标题.页脚和导航 布局 其他页面结构元素 页面组件 各个页面 覆盖

  7. Android屏幕适配终结者

    1,http://blog.csdn.net/zhengjingle/article/details/51742839 github : https://github.com/zhengjingle/ ...

  8. Win10系统下安装360安全卫士，安装完成后一直提示

     新买的电脑,第一次安装360安全卫士,安装完成后一直报这个错误,显示MiniUI.dll文件不存在,但这个文件就在安装目录下:后面有多次卸载.安装都能能成功,求助大神        

  9. Python 网络爬虫 007 (编程) 通过网站地图爬取目标站点的所有网页

    通过网站地图爬取目标站点的所有网页 使用的系统:Windows 10 64位 Python 语言版本:Python 2.7.10 V 使用的编程 Python 的集成开发环境:PyCharm 2016 ...

  10. 3dsmax里面的喷射器spray和超级喷射器superspray是个什么东西

    以前搜索过粒子系统的一些资料,最早有一篇什么论文里提到一种方法可以用计算机模拟一些看起来数目比较多的一些效果,比如 很多雨滴.下雪天的雪花,作者把这个东西叫particle system,就是粒子系统 ...