<!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. 【Python + Selenium】之JS定位总结

    感谢:小琰子 Python+Selenium 脚本中的一些js的用法汇总: 1.滚动条 driver.set_window_size(500,500) js = "window.scroll ...

  2. Java研发工程师面试题

    基础题 一.String,StringBuffer, StringBuilder 的区别是什么?String为什么是不可变的?1. String是字符串常量,StringBuffer和StringBu ...

  3. Latex中參考文献排序

    \bibliographystyle{unsrt}:依照引用的先后排序 \bibliographystyle{plain}:按字母的顺序排列,比較次序为作者.年度和标题.当中作者中姓氏字母优先. 关于 ...

  4. 【BZOJ3270】博物馆 期望DP+高斯消元

    [BZOJ3270]博物馆 Description 有一天Petya和他的朋友Vasya在进行他们众多旅行中的一次旅行,他们决定去参观一座城堡博物馆.这座博物馆有着特别的样式.它包含由m条走廊连接的n ...

  5. 【BZOJ3744】Gty的妹子序列 分块+树状数组

    [BZOJ3744]Gty的妹子序列 Description 我早已习惯你不在身边, 人间四月天 寂寞断了弦. 回望身后蓝天, 跟再见说再见…… 某天,蒟蒻Autumn发现了从 Gty的妹子树(bzo ...

  6. python 列表中字符串排序故事一则

    a = ["bca","cab","abc"] 有时候需要对列表排序 如果是对列表中整个元素 直接用sort()排序 如果想按元素的某一段排 ...

  7. inux c编程：记录锁

    记录锁的功能:当一个进程正在读或修改文件的某个部分是,它可以阻止其他进程修改同一文件区.对于这个功能阐述我认为有三点要解释的: 记录锁不仅仅可以用来同步不同进程对同一文件的操作,还可以通过对同一文件加 ...

  8. LeetCode：三个数的最大乘积【628】

    LeetCode:三个数的最大乘积[628] 题目描述 给定一个整型数组,在数组中找出由三个数组成的最大乘积,并输出这个乘积. 示例 1: 输入: [1,2,3] 输出: 6 示例 2: 输入: [1 ...

  9. 基于Linux Shell的开机启动服务

    CentOS重启后,很多服务需要手动启动,很是麻烦,今天把需要开机启动或关闭的服务整理了一下,放入Linux Shell中,再将该Shell加入/etc/rc.local中,即可实现存储的自动挂载.S ...

  10. 怎么在js里写html

    <html> <head> <meta charset="utf-8"/> <title>示例前端模板写在代码里</title ...