Printable View
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
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>