Draggable panels, Restrict the user not to drag one panel over the other panel

Page 1 of 2 12 LastLast
  1. #1

    Draggable panels, Restrict the user not to drag one panel over the other panel

    Hi all

    I am working on the draggable panels, here I need to restrict the user not to drag one panel over the other panel.
    Help me to find the way for this requirement.

    https://examples2.ext.net/#/DragDrop...aggable_Panel/

    Thanks
    Nagamalli T
  2. #2
    Hi @nagamalli,

    Hope this helps you to start.

    Example
    <%@ Page Language="C#" %>
    <%@ Register assembly="Ext.Net" namespace="Ext.Net" tagprefix="ext" %>
    
    <!DOCTYPE html>
    
    <html>
    <head runat="server">
        <title>Ext.NET v2 Example</title>
    
        <script>
            var onDrag = function (e) {
                if (this.panel.ghostPanel.el.getRegion().intersect(App.Panel2.el.getRegion())) {
                    console.log("intersect");
                    this.panel.ghostPanel.alignTo(App.Panel2, "l-r"); // you should position it here as you need
                }
            };
        </script>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
            
            <ext:Panel 
                ID="Panel1"
                runat="server" 
                Title="Drag Me" 
                Icon="ArrowNsew"
                Frame="true" 
                Width="150" 
                Height="150" 
                Floating="true"
                X="50"
                Y="50">      
                <DraggablePanelConfig runat="server">
                    <OnDrag Fn="onDrag" />
                </DraggablePanelConfig>      
            </ext:Panel>
            
            <ext:Panel 
                ID="Panel2"
                runat="server" 
                Title="Drag Me Too" 
                Icon="ArrowNsew"
                Frame="true"             
                Width="150" 
                Height="150" 
                Floating="true"
                Draggable="true"
                X="100"
                Y="100">
            </ext:Panel>
        </form>
    </body>
    </html>
  3. #3
    Quote Originally Posted by Daniil View Post

    if (this.panel.ghostPanel.el.getRegion().intersect(Ap p.Panel2.el.getRegion()))
    Hi Daniil,
    Thank you for giving me the solution.
    The given solution is worked for me.
    Now I need to implement this using Ext 1.3 dll's
    For that I tried in the following way but no use
    If(this.panel.el.ghost().getRegion().intersect(App.Panel2.el.getRegion()))//I got undefined here 
    //I used isIntersect as follows but not working
    <script>
            var onDrag = function(e) {
                if (this.panel.el.ghost().getRegion().isIntersect(Panel2.el.getRegion())) {
                    this.panel.el.alignTo(Panel2, "l-r"); // you should position it here as you need
                }
                else {
                    var pel = this.proxy.getEl();
                    this.x = pel.getLeft(true);
                    this.y = pel.getTop(true);
    
                    var s = this.panel.getEl().shadow;
    
                    if (s) {
                        s.realign(this.x, this.y, pel.getWidth(), pel.getHeight());
                    }
                }
            };
    </script>
    
     <ext:Panel ID="Panel1" runat="server" Title="Drag Me" Icon="ArrowNsew" Frame="true"
            Width="150" Height="150" Floating="true" X="50" Y="50">
            <DraggableConfig ID="DraggablePanelConfig1" runat="server">
                <OnDrag Fn="onDrag" />
                <EndDrag Handler="this.panel.setPosition(this.x, this.y);" />
            </DraggableConfig>
        </ext:Panel>
        <ext:Panel ID="Panel2" runat="server" Title="Drag Me Too" Icon="ArrowNsew" Frame="true"
            Width="150" Height="150" Floating="true" Draggable="true" X="100" Y="100">        
        </ext:Panel>
  4. #4
    Well, it gets more complicated in v1, because there are no getRegion and intersect methods, but it should be possible to implement manually and, finally, get a solution similar to the one with v2. Here is a pseudo code sample.

    var onDrag = function (e) {
        var pel = this.proxy.getEl();
    
        if (pel intersects Panel2.el) {
            position pel where you need
        }
    
        ...
    };
  5. #5
    Quote Originally Posted by Daniil View Post
    if (pel intersects Panel2.el) {
    position pel where you need
    }
    };
    Hi Daniil,
    Thanks for your solution but I am unable to get it.
    What do you mean by "if (pel intersects Panel2.el)"
    Could you explain about this more clear?


    Thank you
    nagamalli
  6. #6
    Well, it means that there is no the intersect method in Ext.NET v1 API and you should implement it manually.
  7. #7
    Hi Daniil,

    I will do manually what you said.
    Now I have another problem in the same scenario, Here I am creating the panels dynamically and those are draggable and resizable,
    For example I have one panel per row so that user can reduce the width/height and drag another panel in this remaining area, My question is while resizing the panel I need to set it's positions also along with size.
    To do that I have written the following line in resize handler event but it is positioned in some other place
    resizable.Listeners.Resize.Handler = "var p = " + pnlSection.ClientID + "; p.el.setStyle({width:'', height:''});p.setPosition(p.getBox().x,p.getBox().y);p.setSize(width, height);";
    Here is the sample code to reproduce the scenario
    
    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm16.aspx.cs" Inherits="ext1._3Appliction.WebForm16" %>
    
    <!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>Untitled Page</title>
    
        <script runat="server">
            protected void Page_Load(object sender, EventArgs e)
            {
                if (!X.IsAjaxRequest)
                {
                    int postionY = 50;
                    for (int i = 0; i < 2; i++)
                    {
                        Ext.Net.Panel pnlSection = new Ext.Net.Panel();
                        pnlSection.ID = "sectionPanel_" + Guid.NewGuid().ToString().Replace("-", "_");                   
                        pnlSection.Header = true;
                        pnlSection.Collapsible = true;
                        pnlSection.Icon = Ext.Net.Icon.Package;
                        pnlSection.Title = "SectionName";
                        pnlSection.Border = true;
                        pnlSection.ForceLayout = true;
                        pnlSection.AutoScroll = true;
                        pnlSection.Floating = true;
                        pnlSection.Draggable = true;
    
                        pnlSection.X = 50;
                        pnlSection.Y = postionY;
                        pnlSection.Width = 800;
                        pnlSection.Height = 300;
                        postionY += postionY + 330;
                        pnlSection.DraggableConfig.OnDrag.Fn = "onDrag";
                        pnlSection.DraggableConfig.EndDrag.Fn = "endDrag";
                        pnlSection.AddTo(pnlFormViewer);
    
                        Resizable resizable = new Resizable();
                        resizable.ID = "resizable" + Guid.NewGuid().ToString().Replace("-", "_");
                        resizable.Element = "={" + pnlSection.ClientID + ".el}";
                        resizable.Transparent = true;
                        resizable.Handles = ResizeHandle.All;
                        resizable.Listeners.Resize.Handler = "var p = " + pnlSection.ClientID + "; p.el.setStyle({width:'', height:''});p.setSize(width, height);";//p.setPosition(p.getBox().x,p.getBox().y); 
                        resizable.Render();
                    }
                }
            }
        </script>
    
        <script type="text/javascript">
            var onDrag = function(e) {
                var pel = this.proxy.getEl();
                this.x = pel.getLeft(true);
                this.y = pel.getTop(true);
                var s = this.panel.getEl().shadow;
                if (s) {
                    s.realign(this.x, this.y, pel.getWidth(), pel.getHeight());
                }
            };
            var endDrag = function(e) {
                this.panel.setPosition(this.x, this.y);
            }   
        </script>
    
    </head>
    <body>
        <form id="form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
        <ext:Window ID="wndFormSectionsView" runat="server" Closable="false" Width="1000"
            Height="700" AutoScroll="true" Title="Form Details" Frame="true" Modal="true"
            Resizable="true">
            <Items>
                <ext:BorderLayout ID="blFormViewer" runat="server">
                    <Center>
                        <ext:Panel ID="pnlFormViewer" runat="server" AutoScroll="true" Border="false" ButtonAlign="Right">
                        </ext:Panel>
                    </Center>
                </ext:BorderLayout>
            </Items>
        </ext:Window>
        </form>
    </body>
    </html>
    Thank you
    nagamalli
  8. #8
    Sorry, I do not understand well what you need to do on resizing. Please elaborate.
  9. #9
    Hi Daniil,
    My question is,
    Is it possible to set the panel positions(x and y) while resizing it.
    If possible then how can we achieve it?



    Thank you
    nagamalli
  10. #10
    Positioning while resizing... I doubt it can work well and, personally, avoid it. It should be possible to position after resize without any problem.
Page 1 of 2 12 LastLast

Similar Threads

  1. Draggable Panels with portals issue
    By nagamalli in forum 1.x Help
    Replies: 1
    Last Post: May 30, 2013, 10:52 AM
  2. [CLOSED] How to create via Ext.js a draggable panel?
    By xeo4.it in forum 2.x Legacy Premium Help
    Replies: 4
    Last Post: Oct 11, 2012, 1:20 PM
  3. Draggable Accordion Panels Easy?
    By cgountanis in forum 1.x Help
    Replies: 2
    Last Post: Dec 16, 2009, 11:48 AM
  4. Replies: 1
    Last Post: Aug 31, 2009, 8:43 AM

Tags for this Thread

Posting Permissions