| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191 |
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
- <script type="text/javascript" src="/lib/jquery-3.4.1.js"></script>
- <script type="text/javascript" src="/lib/jquery-3.4.1.min.js"></script>
- <script src="/lib/jquery.min.js"></script>
- <style>
- body {
- margin: 0px;
- padding: 0px;
- font-size: 12px;
- text-align: center;
- }
- body>div {
- text-align: center;
- margin-right: auto;
- margin-left: auto;
- }
- .content {
- width: 900px;
- }
- .content .left {
- float: left;
- width: 20%;
- border: 1px solid #FF0000;
- margin: 3px;
- }
- .content .center {
- float: left;
- border: 1px solid #FF0000;
- margin: 3px;
- width: 58%
- }
- .content .right {
- float: right;
- width: 20%;
- border: 1px solid #FF0000;
- margin: 3px
- }
- .mo {
- height: auto;
- border: 1px solid #CCC;
- margin: 3px;
- background: #FFF
- }
- .mo h1 {
- background: #ECF9FF;
- height: 18px;
- padding: 3px;
- cursor: move
- }
- .mo .nr {
- height: 80px;
- border: 1px solid #F3F3F3;
- margin: 2px
- }
- h1 {
- margin: 0px;
- padding: 0px;
- text-align: left;
- font-size: 12px
- }
- </style>
- <script> var dragobj = {}
- window.onerror = function () { return false }
- function on_ini() { String.prototype.inc = function (s) { return this.indexOf(s) > -1 ? true : false }
- var agent = navigator.userAgent
- window.isOpr = agent.inc("Opera")
- window.isIE = agent.inc("IE") && !isOpr
- window.isMoz = agent.inc("Mozilla") && !isOpr && !isIE
- if (isMoz) { Event.prototype.__defineGetter__("x", function () { return this.clientX + 2 })
- Event.prototype.__defineGetter__("y", function () { return this.clientY + 2 }) } basic_ini() }
- function basic_ini() { window.$ = function (obj) { return typeof (obj) == "string" ? document.getElementById(obj) : obj }
- window.oDel = function (obj) { if ($(obj) != null) { $(obj).parentNode.removeChild($(obj)) } } } window.onload = function () { on_ini()
- var o = document.getElementsByTagName("h1")
- for (var i = 0; i < o.length; i++) { o[i].onmousedown = function (e) { if (dragobj.o != null) return false
- e = e || event
- dragobj.o = this.parentNode
- dragobj.xy = getxy(dragobj.o)
- dragobj.xx = new Array((e.x - dragobj.xy[1]), (e.y - dragobj.xy[0]))
- dragobj.o.style.width = dragobj.xy[2] + "px"
- dragobj.o.style.height = dragobj.xy[3] + "px"
- dragobj.o.style.left = (e.x - dragobj.xx[0]) + "px"
- dragobj.o.style.top = (e.y - dragobj.xx[1]) + "px"
- dragobj.o.style.position = "absolute"
- var om = document.createElement("div")
- dragobj.otemp = om
- om.style.width = dragobj.xy[2] + "px"
- om.style.height = dragobj.xy[3] + "px"
- dragobj.o.parentNode.insertBefore(om, dragobj.o)
- return false
- }
- }
- }
- document.onselectstart = function () { return false }
- window.onfocus = function () { document.onmouseup() }
- window.onblur = function () { document.onmouseup() }
- document.onmouseup = function () { if (dragobj.o != null) { dragobj.o.style.width = "auto"
- dragobj.o.style.height = "auto"
- dragobj.otemp.parentNode.insertBefore(dragobj.o, dragobj.otemp)
- dragobj.o.style.position = ""
- oDel(dragobj.otemp)
- dragobj = {} } }
- document.onmousemove = function (e) { e = e || event
- if (dragobj.o != null) { dragobj.o.style.left = (e.x - dragobj.xx[0]) + "px"
- dragobj.o.style.top = (e.y - dragobj.xx[1]) + "px"
- createtmpl(e) } }
- function getxy(e) { var a = new Array()
- var t = e.offsetTop; var l = e.offsetLeft; var w = e.offsetWidth;
- var h = e.offsetHeight; while (e = e.offsetParent) { t += e.offsetTop; l += e.offsetLeft; } a[0] = t; a[1] = l; a[2] = w; a[3] = h
- return a; } function inner(o, e) { var a = getxy(o)
- if (e.x > a[1] && e.x < (a[1] + a[2]) && e.y > a[0] && e.y < (a[0] + a[3])) { if (e.y < (a[0] + a[3] / 2)) return 1; else return 2; } else return 0; } function createtmpl(e) { for (var i = 0; i < 12; i++) { if ($("m" + i) == dragobj.o) continue
- var b = inner($("m" + i), e)
- if (b == 0) continue
- dragobj.otemp.style.width = $("m" + i).offsetWidth
- if (b == 1) { $("m" + i).parentNode.insertBefore(dragobj.otemp, $("m" + i)) } else { if ($("m" + i).nextSibling == null) { $("m" + i).parentNode.appendChild(dragobj.otemp) } else { $("m" + i).parentNode.insertBefore(dragobj.otemp, $("m" + i).nextSibling) } } return } for (var j = 0; j < 3; j++) { if ($("dom" + j).innerHTML.inc("div") || $("dom" + j).innerHTML.inc("DIV")) continue
- var op = getxy($("dom" + j))
- if (e.x > (op[1] + 10) && e.x < (op[1] + op[2] - 10)) { $("dom" + j).appendChild(dragobj.otemp)
- dragobj.otemp.style.width = (op[2] - 10) + "px" } } } </script>
- </head>
- <body>
- <div class=content style="width: 100%;height:100%;">
- <div class=left id=dom0>
- <div class=mo id=m0>
- <h1>dom0</h1>
- <div class="nr"></div>
- </div>
- <div class=mo id=m1>
- <h1>dom1</h1>
- <div class="nr"></div>
- </div>
- <div class=mo id=m2>
- <h1>dom2</h1>
- <div class="nr"></div>
- </div>
- <div class=mo id=m3>
- <h1>dom3</h1>
- <div class="nr"></div>
- </div>
- </div>
- <div class=center id=dom1>
- <div class=mo id=m4>
- <h1>dom4</h1>
- <div class="nr"></div>
- </div>
- <div class=mo id=m5>
- <h1>dom5</h1>
- <div class="nr"></div>
- </div>
- <div class=mo id=m6>
- <h1>dom6</h1>
- <div class="nr"></div>
- </div>
- <div class=mo id=m7>
- <h1>dom7</h1>
- <div class="nr"></div>
- </div>
- </div>
- <div class=right id=dom2>
- <div class=mo id=m8>
- <h1>dom8</h1>
- <div class="nr"></div>
- </div>
- <div class=mo id=m9>
- <h1>dom9</h1>
- <div class="nr"></div>
- </div>
- <div class=mo id=m10>
- <h1>dom10</h1>
- <div class="nr"></div>
- </div>
- <div class=mo id=m11>
- <h1>dom11</h1>
- <div class="nr"></div>
- </div>
- </div>
- </div>
- </body>
- </html>
|
