<!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代码中使用post参数上传大文件

    今天连续碰到了两个同事向我反应上传大文件(8M)失败的事情! 都是在PHP代码中通常使用post参数进行上传文件时,当文件的大小大于8M时,上传不能不成功. 首先,我想到了nginx的client_m ...

  2. 原创：解决 python中moviepy调用ffmpeg的错误：subprocess, PermissionError: [WinError 5] 拒绝访问

    近期运行一个python程序用到了moviepy.editor.VideoFileClip() moviepy基于ffmpeg,但是并不是pip安装的ffmepg, 执行 import imageio ...

  3. Linux5_环境变量

    1.总结背景 在linux系统下,下载并安装了应用程序,很有可能在键入它的名称时出现“command not found”的提示内容. 每次都到安装目标文件夹内,找到可执行文件来进行操作就太繁琐了.这 ...

  4. Java并发专题 带返回结果的批量任务执行

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/27250059 一般情况下,我们使用Runnable作为基本的任务表示形式,但是R ...

  5. 由浅到深理解ROS（4）

    消息和消息类型 节点能相互传递消息,节点之间通信也是基于消息.消息类型也就是数据类型数据类型,理解消息的类型很重要,因为它决定了消息的内容.也就是说,一个话题的消息类型能告诉你该话题中每个消息携带了哪 ...

  6. 【BZOJ1000】A+B Problem ★BZOJ1000题达成★

    [BZOJ1000]A+B Problem Description 输入两个数字,输出它们之和 Input 一行两个数字A,B(0<=A,B<100) Output 输出这两个数字之和 S ...

  7. 查看Android.mk文件中的变量的值

    当某个Android.mk中包含如下: LOCAL_PATH := $(call my-dir) include $(CLEAR_VARS) LOCAL_C_INCLUDES += \ $(LOCAL ...

  8. Map集合按value的大小排序

    public static void main(String[] args) { Map<String, Integer> map = new HashMap<String, Int ...

  9. 【python】-- 多进程的基本语法 、进程间数据交互与共享、进程锁和进程池的使用

    多进程 进程之间是相互独立的,python是启动进程的时候,是启动的是原生进程.进程是没有GIL锁的,而且不存在锁的概念,进程之间的数据式不能共享的,而线程是可以的. 1.进程的定义 用mulipro ...

  10. Card Collector(期望+min-max容斥)

    Card Collector(期望+min-max容斥) Card Collector woc居然在毫不知情的情况下写出一个min-max容斥 题意 买一包方便面有几率附赠一张卡,有\(n\)种卡,每 ...