<!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

     <style>

         #box{

             margin:100px;

             width: 200px;

             height: 200px;

             background-color: green;

         }

         #box:hover{

             cursor: pointer;

         }

     </style>

 </head>

 <body>

 <div>

     <div id="box"></div>

     </div>

     <script>

         var $box=document.getElementById('box');

         var $x,$y;

         $box.onmousedown=function(e){

             $x=parseInt(e.pageX-parseInt($box.offsetLeft));

             $y=parseInt(e.pageY-parseInt($box.offsetTop));

             $box.onmousemove=function(e){

                 $box.style.marginLeft=e.pageX-$x+'px';

                 $box.style.marginTop=e.pageY-$y+'px';

             }

         }

         window.onmouseup=function(){

             $box.onmousemove=null;

         }

     </script>

 </body>

 </html>

一个可以拖拽的div的更多相关文章

  1. 一个可拖拽的DIV框框

    http://codepen.io/lrelia/pen/bEyLB 使用了JQuery UI库, draggable来自于JQuery UI库

  2. js实现可拖拽的div

    前言 下午忙里偷闲想写一个可拖拽的例子,留在脑海里一直都是三个事件mouseDown,mouseUp,mouseMove, 但从没有动手实践过,今天想起了自己实践了并学习了张鑫旭的demo实现. 学习 ...

  3. dropzonejs中文翻译手册 DropzoneJS是一个提供文件拖拽上传并且提供图片预览的开源类库.

    http://wxb.github.io/dropzonejs.com.zh-CN/dropzonezh-CN/ 由于项目需要,完成一个web的图片拖拽上传,也就顺便学习和了解了一下前端的比较新的技术 ...

  4. jquery实现可拖拽的div

    由于项目中并未引入前端开发框架easyui.ext.没有现成的控件可以使用,今天时间算是充裕的时候,自己写了一个可以拖拽.放大缩小的例子.欢迎大家指正. 不啰嗦,上代码: 依赖的文件:jquery.j ...

  5. 拖拽改变div的大小

    拖拽改变div的大小 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type&qu ...

  6. Javascript写的一个可拖拽排序的列表

    自己常试写了一个可拖拽进行自定义排序的列表,可能写的不太好,欢迎提供意见. 我的思路是将列表中的所有项都放进一个包裹层,将该包裹层设为相对定位,每当点击一个项时,将该项脱离文档并克隆一份重新添加到文档 ...

  7. DropzoneJS是一个提供文件拖拽上传并且提供图片预览的开源类库.

    DropzoneJS是一个提供文件拖拽上传并且提供图片预览的开源类库. 它是轻量级的,不依赖任何其他类库(如JQuery)并且高度可定制. 试试看! 将文件拖至此处或点击上传.(这仅仅是 dropzo ...

  8. (Demo分享)利用JavaScript（JS）实现一个九宫格拖拽功能

    利用JavaScript(JS)实现一个九宫格拖拽功能   Demo实现了对任意方格进行拖拽,可以交换位置,其中Demo-1利用了勾股定理判断距离! Demo-1整体思路: 1.首先div实现自由移动 ...

  9. 简单的div元素拖拽到div

    drag1 drag2 drag3 代码如下: <!DOCTYPE HTML> <html> <head> <title>div拖拽到div</t ...

随机推荐

  1. Hibernate: 数据持久层框架

    Hibernate 是一种Java语言下的对象关系映射解决方案. 它是使用GNU宽通用公共许可证发行的自由.开源的软件.它为面向对象的领域模型到传统的关系型数据库的映射,提供了一个使用方便的框架.Hi ...

  2. JVM调优- 学习笔记（转）

    http://blog.csdn.net/fenglibing/article/details/6321453 GC学习笔记 这是我公司同事的GC学习笔记,写得蛮详细的,由浅入深,循序渐进,让人一看就 ...

  3. 【JavaEE】Springmvc+Spring整合及example

    这一篇在前一篇Springmvc的基础上,加上Spring.Spring的主要用途叫做控制反转(依赖注入,IoC/DI)和面向切面的编程(AOP),本文只介绍IoC,因为AOP主要的应用场景是记录日志 ...

  4. ASP.NET动态网站制作（16）-- SQL数据库（2）

    前言:SQL数据库的第二节课,继续讲解基本的语句及用法. 内容: 1.insert插入语句  insert into Book(bookName,bookPrice,bookAuthor) value ...

  5. 走进EC6的let和const命令

    详细学习链接: http://es6.ruanyifeng.com/#docs/let let命令 基本用法 ES6新增了let命令,用来声明变量.它的用法类似于var,但是所声明的变量,只在let命 ...

  6. 用C#来学习唐诗三百首和全唐诗

    Begin 最近把项目做完了,闲来无事,就想做点好玩的事情,刚好前几天下载了[唐诗三百首]和[全唐诗]这两个txt文件,正好用C#来整理一下. 然后导出QData格式,可以给其他软件读取. 以后弄个开 ...

  7. 基于PLSQL的数据库备份方法及如何解决导出clob和blob类型数据报错的问题

    基于PL/SQL的数据库备份方法 PL/SQL Developer是Oracle 数据库中用于导入或导出数据库的主要工具,本文主要介绍了利用PL/SQL Developer导入和导出数据库的过程,并对 ...

  8. JAVA NIO 简介 (netty源码死磕1.1)

    [基础篇]netty 源码死磕1.1:  JAVA NIO简介 1. JAVA NIO简介 Java 中 New I/O类库 是由 Java 1.4 引进的异步 IO.由于之前老的I/O类库是阻塞I/ ...

  9. PAT 1051. 复数乘法 (15)

    复数可以写成(A + Bi)的常规形式,其中A是实部,B是虚部,i是虚数单位,满足i2 = -1:也可以写成极坐标下的指数形式(R*e(Pi)),其中R是复数模,P是辐角,i是虚数单位,其等价于三角形 ...

  10. Linux中rpm包管理器

    包全名: 1.操作的包是没有安装的软件包时,使用全名,而且要注意路径 2.例如:jdk-8u131-linux-x64.rpm包名: 1.操作的是已经安装好的软件包,使用包名,是搜索/var/lib/ ...