<!DOCTYPE html> <html> <head> <script type="text/javascript"> var oldX; var oldY; var newX; var newY; var x; var y; var offsetX; var offsetY; var pressed; var rsz=0; var rszmv=0; pressed = 0; function press(event){ document.body.focus(); var target = event.target != null ? event.target : event.srcElement; if(target.id == 'wndtop'){ rsz=0; rszmv=0; document.getElementById('wndtop').style.backgroundColor='grey'; document.getElementById('wndtop').style.cursor='move'; pressed = 1; x = parseInt(document.getElementById('wnd').style.left); y = parseInt(document.getElementById('wnd').style.top); offsetX = event.screenX - x; offsetY = event.screenY - y; } else if(target.id == 'wnd'){ rszmv=rsz; } oldX = event.screenX; oldY = event.screenY; return false; } function release(event){ var target = event.target != null ? event.target : event.srcElement; pressed = 0; rxz=0; rszmv=0; document.getElementById('wnd').style.cursor='default'; document.getElementById('wndtop').style.backgroundColor='green'; if(target.id == 'check'){ if(document.getElementById('check').style.backgroundColor == 'red') document.getElementById('check').style.backgroundColor = 'green'; else document.getElementById('check').style.backgroundColor = 'red'; } document.getElementById('wnd').style.cursor='default'; document.getElementById('wndtop').style.cursor='default'; } function move(event){ var target = event.target != null ? event.target : event.srcElement; var x1 = parseInt(document.getElementById('wnd').style.left); var y1 = parseInt(document.getElementById('wnd').style.top); var w = parseInt(document.getElementById('wnd').style.width); var h = parseInt(document.getElementById('wnd').style.height); var w1 = parseInt(document.getElementById('wndin').style.width); var h1 = parseInt(document.getElementById('wndin').style.height); if(pressed == 0){ if(target.id == 'wnd'){ if(rszmv == 0){ if(event.screenX>x1+10 && event.screenX<x1+w-10){ if(event.screenY<y1+2){ rsz=2; document.getElementById('wnd').style.cursor='n-resize'; } else{ rsz=6; document.getElementById('wnd').style.cursor='s-resize'; } } else if(event.screenY>y1+10 && event.screenY<y1+h-10){ if(event.screenX<x1+2){ rsz=8; document.getElementById('wnd').style.cursor='w-resize'; } else{ rsz=4; document.getElementById('wnd').style.cursor='e-resize'; } } else if(event.screenX<=x1+10){ if(event.screenY<=y1+10){ rsz=1; document.getElementById('wnd').style.cursor='nw-resize'; } else{ rsz=7; document.getElementById('wnd').style.cursor='sw-resize'; } } else{ if(event.screenY<=y1+10){ rsz=3; document.getElementById('wnd').style.cursor='ne-resize'; } else{ rsz=5; document.getElementById('wnd').style.cursor='se-resize'; } } } else{ switch(rszmv){ case 1: break; case 2: break; case 3: break; case 4: break; case 5: break; case 6: break; case 7: break; case 8: break; default: break; } } } else if(target.id != 'wndtop'){ document.getElementById('wnd').style.cursor='default'; document.getElementById('wndtop').style.cursor='default'; } } else{ newX=event.screenX; newY=event.screenY; document.getElementById('wnd').style.left = newX - offsetX + 'px'; document.getElementById('wnd').style.top = newY - offsetY + 'px'; if(parseInt((document.getElementById('wnd').style.top))<20) { (document.getElementById('wnd').style.top)='20px'; newY = 20 + offsetY; } oldX = newX; oldY = newY; } } </script> </head> <body onmousedown="press(event);" onmousemove="move(event);" onmouseup="release(event);"> <div id="wnd" style="position:relative;background-color:red;top:30px;left:10px;width:200px;height:150px;"> <div id="wndtop" style="position:absolute;background-color:green;left:2px;top:2px;width:196px;height:20px;"></div> <div id="wndin" style="position:absolute;background-color:white;left:2px;top:22px;width:196px;height:126px;"> Try to drag this window? </div> </div> <div id="check" style="position:absolute;top:5px;left:5px;width:10px;height:10px;background-color:green;"> </div> </body> </html>
var oldY;
<html> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"> </script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.js"> </script> <script type="text/javascript"> function press(event){ var target = event.target != null ? event.target : event.srcElement; if(target.id == 'tBar'){ document.getElementById('tBar').style.backgroundColor = 'red'; document.getElementById('tBar').style.color = 'yellow'; document.getElementById('tBar').style.cursor = 'move'; } } function release(event){ document.getElementById('tBar').style.backgroundColor = 'yellow'; document.getElementById('tBar').style.color = 'red'; document.getElementById('tBar').style.cursor = 'default'; } function over(event){ var target = event.target != null ? event.target : event.srcElement; if(target.id == 'tBar'){ $("#wnd").draggable({disabled: false}); } else{ $("#wnd").draggable({disabled: true}); } } function move(event){ var target = event.target != null ? event.target : event.srcElement; if(target.id == 'wnd'){ document.getElementById('wnd').style.backgroundColor='#DDDDDD'; } else{ document.getElementById('wnd').style.backgroundColor='white'; } } </script> </head> <body onmouseover="over(event);" onmousedown="press(event);" onmouseup="release(event);" onmousemove="move(event);"> <div id="wnd" style="position:relative;left:10px;top:10px;width:220px;height:195px;"> <div id="tBar" style="position:relative;left:10px;top:10px;width:197px;height:25px;background-color:yellow;padding-left:3px;color:red;"> Title </div> <div id="content" style="position:absolute;left:10px;top:35px;width:193px;height:148px;background-color:white;border-width:2px;border-style:none solid solid;border-color:red;padding-left:3px;"> Drag me? </div> </div> </body> </html>
var
This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)