How to bound a specific div to another div?

[saadkhan]

i have made a draggable panel using ajax tool kit web developer 2008. All i need to do is to bound a draggable div tag to another div`s boundary. That is, to check everytime it gets dragged whether its in boundary or not. If is in, then ok else canel that drag.



heres my code:

<!-------------Draggable Panel-start--------------!-->
            <div id="Photo" style="width: 50%; height: 50%;">
            <cc1:DragPanelExtender ID="DragPanelExtender_Photo" runat="server" TargetControlID="PanelContainer" DragHandleID="PanelHeader">
            </cc1:DragPanelExtender>
 
            <asp:Panel ID="PanelContainer" runat="server" CssClass="Draggable_Panel_Box" BackImageUrl="~/Images/Photo.png">
                    <asp:Panel ID="PanelHeader" runat="server" CssClass="Draggable_Panel_Header_PHOTO">
                    My Photo<hr />
                    </asp:Panel>
                    <asp:Panel ID="PanelBody" runat="server" CssClass="Draggable_Panel_Content_PHOTO" HorizontalAlign="Center">
                        <img src="Images/a.jpg" alt="" style="max-height: 140px; max-width: 203px;"/></asp:Panel>
            </asp:Panel>
            </div>
            <!-------------Draggable Panel-end----------------!-->
 
 
            <!-------------Draggable Panel-start--------------!-->
            <div id="ScrapBook" style="width: 50%; height: 50%;">
            <cc1:DragPanelExtender ID="DragPanelExtender_ScrapBook" runat="server" TargetControlID="Panel1" DragHandleID="Panel2">
            </cc1:DragPanelExtender>
 
            <asp:Panel ID="Panel1" runat="server" CssClass="Draggable_Panel_Box" BackImageUrl="~/Images/scrapBook.png">
                    <asp:Panel ID="Panel2" runat="server" CssClass="Draggable_Panel_Header_SCRAPBOOK" Width="340" Height="26">
                    Catalog<hr />
                    </asp:Panel>
                    <asp:Panel ID="Panel3" runat="server" CssClass="Draggable_Panel_Content_SCRAPBOOK" HorizontalAlign="Center" Width="340" Height="255">
                        <asp:Label ID="Label" runat="server" Text="Hi, this is Saad Khan.  Currently working on web programming project. INSHALLAH this project will be a benchmark for others in university. INSHALLAH :)" style="max-height: 200px; max-width: 220px;" Height="220" Width="220"></asp:Label>
                    </asp:Panel>
            </asp:Panel>
            </div>
            <!-------------Draggable Panel-end----------------!-->

[pronerd]

Sorry I do not have time to provide a more detailed response to this.

You need to do the following.

1. Set an onMove or onMouseUp event on the layer being dragged that will call your JavaScript logic to check to see if they over lap

2. When the event fires you want your java script logic to get four values from the layer being dragged, and the layer it is going to be checked against. Those values are X, Y, width, and height.

3. Then take the values from the layer being compared to and add the X to the width, and add the Y value to the height. The X value will give you the starting position on the X-Axis, and the X + width will give you the X-Axis ending position. The same thing is true on the Y-Axis. Y will be the starting point, and Y + height will be the ending point.

4. Then take the four values from the layer being dragged and run four tests. If any of these are true then the layer that was dragged is over lapping the layer it is being compared to.
a. If the dragged layers X value is greater than the other layers X value and less than the other layers X + width values.
b. If the dragged layers X + width value is greater than the other layers X value and less than the other layers X + width values.
c. If the dragged layers Y value is greater than the other layers Y value and less than the other layers Y + height values.
c. If the dragged layers Y + height value is greater than the other layers Y value and less than the other layers Y + height values.

NOTE: To get reliable values X, Y, Width, and Height values the position attribute for the layer needs to be set to absolute.

[acoder]

Or set it relative to the parent div and not allow it to exceed the x+width and y+height boundaries.

Saadkhan, for the code to be of much use in this forum, please post client-side code, not .NET code.