<!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. zabbix 自定义脚本监控activemq

    1. 编写获取activemq队列积压消息(check-amq.sh) #!/bin/bash QUEUENAME=$ MQ_IP='172.16.1.56' curl -uadmin:admin h ...

  2. 用PreferenceActivity做一个标准的设置界面

    最后接触到一个任务,做一个工厂设置,在我看来工厂设置不需要多美观,但是一定要方便修改,添加功能,再就是使用方便,我就想到了用PreferenceActivity,android系统的settings就 ...

  3. python 利用pymssql连接MSSQL数据库，简单示例

    #-*- coding:GBK -*- import pymssql print 'Connect to the Datebase....' conn = pymssql.connect(host=' ...

  4. FreeSWITCH 学习笔记

    [1]FreeSWITCH学习笔记 1.Windows安装包下载地址:http://files.freeswitch.org/windows/installer/ 2.源码下载地址:http://fi ...

  5. 3s 简介

    "3S"技术是英文遥感技术(Remote Sensing RS).地理信息系统(Geographical information System GIS).全球定位系统(Global ...

  6. Apache启动失败（Windows 无法在本地计算机启动Apache2.2）

    该问题产生的原因有很多,这里就说说我遇到的问题: 这个问题是突然遇到的,启动的时候连日志都没有产生,最后是通过window的日志中发现问题所在的,如图所示: 发现是目录错了.其他问题也可以通过该日志找 ...

  7. EasyPlayer RTSP播放器运行出现： Unable to load DLL 找不到指定的模块。exception from HRESULT 0x8007007E 解决方案

    最近有EasyPlayer RTSP播放器的开发者反馈,在一台新装的Windows Server 2008的操作系统上运行EasyPlayer RTSP播放器出现"Unable to loa ...

  8. spring mvc中的@PathVariable

    spring mvc中的@PathVariable是用来获得请求url中的动态参数的,十分方便,复习下: @Controller public class TestController { @Requ ...

  9. 合理的布局，绚丽的样式，谈谈Winform程序的界面设计

    转载,不错的学习文章 阅读后,起初不太明白,试验了几次后明白了dev的强大.从事Winform开发很多年了,由于项目的需要,设计过各种各样的界面效果.一般来说,运用传统的界面控件元素,合理设计布局,能 ...

  10. 九度OJ 1249：次小生成树 （次小生成树）

    时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:203 解决:56 题目描述: 最小生成树大家都已经很了解,次小生成树就是图中构成的树的权值和第二小的树,此值也可能等于最小生成树的权值和,你 ...