[CLOSED] [1.0] Drag&Drop notifyDrop grouping bug

  1. #1

    [CLOSED] [1.0] Drag&Drop notifyDrop grouping bug

    Hi, i was playing around with Drag&Drop and groups to learn how they works.
    I found a strange behaviour when adding multiple group to the DragZone.
    The notifyDrop event is called twice when dropping element from the 3rd green box to the 2nd red box. Is this a bug?

    Revision 3053.

    Here the code:
    <%@ Page Language="C#" %>
    <%@ Register assembly="Ext.Net" namespace="Ext.Net" tagprefix="ext" %>
    
    <!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 id="Head1" runat="server">
        <title>Drag&amp;Drop TEST</title>
        
        <style type="text/css">
            body {
                font-size: 11px;
                font-family: arial;
            }
            .dd-ct-src {
                position:absolute;
                border: 1px solid silver;
                width: 180px;
                height: 180px;
                top: 40px;
                background-color: #BBFFBB;
            }
            
            .dd-ct-trg {
                position:absolute;
                border: 1px solid silver;
                width: 180px;
                height: 180px;
                top: 40px;
                background-color: #FFBBBB;
            }
            
            .dd-ct-note {
                position: absolute;
                border: 1px solid silver;
                width: 180px;
                top: 200px;
                text-align: center;
                font-weight: bold;
            }
            
            .dd-over {
                background-color: #FF8080;
            }
            
            #dd1-ct {
                left: 64px;
            }
            #dd2-ct {
                left: 256px;
            }
            #dd3-ct {
                left: 448px;
            }
            #dd4-ct {
                left: 664px;
            }
            #dd5-ct {
                left: 856px;
            }
            #dd6-ct {
                left: 1048px;
            }        
    
            .dd-item {
                height: 14px;
                border: 1px solid #a0a0a0;
                background-color: #c4d0ff;
                vertical-align: middle;
                cursor: move;
                padding: 2px;
                z-index: 1000;
                margin: 2px;
            }
            .dd-ct .dd-item {
                margin: 2px;
            }
            .dd-proxy {
                opacity: 0.4;
                -moz-opacity: 0.4;
                filter: alpha(opacity=40);
            }
        </style>
        
        <ext:ResourcePlaceHolder ID="ResourcePlaceHolder1" runat="server" Mode="ScriptFiles" />
        
        <script type="text/javascript">
            function getDragData(e) {
                if (!this.ddel) {
                    this.ddel = document.createElement('div');
                }
    
                var target = Ext.get(e.getTarget());
                if (target.hasClass('dd-ct')) {
                    return false;
                }
                return { ddel: this.ddel, item: target };
            }
    
            function onInitDrag(e) {
                this.ddel.innerHTML = this.dragData.item.dom.innerHTML;
                this.ddel.className = this.dragData.item.dom.className;
                this.ddel.style.width = this.dragData.item.getWidth() + "px";
                this.proxy.update(this.ddel);
            }
    
            function getRepairXY(e, data) {
                data.item.highlight('#e8edff');
                return data.item.getXY();
            }
    
            function notifyDrop(dd, e, data, target) {
                target.el.removeClass(target.overClass);
                target.el.appendChild(data.item);
                handleDrop(dd, target);
                return true;
            }
    
            function handleDrop(source, target) {
                alert("SOURCE " + source.id + ": " + Ext.encode(source.groups));
                alert("TARGET " + target.id + ": " + Ext.encode(target.groups)); 
            }
        </script>
    </head>
    <body>
        <form id="Form1" runat="server">
            <ext:ResourceManager ID="ResourceManager1" runat="server" />
            
            <ext:DragZone ID="DragZone1" runat="server" Target="dd1-ct" Group="group1" Scroll="false">
                <GetDragData Fn="getDragData" />
                <OnInitDrag Fn="onInitDrag" />
                <GetRepairXY Fn="getRepairXY" />
            </ext:DragZone>
              
            <ext:DragZone ID="DragZone2" runat="server" Target="dd2-ct" Group="group2" Scroll="false">
                <GetDragData Fn="getDragData" />
                <OnInitDrag Fn="onInitDrag" />
                <GetRepairXY Fn="getRepairXY" />
            </ext:DragZone>
    
            <ext:DragZone ID="DragZone3" runat="server" Target="dd3-ct" Scroll="false">
                <OnAvailable Handler="this.addToGroup('group2'); this.addToGroup('group3');" />
                <GetDragData Fn="getDragData" />
                <OnInitDrag Fn="onInitDrag" />
                <GetRepairXY Fn="getRepairXY" />
            </ext:DragZone>
    
    
    
            <ext:DropTarget ID="DropTarget1" runat="server" Target="dd4-ct" Group="group1" OverClass="dd-over">
                <NotifyDrop Handler="return notifyDrop(source, e, data, this);" />
            </ext:DropTarget>
    
            <ext:DropTarget ID="DropTarget2" runat="server" Target="dd5-ct" OverClass="dd-over">
                <OnAvailable Handler="this.addToGroup('group1'); this.addToGroup('group2');" />
                <NotifyDrop Handler="return notifyDrop(source, e, data, this);" />
            </ext:DropTarget>
    
            <ext:DropTarget ID="DropTarget3" runat="server" Target="dd6-ct" OverClass="dd-over" Group="group3">
                <NotifyDrop Handler="return notifyDrop(source, e, data, this);" />
            </ext:DropTarget>
    
    
    
            <div class="dd-ct-src" id="dd1-ct">
                <div class="dd-item" id="dd1-item1">Item 1.1</div>
                <div class="dd-item" id="dd1-item2">Item 1.2</div>
                <div class="dd-item" id="dd1-item3">Item 1.3</div>
                <div class="dd-ct-note">
                    group1
                </div>
            </div>
    
            <div class="dd-ct-src" id="dd2-ct">
                <div class="dd-item" id="dd2-item1">Item 2.1</div>
                <div class="dd-item" id="dd2-item2">Item 2.2</div>
                <div class="dd-item" id="dd2-item3">Item 2.3</div>
                <div class="dd-ct-note">
                    group2
                </div>
            </div>
            <div class="dd-ct-src" id="dd3-ct">
                <div class="dd-item" id="dd3-item1">Item 3.1</div>
                <div class="dd-item" id="dd3-item2">Item 3.2</div>
                <div class="dd-item" id="dd3-item3">Item 3.3</div>
                <div class="dd-ct-note">
                    group2<br />
                    group3
                </div>
            </div>
            <div class="dd-ct-trg" id="dd4-ct">
                <div class="dd-ct-note">
                    group1
                </div>
            </div>
            <div class="dd-ct-trg" id="dd5-ct">
                <div class="dd-ct-note">
                    group1<br />
                    group2
                </div>
            </div>        
            <div class="dd-ct-trg" id="dd6-ct">
                <div class="dd-ct-note">
                    group3
                </div>
            </div>      
        </form>    
    </body>
    </html>
    Last edited by geoffrey.mcgill; Oct 21, 2010 at 5:26 PM. Reason: [CLOSED]
  2. #2
    Hi,

    I don't think that DragZone supports multiple groups because group is like ID for drag element. Only one group can be associated with drag target.

    Multiple groups can be defined in the DropZone because it can accept drag targets from various groups
  3. #3
    The DragZone official ExtJS 3.2.1 API Documentation says

    addToGroup( sGroup {string} ) : void
    Add this instance to a group of related drag/drop objects. All instances belong to at least one group, and can belong to as many groups as needed.

    Maybe the documentaion is faulty or maybe i'm using incorrectly the Drag&Drop grouping system.
    What about a pure Ext.JS implementation?

    Right now i have no time to provide one, but ASAP i will make one for testing pourpose ;)
  4. #4
    Hi,

    I am sure that on pure ExtJS sample the behaviour will be the same. Why do you need multiple groups for DragZone? IMHO it have no sense
  5. #5
    I was just playing around with the Drag&Drop. No real use.
    In any case i was just wondering if it is a bug, but as you state it's not.

    So nothing to fix! ;)
  6. #6
    Hi,

    Well, I think it is need to post the question at ExtJS forum (i will post this question) because I am not sure that it is a bug. I will update this thread if new information will be available
  7. #7
    Hi capecod,

    For the future please post your questions in the Premium help forum.
    We are always focused on this forum and there are more chances to get a quick response.
    Thank you.

    Well, I think it is need to post the question at ExtJS forum (i will post this question) because I am not sure that it is a bug. I will update this thread if new information will be available
    Hi Vladimir,

    Any update?

Similar Threads

  1. [CLOSED] drag and drop`
    By rnachman in forum 1.x Legacy Premium Help
    Replies: 11
    Last Post: May 12, 2011, 2:42 PM
  2. [CLOSED] Need Help With Drag & Drop Example in VB
    By garrisrd in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Oct 12, 2010, 4:34 PM
  3. Drag Drop
    By designworxz in forum 1.x Help
    Replies: 0
    Last Post: Feb 19, 2009, 11:46 PM
  4. Grid to grid Drag and Drop grouping issue
    By bobs in forum 1.x Help
    Replies: 0
    Last Post: Feb 10, 2009, 7:13 AM
  5. [CLOSED] MultiSelect with drag and drop, Drop listener
    By Jurke in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Jan 30, 2009, 8:25 AM

Tags for this Thread

Posting Permissions