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