<!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. php实现等比例不失真缩放上传图片的方法

    本文实例分析了php实现等比例不失真缩放上传图片的方法.分享给大家供大家参考,具体如下: 有时上传图片时因为图片太大了,不仅占用空间,消耗流量,而且影响浏(图片的尺寸大小不一).下面分享一种等比例不失 ...

  2. xshell 连接腾讯服务器

    1.先关机, 创建秘钥,再绑定主机,下载秘钥保存下来 2. 填写好主机好和端口 3 4.导入刚才下载的文件 记住用户名是ubuntu 不是root!!

  3. 托管程序调用非托管dll问题总结

    托管程序Visual Basic.net, 非托管DLL标准C++程序(使用VC++编译) 函数调用定义 第一种写法: <DllImportAttribute("XXX.dll&quo ...

  4. UGUI随记

    <color=#ffef00ff>武器</color>:巨剑 <color=#ffef00ff>种族</color>:人族 <color=#ffe ...

  5. 九度OJ 1262：Sequence Construction puzzles(I)_构造全递增序列 （DP）

    时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:118 解决:54 题目描述: 给定一个整数序列,请问如何去掉最少的元素使得原序列变成一个全递增的序列. 输入: 输入的第一行包括一个整数N( ...

  6. greenlet和gevent模块的区别？

    协程是一中多任务实现方式,它不需要多个进程或线程就可以实现多任务. yield能实现协程,不过实现过程不易于理解,greenlet是在这方面做了改进,通过switch. greenlet可以实现协程, ...

  7. spring项目改名后不能启动的原因及解决办法

    今日修改了一个spring项目的项目名称,修改后启动项目Debug as->Debug on server,过了很久也没有出现web首页,仔细看项目的定时器已经启动,eclipse的Consol ...

  8. pom.xml配置文件详解（转发）

    setting.xml主要用于配置maven的运行环境等一系列通用的属性,是全局级别的配置文件:而pom.xml主要描述了项目的maven坐标,依赖关系,开发者需要遵循的规则,缺陷管理系统,组织和li ...

  9. 使用JavaScript定义一个微信小程序插件样例

    var wxTimer = new wxTimer({ beginTime: "00:00:20", complete: function () { wx.redirectTo({ ...

  10. chorme 插件

    json-handle: json可视化工具 开发中需要用到json,在浏览器显示的json非常乱,难以理解.有没有让人一目了然的工具,让json看起来非常直观呢,json-handle随之而出,包含 ...