How to move a control at runtime?

**WarrenW** · Apr 13th, 2011, 03:37 PM

Hi everyone,

I have been searching on how to select a control at runtime and move it, etc. I know this can be done because a web app called Acumatica does it. I would imagine the controls are in a panel or some other type of container. And I would assume it uses a lot of javascript to do this. Would javascript be the key to this?

I just don't know how to detect an event of when a control would be moved, etc.

Thanks

**WarrenW** · Apr 13th, 2011, 04:39 PM

After more searching, I found an answer on another forum and used their example and it works. I am able to move a control anywhere. Below is the code for this in case anyone wants to use it.

Now I have another question. Is there a way I can use this code to save the location of the controls moved and then load them at that location when the web page is loaded? I would assume I would use a similar javascript to set the location of the controls. I'm just trying to figure how to load the positions. I know I could use a database for this but the locations are set on client side and not in the code behind. So how can I get the locations of each control to the client side for this?

Thanks!

Code:

Code:

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Default.aspx.vb" Inherits="WebMove1._Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title></title>


<script language="javascript"> 

// Initialize all the variables that we're going to use
var curDrag, origX, origY;
// Watch for any time that the user clicks down on an element
document.onmousedown = function(e){
// Normalize the Event object
e = fixEvent( e );
// Only drag elements that have a class of 'draggable'
if ( e.target.className == 'draggable' ) {
// The element that we're currently dragging
curDrag = e.target;

// Remember where the cursor position started, and where the
// element was located
origX = getX( e ) - (parseInt( curDrag.style.left ) || 0);
origY = getY( e ) - (parseInt( curDrag.style.top ) || 0);
// Watch for the mouse to move, or lift
document.onmousemove = dragMove;
document.onmouseup = dragStop;
}
};
// Watch for the mouse to move
function dragMove(e) {
// Normalize the Event object
e = fixEvent( e );
// Make sure that we're watching the right element
if ( !curDrag || e.target == curDrag ) return;
// Set the new cursor position
curDrag.style.left = (getX(e)*1-origX*1) + 'px';
curDrag.style.top =  (getY(e)*1-origY*1) + 'px';
}
// Look for the drag to end
function dragStop(e) {
// Normalize the Event object
e = fixEvent( e );
// Reset all of our watcher methods
curDrag = document.mousemove = document.mouseup = null;
}
// Adjust the event object, to make it sane
function fixEvent(e) {
// Make all the IE-centric parameters be W3C-like
if (!e) {

e = window.event;
e.target = e.srcElement;
e.layerX = e.offsetX;
e.layerY = e.offsetY;
}
return e;
}
// Find the horizontal position of the cursor
function getX(e) {
// Check for the non-IE position, then the IE position, and finally return 0
return e.pageX || (e.clientX +
(document.documentElement.scrollLeft || document.body.scrollLeft));
}
// Find the vertical position of the cursor
function getY(e) {
// Check for the non-IE position, then the IE position, and finally return 0
return e.pageY || (e.clientY +
(document.documentElement.scrollTop || document.body.scrollTop));

}

</script>

</head>

<body>

    <form id="form1" runat="server">
<div id="DIV1" runat="server">

<asp:Panel ID="Panel2" CssClass="draggable" Height="78px" Style="z-index: 100; left: 478px;position: absolute; top: 219px" Width="152px" runat="server" BorderStyle="Groove">


        <asp:TextBox ID="TextBox1"  style="position: absolute;" CssClass="draggable"  runat="server" ></asp:TextBox>

    </asp:Panel>

    
    </div>
    </form>
</body>
</html>

Thread: How to move a control at runtime?

Thread Tools

Display

How to move a control at runtime?

Re: How to move a control at runtime?

Posting Permissions