不用jQuery，闲的蛋疼，写个文档对象拖拽功能-优快云博客

本文介绍了一个简单的拖拽效果实现方案，使用HTML、CSS和JavaScript来创建一个可拖动的元素，并详细展示了如何通过监听鼠标事件来改变元素的位置。

HTML代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/drag.css" media="all" />
		<script src="js/drag.js" type="text/javascript" ></script>
	</head>
	<body>
		<div id="wrapper">
			<div id="info"></div>
			<div id="control">
				<span class="tab">Add a tab:</span>
				<span class="button"></span>
			</div>
			<div class="dragger">
				<div class="title" name="title">
					<span class="hd">The first one</span>
					<span class="close" ></span>
				</div>
				<p class="content">
					Low prices on digital cameras, MP3, sports equipment, books, music, DVDs, video games, home  garden and much more. Free UK delivery on Amazon orders.
				</p>
			</div>
		</div>
	</body>
</html>

javascript代码：

drag.js

var dragging = false;
var x;
var y;
var xr; /* the position of the mouse pointer in the dragger */
var yr; /* the position of the mouse pointer in the dragger */
var info;
var dragger;
window.onload = load;
function load() {
	var targets = document.getElementsByName("title");
	var target = targets[0];
	dragger = target.parentNode;
	target.onmousedown = down;
	document.onmouseup = up;
	target.onmousemove = move; 
	/* dragger = target.parentNode; */
}
function down(ev) {
	ev = ev || window.event;
	dragging = true;
	xr = ev.layerX || ev.offsetX;
	yr = ev.layerY || ev.offsetY; 
	/* p.innerHTML +="x: " + xr + ", " + "y: " + yr + "\n"; */
}
function up(ev) {
	ev = ev || window.event;
	dragging = false;
	/* dragger = null; */
}
function move(ev) {
	ev = ev || window.event;
	if(dragging == true) {
		x =ev.clientX - xr;
		y =ev.clientY - yr;
		dragger.style.left = x + "px";
		dragger.style.top = y + "px";
		/* p.innerHTML +="x: " + x + ", " + "y: " + y + "  ";  */
	}
}	

document.onclick = monitor;
function monitor(ev) {
	ev = ev || window.event;
	var target = ev.target || ev.srcElement;
	info = document.getElementById("info");
	if(target.className=="close") {
		dragger = target.parentNode.parentNode;
		dragger.style.display="none";
	}
	else if(target.className=="button"){
		var wrapper = document.getElementById("wrapper");
		wrapper.innerHTML += "<div class=\"dragger\"><div class=\"title\"><span class=\"hd\">The first one</span><span class=\"close\" ></span></div><p class=\"content\">Low prices on digital cameras, MP3, sports equipment, books, music, DVDs, video games, home  garden and much more. Free UK delivery on Amazon orders.</p>";
		/* alert(wrapper.innerHTML);  */
	}
}

CSS代码

drag.css

/* =====================RESET CSS=====================*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* ========================================== */

.dragger, .title {
	border-radius:17px 17px 0 0;
}
.dragger {
	width:300px;
	height:300px;
	border:1px #e3e3e3 dotted;
	position:absolute;
	top:200px;
	left:500px;
	border-bottom-left-radius:10px;
	border-bottom-right-radius:10px;
}
.dragger {
	background: rgb(195,217,255);
	background: -moz-linear-gradient(top,  rgba(195,217,255,1) 0%, rgba(177,200,239,1) 41%, rgba(152,176,217,1) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(195,217,255,1)), color-stop(41%,rgba(177,200,239,1)), color-stop(100%,rgba(152,176,217,1)));
	background: -webkit-linear-gradient(top,  rgba(195,217,255,1) 0%,rgba(177,200,239,1) 41%,rgba(152,176,217,1) 100%);
	background: -o-linear-gradient(top,  rgba(195,217,255,1) 0%,rgba(177,200,239,1) 41%,rgba(152,176,217,1) 100%);
	background: -ms-linear-gradient(top,  rgba(195,217,255,1) 0%,rgba(177,200,239,1) 41%,rgba(152,176,217,1) 100%);
	background: linear-gradient(top,  rgba(195,217,255,1) 0%,rgba(177,200,239,1) 41%,rgba(152,176,217,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c3d9ff', endColorstr='#98b0d9',GradientType=0 );
	
}
.title {
	width:100%;
	height:40px;
	cursor:pointer;
}
.title {
	background: rgb(117,183,244);
	background: -moz-linear-gradient(top,  rgba(117,183,244,1) 0%, rgba(71,158,229,1) 24%, rgba(10,124,211,1) 51%, rgba(39,139,221,1) 80%, rgba(53,151,232,1) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(117,183,244,1)), color-stop(24%,rgba(71,158,229,1)), color-stop(51%,rgba(10,124,211,1)), color-stop(80%,rgba(39,139,221,1)), color-stop(100%,rgba(53,151,232,1)));
	background: -webkit-linear-gradient(top,  rgba(117,183,244,1) 0%,rgba(71,158,229,1) 24%,rgba(10,124,211,1) 51%,rgba(39,139,221,1) 80%,rgba(53,151,232,1) 100%);
	background: -o-linear-gradient(top,  rgba(117,183,244,1) 0%,rgba(71,158,229,1) 24%,rgba(10,124,211,1) 51%,rgba(39,139,221,1) 80%,rgba(53,151,232,1) 100%);
	background: -ms-linear-gradient(top,  rgba(117,183,244,1) 0%,rgba(71,158,229,1) 24%,rgba(10,124,211,1) 51%,rgba(39,139,221,1) 80%,rgba(53,151,232,1) 100%);
	background: linear-gradient(top,  rgba(117,183,244,1) 0%,rgba(71,158,229,1) 24%,rgba(10,124,211,1) 51%,rgba(39,139,221,1) 80%,rgba(53,151,232,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#75b7f4', endColorstr='#3597e8',GradientType=0 );
	
}
.hd {
	display:block;
	padding:8px 0 5px 12px;
	font-size:130%;
	font-weight:bold;
	float:left;
	color:#FFF;
	line-height:120%;
	text-shadow:-1px -1px 2px #162e16, 2px 2px 3px #162e16;
}
.title .close {
	width:40px;
	height:40px;
	vertical-align:middle;
	float:right;
	background:url(../img/close.png);
	cursor:pointer;
}
.content {
	padding:15px 10px;
	font-size:120%;
	color:#000;
	line-height:120%;
}
#control {
	width:260px;
	height:50px;
	margin:50px 0 0 50px;
}
#control span {
	display:block;
}
.tab {
	width:130px;
	float:left;
	font-size:150%;
	font-weight:bold;
	line-height:200%;
}
.button {
	float:left;
	height:49px;
	width:123px;
	cursor:pointer;
	background:url(../img/button.png);
}

/* ========================= clearfix =============================== */
/* http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified */

.clearfix:before,
.clearfix:after{
	content: '.';
	display: block;
	overflow: hidden;
	visibility: hidden;
	font-size: 0;
	line-height: 0;
	width: 0;
	height: 0;
}

.clearfix:after{
	clear: both;
}

/*
	The following zoom:1 rule is specifically for IE6 + IE7.
	Move to separate stylesheet if invalid CSS is a problem.
*/

.clearfix{
	zoom: 1;
}