不要jQuery，闲的蛋疼，写个文档对象拖拽功能
不用jQuery，闲的蛋疼，写个文档对象拖拽功能
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;
}