Tip: you can modify some code before running
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><ptml xmlns="http://www.w3.org/1999/xhtml"><pead><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Native javascript effect: Simple drag</title><style type="text/css"># Con {width: 200px; height: 100px; padding: 10px; position: absolute; background: #333; color: # fff ;}/ * YUI reset */* {margin: 0; padding: 0;}/* body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {margin: 0; padding: 0 ;}*/table {border-collapse: collapse; border-spacing: 0;} fieldset, img {border: 0;} address, caption, cite, code, dfn, em, strong, th, var {font-style: normal; font-weight: normal;} ol, ul, li {list-style: none;} caption, th {text-align: left;} h1, h2, h3, h4, h5, h6 {font-size: 100%; font-weight: normal;} q: before, q: after {content: '';} abbr, acronym {border: 0 ;} /* my */. clearfix: after {content :". "; display: block; height: 0; clear: both; visibility: hidden ;}. clearfix {* zoom: 1;} body {color: #333; font-size: 12px; font-family: Verdana, Arial, Helvetica, sans-serif ;} a {text-decoration: none; color: #333;} a: hover {text-decoration: underline ;}. wrapper {width: 600px; margin: 0 auto; padding-bottom: 50px ;}. ad {width: 468px; margin: 10px auto 0 ;}. ad li {padding-top: 5px;} h1 {height: 50px; line-height: 50px; font-size: 22px; font-weight: normal; font-family: "Microsoft YaHei", SimHei ;}. download {display: inline-block; height: 34px; line-height: 34px; padding: 0 10px; background: #333; font-size: 14px; font-weight: bold; text-align: center; color: # fff; border: 1px solid #999; margin-top: 10px ;}. fenxiang {height: 16px; padding: 20px 0 10px; margin-bottom: 10px ;}. shuoming {margin-top: 20px; border: 1px solid # ccc; padding-bottom: 10px ;}. shuoming dt {height: 30px; line-height: 30px; font-weight: bold; text-indent: 10px ;}. shuoming dd {line-height: 20px; padding: 5px 20px ;}. shuoming dd a {text-decoration: underline ;}. tongji {display: none ;}</style><script type="text/javascript">Window. onload = function () {var oCon = document. getElementById ("con"); var disX = 0; var disY = 0; oCon. onmousedown = function (ev) {var oEvent = ev | event; disX = oEvent. clientX-oCon. offsetLeft; disY = oEvent. clientY-oCon. offsetTop; document. onmousemove = function (ev) {var oEvent = ev | event; var l = oEvent. clientX-disX; var t = oEvent. clientY-disY; if (l <0) {l = 0;} else if (l> document.doc umentElement. clientWidth-oCon. offsetWidth) {l = document.doc umentElement. clientWidth-oCon. offsetWidth;} if (t <0) {t = 0;} else if (t> document.doc umentElement. clientHeight-oCon. offsetHeight) {t = document.doc umentElement. clientHeight-oCon. offsetHeight;} oCon. style. left = l + 'px '; oCon. style. top = t + 'px ';}; document. onmouseup = function () {document. onmousemove = null; document. onmouseup = null ;}return false ;};};</script></pead><body><div class="wrapper"><p>Native javascript effect: Simple drag</p><div id="con">Mming simple drag and drop example</div></div><!-- wrapper end --></body></ptml></td> </tr></table>
Tip: you can modify some code before running