[CLOSED] Resize and Drag

  1. #1

    [CLOSED] Resize and Drag

    Hi,

    Based on these both examples:

    https://examples2.ext.net/#/Miscella...sizable/Basic/

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

    We need to resize and drag at the same time, but it looks like a draggable and resizable div is not showing its corresponding size when it is being resized.

    Could this be a bug or controls properties must be defined in some other way?

    Here is a sample code:

    <%@ Page Language="C#" %>
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <!DOCTYPE html>
    <html>
    <head runat="server">
         <title>Ext.NET Examples</title>
         <link href="/resources/css/examples.css" rel="stylesheet" type="text/css" />
         <script type="text/javascript">
             var startDrag = function (x, y) {
                 var dragEl = Ext.get(this.getDragEl());
                 var el = Ext.get(this.getEl());
                 el.hide();
    
                 dragEl.applyStyles({ border: "solid gray 1px" });
                 dragEl.update(el.dom.innerHTML);
                 dragEl.addCls(el.dom.className + " dd-proxy");
             };
    
             var afterDrag = function () {
                 var el = Ext.get(this.getEl());
                 el.show();
                 if (App.DragArea)
                     App.DragArea.fireEvent("itemdrag", this);
             };
         </script>
    </head>
    <body>
         <ext:ResourceManager runat="server" />
             
         <ext:Viewport runat="server" Layout="Fit" AutoScroll="true">
             <Content>      
                <ext:DDProxy runat="server" Target="dd1-item1" Group="tree2div">        
                    <StartDrag Fn="startDrag" />
                    <AfterDrag Fn="afterDrag" />
                 </ext:DDProxy>  
                <ext:Resizer 
                    ID="CustomResizer" 
                    runat="server" 
                    Target="dd1-item1" 
                    Wrap="true"
                    MinWidth="50"
                    MinHeight="20"
                    Handles="All"
                    Dynamic="true"
                    />                                                            
            </Content>
             <Items>             
                <ext:Panel 
                    runat="server" 
                    Title="Example"
                    Icon="Application"
                    Region="Center"
                    Margins="0">
                    <Content>
                        <div id="drop-header" style="border:1px #a0a0a0 solid;margin:20px;padding:8px;height:140px">
                            <div class="dynamicDiv" id="dd1-item1" style="width: 200px; border: 1px solid silver;">Item 1.1</div>
                        </div>
                    </Content> 
                </ext:Panel>         
            </Items>
         </ext:Viewport>        
    </body>
    Thanks.
    Last edited by Daniil; Jun 26, 2012 at 9:12 PM. Reason: [CLOSED]
  2. #2
    Hi,

    I would use the DD class instead of the DropProxy one.
    <ext:DD runat="server" Target="dd1-item1" Group="tree2div" />
    See also
    http://docs.sencha.com/ext-js/4-1/#!/api/Ext.dd.DD
  3. #3
    Hi,

    Is it needed any additional style?

    It looks like sometimes, after several resizes, the div border line disappears...

    <ext:DD runat="server" Target="dd1-item1" Group="tree2div">
        <StartDrag Fn="startDrag" />
        <EndDrag Fn="afterDrag" />
    </ext:DD>
    Thanks again.
  4. #4
    Please try without StartDrag and EndDrag listeners. Does it not suite your needs?
  5. #5
    Well, we need StartDrag and EndDrag listeners to perform some other stuff, but we removed default sample code and it works better.

    There is only a little flicker in IE when div starts to being resized. In Chrome there is not problem about this.

    Thanks again.
  6. #6
    Quote Originally Posted by softmachine2011 View Post
    Well, we need StartDrag and EndDrag listeners to perform some other stuff, but we removed default sample code and it works better.
    Sure, it might be done. But, I think, you should not hide the "el".

    Quote Originally Posted by softmachine2011 View Post
    There is only a little flicker in IE when div starts to being resized. In Chrome there is not problem about this.
    Hmm, seems I see the same behavior in IE 9, FF 13 and Chrome 19 on my end.
  7. #7
    Quote Originally Posted by Daniil View Post
    Sure, it might be done. But, I think, you should not hide the "el".
    Well, we don't hide "el", but we perform some other stuff we need instead in these listeners.


    Quote Originally Posted by Daniil View Post
    Hmm, seems I see the same behavior in IE 9, FF 13 and Chrome 19 on my end.
    Yes, I can see the same behaviour in Chrome right now.
  8. #8
    Quote Originally Posted by softmachine2011 View Post
    we perform some other stuff we need instead in these listeners.
    Yes, I think it's the destination of these listeners.

    Quote Originally Posted by softmachine2011 View Post
    Yes, I can see the same behaviour in Chrome right now.
    I am afraid it might be too hard or, maybe, even impossible to avoid that flickering.

Similar Threads

  1. Help !How to get resize's object 's drag event?
    By tms2003@126.com in forum 1.x Help
    Replies: 2
    Last Post: Apr 19, 2012, 12:47 AM
  2. [CLOSED] Removing drag target from drag group.
    By SymSure in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Oct 04, 2011, 8:41 PM
  3. [CLOSED] BUG when resize window
    By smart+ in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Jul 30, 2010, 8:15 AM
  4. Replies: 3
    Last Post: Mar 11, 2010, 10:54 AM
  5. Replies: 3
    Last Post: Feb 22, 2009, 2:58 PM

Posting Permissions