Hey there! I'm new to ASP.Net. I've finally figured out (via the advanced skills of camjohnson95) how to create and control panels. Wow! They are powerful! There are two limitations that I've found that are rather restricting. 1) Has anyone found a way to position web form controls within a panel so they are not immediately to the right or below the previous control? Or is that something I'm just going to learn to deal with? 2) What needs to be adjusted so the user can simply click on the panel and drag it somewhere else on the screen. I don't want to resize it, just move it. Thanks in advance. May you have a blessed day. -- "And as Moses lifted up the serpent in the wilderness, even so must the Son of man be lifted up:" (John 3:14) "That whosoever believeth in him should not perish, but have eternal life." (John 3:15)
1. use the HTML attribute: style="position: absolute; left: 100px; top: 100px;" just change the top and left values to wherever you want it positioned. 2. You would have to use javascript to do this.
Here is some code to get you started: <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Untitled Page</title> <style type="text/css"> .style1 { width: 35%; height: 207px; position:absolute; left: 100px; top: 100px; border: solid 1px black; } .style3 { height: 19px; width: 456px; cursor: move; } .style4 { height: 19px; } </style> </head> <body onmouseup="md=0;" onmousemove="movewindow()"> <form id="form1" runat="server"> <script type="text/javascript"> var md = 0; function movewindow(){ if(md==1) { document.getElementById("window1").style.left = event.clientX - 20; document.getElementById("window1").style.top = event.clientY - 9; } } </script> <table id="window1" class="style1" cellpadding="2" cellspacing="0"> <tr> <td class="style3" bgcolor="#0066FF" onmousedown="md=1;"> <div OnSelectStart="return false;">Click here and drag to move me</div></td> <td class="style4" bgcolor="#0066FF"> <input type="button" value="X" style="border: solid 1px black; background-color: Gray;" onclick="window1.style.visibility='hidden';" /> </td> </tr> <tr> <td colspan="2"> Here is the body of the window......</td> </tr> </table> </form> </body> </html> Code (markup): This isn't perfect but you get the idea. I have only tested it with IE7, so it may also need some tweaking to work correctly with other browsers.
keep in mind i'm not all that great with Javascript so if anyone would like to improve on that feel free.
Hey camjohnson95 .... The code that you suggest appears very detailed. I'm just wondering, ... why is dragging an already existing panel require such elaborate code, but its original creation and position so easy? Thanks in advance. May you have a blessed day.