<!DOCTYPE html>

<html lang="en">

　　<head>

　　　　<meta charset="UTF-8">

　　　　<title>divDrag</title>

　　　　<style>

　　　　　　#div1{

　　　　　　　　width: 300px;

　　　　　　　　height: 300px;

　　　　　　　　background-color: #ccc;

　　　　　　　　/*一定要绝对定位*/

　　　　　　　　position: absolute;

　　　　　　}

　　　　</style>

　　</head>

　　<body>

　　　　<div id="div1"></div>

　　　　<script src="drag.js"></script>

　　</body>

</html>

window.onload = function(){

　　var div1 = document.getElementById("div1");

　　div1.onmousedown = function(ev){

　　　　var oevent = ev || event;

　　　　var distanceX = oevent.clientX - div1.offsetLeft;

　　　　var distanceY = oevent.clientY - div1.offsetTop;

　　　　document.onmousemove = function(ev){

　　　　　　var oevent = ev || event;

　　　　　　div1.style.left = oevent.clientX - distanceX + 'px';

　　　　　　div1.style.top = oevent.clientY - distanceY + 'px';

　　　　};

　　　　document.onmouseup = function(){

　　　　　　document.onmousemove = null;

　　　　　　document.onmouseup = null;

　　　　};

　　;

};

js可以随意拖拽的div的实现的更多相关文章

  1. js实现可拖拽的div

    前言 下午忙里偷闲想写一个可拖拽的例子,留在脑海里一直都是三个事件mouseDown,mouseUp,mouseMove, 但从没有动手实践过,今天想起了自己实践了并学习了张鑫旭的demo实现. 学习 ...

  2. 简单的div元素拖拽到div

    drag1 drag2 drag3 代码如下: <!DOCTYPE HTML> <html> <head> <title>div拖拽到div</t ...

  3. JS Event 鼠标拖拽事件

    <!DOCTYPE html><html> <head>        <meta charset="UTF-8">         ...

  4. js插件-简单拖拽

    前端开发的时候,有好多地方用到拖拽效果,当然 http://jqueryui.com/draggable/  是个不错的选择,but 我是个打破砂锅问到底的人,抽点时间用js小小的实现了类似的插件,话 ...

  5. 拖拽改变div的大小

    拖拽改变div的大小 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type&qu ...

  6. 可以随鼠标拖拽的div

    可以拖拽的div <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://ww ...

  7. php和js实现文件拖拽上传

    Dropzone.js实现文件拖拽上传 http://www.sucaihuo.com/php/1399.html demo http://www.sucaihuo.com/jquery/13/139 ...

  8. 【原创】js实现一个可随意拖拽排序的菜单导航栏

    1.想做这个效果的原因主要是用在UC上看新闻发现他们的导航菜单很有趣.无聊的时候在哪划着玩了很久.所以就干脆自己写一个.原效果如下 2.整体效果如下,在已推荐和未添加里面每个小方块可以触摸移动位置互换 ...

  9. Dropzone.js实现文件拖拽上传

    dropzone.js是一个开源的JavaScript库,提供 AJAX 异步文件上传功能,支持拖拽文件.支持最大文件大小.支持设置文件类型.支持预览上传结果,不依赖jQuery库. 使用Dropzo ...

随机推荐

  1. ＭyBatis 中#{}与${}绑定参数的区别

    MyBatis 中#{}与${}绑定参数的区别: #{}将传入的数据都当成一个字符串,会对自动传入的数据加一个双引号.如:order by #{id},如果传入的值是111,那么解析成sql时的值为o ...

  2. luogu2679 子串

    题目大意 有两个仅包含小写英文字母的字符串 A 和 B.现在要从字符串 A 中取出 k 个互不重叠的非空子串,然后把这 k 个子串按照其在字符串 A 中出现的顺序依次连接起来得到一 个新的字符串,请问 ...

  3. Android隐藏状态栏和标题栏，相当于全屏效果

    隐藏标题栏需要使用预定义样式:android:theme=”@android:style/Theme.NoTitleBar”. 隐藏状态栏:android:theme=”@android:style/ ...

  4. 怎么看待MYSQL的性能

    MySQL在单实例性能方面和Oracle相比还有一些差距,我们通过规范和技术手段来降低这些性能差距带来的问题. 首先,大量甚至海量数据的增删改.查询.聚合查询的性能还有待提高.为了规避这些问题,我们在 ...

  5. Webservice 的安全策略

      摘自:http://www.cnblogs.com/shengel/archive/2008/11/20/1337723.html   Webservice为作为方便的服务被用广大领域使用的同时, ...

  6. P3399 丝绸之路(线性二维dp)

    P3399 丝绸之路 题目背景 张骞于公元前138年曾历尽艰险出使过西域.加强了汉朝与西域各国的友好往来.从那以后,一队队骆驼商队在这漫长的商贸大道上行进,他们越过崇山峻岭,将中国的先进技术带向中亚. ...

  7. 洛谷P1387最大正方形（dp，前缀和）

    题目描述 在一个n*m的只包含0和1的矩阵里找出一个不包含0的最大正方形,输出边长. 输入输出格式 输入格式: 输入文件第一行为两个整数n,m(1<=n,m<=100),接下来n行,每行m ...

  8. robotframework - 运行报错提示 No keyword with name 'Open Browser' found.

    用下面的例子为例: 1.输入以上robot脚本提示: 2.经查阅资料,大部分都使用的是selenium2 版本,无法解该的问题,目前小编使用的是selenium3,不知道selenium是哪个版本的话 ...

  9. 推荐给Web前端开发人员的一些书籍（从基础到架构阶段）

    有很多人问我说作为一个前端开发人员都需要看一些什么书籍,尤其是刚入门的新手,今天我整理了一下推荐给大家,大佬绕过. HTML+CSS+JavaScript 网页设计 从入门到精通 作为一个前端新手,强 ...

  10. Python细节(一)深浅拷贝

    深浅拷贝 只要涉及拷贝,就会涉及创建新对象 浅拷贝,会创建一个新的容器,列表中的元素和原列表的元素用的是同一个内存空间 第一种方法:从头切到尾,完整的复制一份 lst = [1,2,3,4] lst1 ...