<!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. 2016.2.24 利用用户控件和委托完美解决快速选择txbbox

    1.首先将tet_box和一个datagridview控件打包成用户控件uC_QuickTxtBox 2.在用户控件中定义执行主窗口的委托函数 3.主窗体中添加用户控件的load事件,赋值 uC_Qu ...

  2. Linux常用的编辑保存退出命令

    Vi Vim进入编辑后退出 按ESC后 1.保存退出 :wq :x 最快捷的方法:直接按shift+zz,或者切换到大写模式按ZZ,就可以保存退出了,即是按2下大写的Z.区别::wq 强制性写入文件并 ...

  3. myeclipse 10破解

    因为笔者的电脑是刚买不久,忘记先给电脑分区,等软年安装差不多了才发现忘记分区,所以就备份了数据,然后分区,结果分区过程中没有异常发生,就没用备用数据,就用分过区的原数据,当时还以为没问题,结果打开my ...

  4. DAY17-Django之model查询

    查询表记录 看专业的官网文档,做专业的程序员! 查询相关API <1> all(): 查询所有结果——QuerySet <2> filter(**kwargs): 它包含了与所 ...

  5. IntelliJ IDEA 导入Project

    一.方式一 File---->Close Project 这样的户每次需要import,都要close一次,非常不方便,如果能在File下面岂不是更好? 二.方式二 File---->Se ...

  6. Aborted connection+druid

    试一试setTimeBetweenEvictionRunsMillis +setMaxEvictableIdleTimeMillis小于 mysql的wait_timeout

  7. CentOS6.5 释放SWAP

      虚拟内存的释放一般都是伴随着关闭应用程式来说的   可以通过命令刷新swap还原到初始状态: swapoff -a swapon -a     例如: [root@wjlcn1026 vm]# f ...

  8. java线程的三种实现方式

    线程实现的三种种方式: 一个是继承Thread类,实现run()方法: 一个是实现Runnable接口,实现run()方法: 一个是实现Callable接口,实现call()方法:该方式和实现Runn ...

  9. [chmod]linux中给文件增加权限

    chmod命令 1.chmod u+x file.sh 2.sudo chmod 777  文件名 注: 如果给所有人添加可执行权限:chmod a+x 文件名:如果给文件所有者添加可执行权限:chm ...

  10. __get(),__set(),__isset(),__unset()

    __get(),__set(),__isset(),__unset() 在给不可访问属性赋值时,__set()会被调用读取不可访问属性的值时,__get()会被调用 当对不可访问属性调用isset() ...