var drag = function(){

    var obj = document.getElementById("id");

    var s = obj.style;

    var b = document.body;

    var x = event.clientX + b.scrollLeft - s.pixelLeft;

    var y = event.clientY + b.scrollTop - s.pixelTop; 

    var m = function(){

	  if(event.button == 1){

	   s.pixelLeft = event.clientX + b.scrollLeft - x;

	   s.pixelTop = event.clientY + b.scrollTop - y;

	  }else {

	   document.detachEvent("onmousemove", m);

	  }

    };

    document.attachEvent("onmousemove", m);

    if(!this.z)

	  this.z = 999;

    s.zIndex = ++this.z;

    event.cancelBubble = true;

};

然后在div中

<div onmousedown='subway.encapsulate.drag();return false;'/>

另外，DIV中有自己的拖动事件ondrag()，但是下面的函数还有点问题是拖动时有重影。

<html>

<head>

<meta http-equiv="content-type" content="text/html;charset=utf-8">

</head>

<style type="text/css">

#myDiv{

	background-color:#01ff32;

	height:200px;

	width:200px;

	top:100px;

	left:300px;

	position:absolute;

}

h1{

	font-size:40px;

}

font{

	color:red;

}

</style>

<script>

function drag(event){

	document.getElementById('myDiv').style.top = event.clientY;

	document.getElementById('myDiv').style.left = event.clientX;

	document.getElementById('myDiv').style.cursor='default'

	//event.cancelBubble = true;

	document.getElementById('myDiv')

}

function changeCousor(){

}

</script>

<body>

<div id="myDiv" ondrag ="drag(event);" onmousedown = "this.draggable = true; " onmouseover="this.style.cursor='hand'">

	<center>

		<h1><font>drag me</font></h1>

	</center>

</div>

</body>

</html>

红色部分标记出来的部分比较重要。再有就是问题出现的原因应该是坐标的计算有点问题。目前的几个坐标还没有考虑清楚，后面会详细介绍几种坐标！

创建一个可拖动的DIV的更多相关文章

  1. 如何用JavaScript做一个可拖动的div层

    可拖动的层在Web设计中用处很多,比如在某些需要自定义风格布局的应用中,控件就需要拖动操作,下面介绍一个,希望可以满足你的需求,顺便学习一下可拖动的层是如何实现的. 下面是效果演示: 这个DIV可以移 ...

  2. [转]创建一个JavaScript弹出DIV窗口层的效果

    本文转自:http://www.soso.io/article/23698.html <!doctype html> <html lang="en"> &l ...

  3. 创建一个弹出DIV窗口

    创建一个弹出DIV窗口 摘自:   http://www.cnblogs.com/TivonStone/archive/2012/03/20/2407919.html 创建一个弹出DIV窗口可能是现在 ...

  4. 【iOS】用Layer创建一个三维模型以及拖动

    关于CALayer的介绍以及基本属性,在这篇博客中有交代:CoreAnimation —— CALayer 这篇博客讲述简单的通过对layer的transform属性的设置一个CATransform3 ...

  5. 让一个div拖动和让一个panel拖动加拉大拉小

    一.让一个div拖动 <!doctype html> <html xmlns="http://www.w3.org/1999/xhtml"> <hea ...

  6. google maps js v3 api教程(1) -- 创建一个地图

    原文地址 google maps javascript官方文档:https://developers.google.com/maps/documentation/javascript/ 在创建地图之前 ...

  7. 鼠标拖动改变DIV等网页元素的大小的最佳实践

    1.初次实现 1.1 html代码 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" la ...

  8. 简单创建一个SpringCloud2021.0.3项目（二）

    目录 1. 项目说明 1. 版本 2. 用到组件 3. 功能 2. 上一篇教程 3. 创建公共模块Common 4. 网关Gateway 1. 创建Security 2. Security登陆配置 3 ...

  9. 在一个空ASP.NET Web项目上创建一个ASP.NET Web API 2.0应用

    由于ASP.NET Web API具有与ASP.NET MVC类似的编程方式,再加上目前市面上专门介绍ASP.NET Web API 的书籍少之又少(我们看到的相关内容往往是某本介绍ASP.NET M ...

随机推荐

  1. 【AtCoder】ARC081

    C - Make a Rectangle 每次取两个相同的且最大的边,取两次即可 #include <bits/stdc++.h> #define fi first #define se ...

  2. python全栈开发day31-操作系统介绍，异步、同步、阻塞、非阻塞，进程

    一.网络编程内容回顾 1.arp协议 #交换机 #广播.单播 2.ip协议 3.tcp和udp协议 tcp:可靠的,面向连接的,字节流传输,长连接 三次握手:一方发送请求,另一方确认请求同时发送请求, ...

  3. Linux dnsmasq.conf

    一.配置文件:局域网内使用此dns服务时候首先会在host.dnsmasp里面找对应域名,若找不到则在resolv.dnsmasq中找 [root@operation_server dnsmasq.d ...

  4. POJ3237 Tree 树链剖分 线段树

    欢迎访问~原文出处——博客园-zhouzhendong 去博客园看该题解 题目传送门 - POJ3237 题意概括 Description 给你由N个结点组成的树.树的节点被编号为1到N,边被编号为1 ...

  5. [ 原创 ] Centos7.6安装Mysql5.7

    https://blog.csdn.net/shj_php/article/details/86712408 CentOS7下安装MySQL5.7安装与配置(YUM) http://blog.csdn ...

  6. python-线程的暂停, 恢复, 退出

    我们都知道python中可以是threading模块实现多线程, 但是模块并没有提供暂停, 恢复和停止线程的方法, 一旦线程对象调用start方法后, 只能等到对应的方法函数运行完毕. 也就是说一旦s ...

  7. BZOJ.3546.[ONTAK2010]Life of the Party(二分图匹配 ISAP)

    题目链接 题意:求哪些点一定在最大匹配中. 这儿写过,再写一遍吧. 求哪些点不一定在最大匹配中.首先求一遍最大匹配,未匹配点当然不一定在最大匹配中. 设一个未匹配点为A,如果存在边A-B,且存在匹配边 ...

  8. 通俗讲解 异步，非阻塞和 IO 复用

    1. 阅前热身 为了更加形象的说明同步异步.阻塞非阻塞,我们以小明去买奶茶为例. 1.1 同步与异步 同步与异步的理解 同步与异步的重点在消息通知的方式上,也就是调用结果通知的方式. 同步: 当一个同 ...

  9. DBProxy

    DBProxy/USER_GUIDE.md at master · Meituan-Dianping/DBProxy   https://github.com/Meituan-Dianping/DBP ...

  10. 转：深入理解Java G1垃圾收集器

    本文首先简单介绍了垃圾收集的常见方式,然后再分析了G1收集器的收集原理,相比其他垃圾收集器的优势,最后给出了一些调优实践. 一,什么是垃圾回收 首先,在了解G1之前,我们需要清楚的知道,垃圾回收是什么 ...