<!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. MSP430G2553电子时钟实验

    用msp430g2553控制1602液晶显示时间,并能够通过按键设置时间.我做了正计时和倒计时两种模式 /*********************************************** ...

  2. 使用MongoDB 记录业务日志

    最近公司有个需求,要对业务日志进行记录并根据日志排查问题,以前都是使用log4net之类的日志组件来记录到文件,这种方式已经不能满足业务的需要,因为日志文件会很大,即使进行分割后,查找也是很不方便,何 ...

  3. grep -rl tttt /data/ 命令在 /data 目录下面搜寻包含tttt字符的命令

    grep --help -R, -r, --recursive equivalent to --directories=recurse -l, --files-with-matches print o ...

  4. 传统数据仓库架构与Hadoop的区别

    一, 下面一张图为传统架构和Hadoop的区别 主要讲以下横向扩展和扩展横向扩展:(Mpp 是hash分布,具有20节点)添加新的设备和现有的设备一起提供负载能力.Hadoop中系统扩容时,系统平台增 ...

  5. 不依任何赖第三方，单纯用vue实现Tree 树形控件

    这几天接到一个需求,里面有需要做一个属性组件,找的第三方的,但是不能完全满足我的需求,有这时间,我就自己做个小轮子吧. 先看效果图(红点之前用的字体图标,是个对号,这里为了方便,用圆圈代替了选中状态, ...

  6. iOS图片无损拉伸

    一张图片如果放大的话一般情况下会失真,如果该图片是规则的,比如这个聊天气泡,可以用如下代码来设置 UIImage *rightImg = [UIImage imageNamed:@"Sen ...

  7. error items-9022:missing required icon file.the bundle does not contain an app icon for iPhone/iPad Touch of exactly '120x120' pixels,in.pen format for ios versions >= 7.0

    error items-9022:missing required icon file.the bundle does not contain an app icon for iPhone/iPad ...

  8. Java程序发送邮件

    之前上网有看到过别人总结的使用java程序发送邮件,于是自己下来练习,把自己学习的一些心得总结出来. 首先我们这里需要采用两个jar包: 需要的朋友可以自行上网去CSDN类似的网站上面找 顺便把自己测 ...

  9. 4.AutowireCapableBeanFactory 自动装配工厂

    AutowireCapableBeanFactory 根据名称:自动装配的BeanFactory,其实也是对BeanFactory的增强 源代码: /* * Copyright 2002-2016 t ...

  10. maven filters 和 resource

    1 filter 1.1 用途 对多个配置文件进行选择. 1.2 选择的依据 1.3 使用的方式 第一,在<resource>标签下面加<filtering>标签,并且< ...