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; }