元素操作:可以准确定位的两个不同风格的移动层
风格一<script>z_index= 1;mouseDown= false;divLeft= 0;divTop= 0;function onMove(obj){ obj.style.left= window.event.clientX-divLeft; obj.style.top= window.event.clientY-divTop;x_value.value=obj.style.left;y_value.value=obj.style.top;}function onDown(obj){ obj.style.zIndex= z_index++; mouseDown= true; divLeft= event.clientX-parseInt(obj.offsetLeft); divTop= event.clientY-parseInt(obj.offsetTop);}function onUp(obj){ mouseDown= false;}document.onmousemove=function (){ if(mouseDown) { onMove(tt); }}</script><table id=tt style="position:absolute;left;z-index;top;width:100;height=100; border:1 red solid;"><tr> <td bgcolor=blue onmousedown=onDown(tt) onmouseup=onUp(tt)></td></tr></table><INPUT TYPE="text" id="x_value"><INPUT TYPE="text" id="y_value">
风格二
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html><head><title></title><meta name="vs_defaultClientScript" content="JavaScript"><meta name="GENERATOR" content="Microsoft Visual Studio .NET 7.1"><meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5"></head><body ms_positioning="GridLayout" onclick='javascript:paletteClick("this")' onmousemove='javascript:drawMove("this")'onmousedown='javascript:drawDown()' onmouseup='javascript:drawUp("this")'><FONT face="宋体"> <DIV style="DISPLAY: block; Z-INDEX: 1; LEFT: 136px; WIDTH: 350px; POSITION: absolute; TOP: 56px; HEIGHT: 250px; BACKGROUND-COLOR: lavender" ms_positioning="FlowLayout" id="palette"> <DIV style="DISPLAY: block; FONT-SIZE: 9pt; Z-INDEX: 2; LEFT: 10px; WIDTH: 120px; FONT-FAMILY: Arial; POSITION: absolute; TOP: 10px; HEIGHT: 80px; BACKGROUND-COLOR: papayawhip" ms_positioning="FlowLayout" id="draw" name="draw"onselectstart="javascript:return false">click me</DIV> </DIV></FONT><script language="javascript">var bEdit = false;var bMove = false;var sCursor = { move : 'move', def: 'default' };var ioldPos = null;var iPosArea = 6;var oDraw = null;function paletteClick(e) {e = event.srcElement ? event.srcElement : event.target;if(e.id == "draw" && bMove == false) {if (bEdit == false) { bEdit = true; creatPos(); document.getElementById("draw").style.cursor = sCursor.move;}return;}if(bEdit == true) {bEdit = false;clearPos();document.getElementById("draw").style.cursor = sCursor.def;}}function drawDown(e) {e = event.srcElement ? event.srcElement : event.target;if(e.id == "draw" && bEdit == true) {oDraw = document.getElementById("draw");ioldPos = { x : window.event.x, y : window.event.y, l : oDraw.offsetLeft, t : oDraw.offsetTop, w : document.getElementById("palette").offsetWidth, h : document.getElementById("palette").offsetHeight };bMove = true;}}function drawUp() {if(bMove == true) { bMove = false};}function drawMove() {if(bMove == true) {var x = (window.event.x - ioldPos.x) + ioldPos.l;var y = (window.event.y - ioldPos.y) + ioldPos.t;if(x < 0){x = 0};if(y < 0){y = 0};if(x > ioldPos.w - oDraw.offsetWidth){x = ioldPos.w - oDraw.offsetWidth};if(y > ioldPos.h - oDraw.offsetHeight){y = ioldPos.h - oDraw.offsetHeight};oDraw.style.left = x;oDraw.style.top = y;movePos();oDraw.innerText = "oldX = " + ioldPos.l + "\noldY = " + ioldPos.t + "\noffsetX = " + (window.event.x - ioldPos.x) + "\noffsetY = " + (window.event.y - ioldPos.y) + "\nnewX = " + x + "\nnewY = " + y;}}function creatPos() {var style = "BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; DISPLAY: block;OVERFLOW: hidden; BORDER-LEFT: black 1px solid; BORDER-BOTTOM: black 1px solid; POSITION: absolute; BACKGROUND-COLOR: white;"style += "width:" + iPosArea + "px; height:" + iPosArea + "px;";for(var i = 1; i < 9; i ++) {var e = document.createElement("div");var pos = getPos(i);e.style.cssText = style + "top:" + pos.y + "px;left:" + pos.x + "px;" + "cursor:" + pos.cur + ";" + "z-index:" + (i + 3) + ";";e.id = "pos_" + i;document.getElementById("palette").appendChild(e);}}function clearPos() {var e = document.getElementById("palette");for(var i = 1; i < 9; i ++) {e.removeChild(document.getElementById("pos_" + i));}}function movePos() {for(var i = 1; i < 9; i ++) {var e = document.getElementById("pos_" + i);var pos = getPos(i);e.style.top = pos.y;e.style.left = pos.x;}}function getPos(iIndex) {var e = document.getElementById("draw");switch (iIndex) {case 1: return position = { x : e.offsetLeft - iPosArea, y : e.offsetTop - iPosArea, cur : 'nw-resize' };case 2: return position = { x : e.offsetLeft + (e.offsetWidth / 2) - (iPosArea / 2), y : e.offsetTop - iPosArea, cur : 'n-resize' };case 3: return position = { x : e.offsetLeft + e.offsetWidth, y : e.offsetTop - iPosArea, cur : 'sw-resize' };case 4: return position = { x : e.offsetLeft - iPosArea, y : e.offsetTop + (e.offsetHeight / 2) - (iPosArea / 2), cur : 'e-resize' };case 5: return position = { x : e.offsetLeft + e.offsetWidth, y : e.offsetTop + (e.offsetHeight / 2) - (iPosArea / 2), cur : 'e-resize' };case 6: return position = { x : e.offsetLeft - iPosArea, y : e.offsetTop + e.offsetHeight, cur : 'sw-resize' };case 7: return position = { x : e.offsetLeft + (e.offsetWidth / 2) - (iPosArea / 2), y : e.offsetTop + e.offsetHeight, cur : 'n-resize' };case 8: return position = { x : e.offsetLeft + e.offsetWidth, y : e.offsetTop + e.offsetHeight, cur : 'nw-resize' };default : return position = { x : 0, y : 0, cur : '' };}}</script></body></html>
页:
[1]