[CLOSED] Drag and Drop Multiple Groups

**ATLAS** · Sep 11, 2013, 11:39 AM

I have Drag and Drop working with a single Group but trying to get the target droptarget to accept multiple groups - I am using this - which doesn't work - is there another method?

@(Html.X().DropTarget()
      .Target("={#{CU_OPTIONAL_ID0}.body.dom}")
      .Groups(groups => {groups.Add(new DragDropGroup("AIGroup",true));groups.Add(new DragDropGroup("CUGroup",true));})
      .NotifyEnter(h => h.Fn = "fnNotifyCUPanel")
      .NotifyDrop(h => h.Fn = "fnNotifyDropPanel")
      )

@(Html.X().DragZone()
      .Target("={#{CU_SELECT_ID1}.getEl().el}")
      .Group("CUGroup")
      .GetDragData(h => h.Fn = "fnGetDragData")
      .GetRepairXY(h => h.Fn = "fnGetRepairXY")
        
      )

**Daniil** · Sep 11, 2013, 2:19 PM

Hi @ATLAS,

Please edit the post wrapping the code in [CODE] tags.

**ATLAS** · Sep 11, 2013, 5:51 PM

Originally Posted by Daniil

Hi @ATLAS,

Please edit the post wrapping the code in [CODE] tags.

I edited the original message - don't know if this gives you a notification that he question is updated without a reply?

**Daniil** · Sep 12, 2013, 6:55 AM

Thank you for editing. There are no notifications about editing of posts. In such cases I monitor threads manually. But you are good to bump the thread.

As for the problem.

As far as I can see you are adding multiple groups correctly.

So, do you mean that it works with this?

@(Html.X().DropTarget()
    .Target("={#{CU_OPTIONAL_ID0}.body.dom}")
    .Group("CUGroup")

i.e. takes dragging for the CUGroup DragZone, but stops working at all if you are replacing

.Group("CUGroup")

with

.Groups(groups => {groups.Add(new DragDropGroup("AIGroup",true));groups.Add(new DragDropGroup("CUGroup",true));})

i.e. it stops taking dragging even from the CUGroup DragZone.

**ATLAS** · Sep 12, 2013, 6:59 AM

Yes that is correct - it works fine for single .Group - the problem is that I have two different types of objects on the screen and need to stop users from moving boxes from one type to another hence the different group types (the target is a single box which all objects can get moved into - hence the use of .Groups)

Originally Posted by Daniil

Thank you for editing. There are no notifications about editing of posts. In such cases I monitor threads manually. But you are good to bump the thread.

As for the problem.

As far as I can see you are adding multiple groups correctly.

So, do you mean that it works with this?

@(Html.X().DropTarget()
    .Target("={#{CU_OPTIONAL_ID0}.body.dom}")
    .Group("CUGroup")

i.e. takes dragging for the CUGroup DragZone, but stops working at all if you are replacing

.Group("CUGroup")

with

.Groups(groups => {groups.Add(new DragDropGroup("AIGroup",true));groups.Add(new DragDropGroup("CUGroup",true));})

i.e. it stops taking dragging even from the CUGroup DragZone.

**Daniil** · Sep 12, 2013, 12:38 PM

Could you, please, provide an example to test with?

**ATLAS** · Sep 16, 2013, 10:17 AM

Originally Posted by Daniil

Could you, please, provide an example to test with?

It is quite difficult (and time consuming) to provide standalone examples now as the system relies on data constructing ext.net components - would it be possible for you to provide a working static example of a drag and drop which has 2 groups one per drag box and a drop box which allows both groups to be dragged into it. That way you can't drag items from drag box to drag box but can only put them into the drop box - if it works statically like that then I can use that to build the dynamic situation (if not then it is a bug, which if the code I gave you seems ok is the more likely scenario)

Thanks

**Daniil** · Sep 16, 2013, 12:42 PM

OK, the example is bellow. It looks a bug. We are investigating.

Example

@{
    var X = Html.X(); 
}

<!DOCTYPE html>
<html>
<head>
    <title>Ext.Net.MVC v2 Example</title>

    <style>
        body {
            font-size: 11px;
        }

        .dd-ct {
            position: absolute;
            border: 1px solid silver;
            width: 180px;
            height: 180px;
            top: 40px;
            background-color: #ffffc0;
        }

        #dd1-ct {
            left: 64px;
        }

        #dd2-ct {
            left: 256px;
        }

        #dd3-ct {
            left: 154px;
            top: 240px;
        }

        .dd-item {
            height: 18px;
            border: 1px solid #a0a0a0;
            background-color: #c4d0ff;
            vertical-align: middle;
            cursor: move;
            padding: 2px;
            z-index: 1000;
        }

        .dd-ct .dd-item {
            margin: 2px;
        }
    </style>

    <script>
        var getDragData = function (e) {
            var sourceEl = e.getTarget(".dd-item");

            if (sourceEl) {
                d = sourceEl.cloneNode(true);
                d.id = Ext.id();
                return {
                    ddel: d,
                    sourceEl: sourceEl,
                    repairXY: Ext.fly(sourceEl).getXY()
                }
            }
        };
    </script>
</head>
<body>
    @X.ResourceManager()

    <div class="dd-ct" 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>

    <div class="dd-ct" 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>

    <div class="dd-ct" id="dd3-ct"></div>

    @(Html.X().DragZone()
        .Target("dd1-ct")
        .Group("group1")
        .GetDragData(h => h.Fn = "getDragData")
    )

    @(Html.X().DragZone()
        .Target("dd2-ct")
        .Group("group2")
        .GetDragData(h => h.Fn = "getDragData")
    )

    @(Html.X().DropTarget()
        .Target("dd3-ct")
        .Groups(groups =>
        {
            groups.Add(new DragDropGroup("group1", true));
            groups.Add(new DragDropGroup("group2", true));
        })
        .NotifyDrop(h => h.Handler = "console.log('The item is dropped');")
    )
</body>
</html>

**Daniil** · Sep 16, 2013, 12:57 PM

As far as I can see ExtJS doesn't support specifying multiple groups initially. We will review the Groups property. Maybe, will just hide.

There is a possibility to add a DropTarget to another group using the addToGroup method.

Please see the ResourceManager's DocumentReady listener and the DropTarget component (it is used with the Group property, no Groups one).

Example

@{
    var X = Html.X(); 
}

<!DOCTYPE html>
<html>
<head>
    <title>Ext.Net.MVC v2 Example</title>

    <style>
        body {
            font-size: 11px;
        }

        .dd-ct {
            position: absolute;
            border: 1px solid silver;
            width: 180px;
            height: 180px;
            top: 40px;
            background-color: #ffffc0;
        }

        #dd1-ct {
            left: 64px;
        }

        #dd2-ct {
            left: 256px;
        }

        #dd3-ct {
            left: 154px;
            top: 240px;
        }

        .dd-item {
            height: 18px;
            border: 1px solid #a0a0a0;
            background-color: #c4d0ff;
            vertical-align: middle;
            cursor: move;
            padding: 2px;
            z-index: 1000;
        }

        .dd-ct .dd-item {
            margin: 2px;
        }
    </style>

    <script>
        var getDragData = function (e) {
            var sourceEl = e.getTarget(".dd-item");

            if (sourceEl) {
                d = sourceEl.cloneNode(true);
                d.id = Ext.id();
                return {
                    ddel: d,
                    sourceEl: sourceEl,
                    repairXY: Ext.fly(sourceEl).getXY()
                }
            }
        };
    </script>
</head>
<body>
    @(X.ResourceManager()
        .Listeners(events => events.DocumentReady.Handler = "App.DropTarget1.ddControl.addToGroup('group2');")
    )

    <div class="dd-ct" 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>

    <div class="dd-ct" 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>

    <div class="dd-ct" id="dd3-ct"></div>

    @(Html.X().DragZone()
        .Target("dd1-ct")
        .Group("group1")
        .GetDragData(h => h.Fn = "getDragData")
    )

    @(Html.X().DragZone()
        .Target("dd2-ct")
        .Group("group2")
        .GetDragData(h => h.Fn = "getDragData")
    )

    @(Html.X().DropTarget()
        .ID("DropTarget1")
        .Target("dd3-ct")
        .Group("group1")
        .NotifyDrop(h => h.Handler = "console.log('The item is dropped');")
    )
</body>
</html>

**ATLAS** · Sep 16, 2013, 3:19 PM

Your example works so I shall implement this on our dynamic page - many thanks this is very helpful

Originally Posted by Daniil

As far as I can see ExtJS doesn't support specifying multiple groups initially. We will review the Groups property. Maybe, will just hide.

There is a possibility to add a DropTarget to another group using the addToGroup method.

Please see the ResourceManager's DocumentReady listener and the DropTarget component (it is used with the Group property, no Groups one).

Example

@{
    var X = Html.X(); 
}

<!DOCTYPE html>
<html>
<head>
    <title>Ext.Net.MVC v2 Example</title>

    <style>
        body {
            font-size: 11px;
        }

        .dd-ct {
            position: absolute;
            border: 1px solid silver;
            width: 180px;
            height: 180px;
            top: 40px;
            background-color: #ffffc0;
        }

        #dd1-ct {
            left: 64px;
        }

        #dd2-ct {
            left: 256px;
        }

        #dd3-ct {
            left: 154px;
            top: 240px;
        }

        .dd-item {
            height: 18px;
            border: 1px solid #a0a0a0;
            background-color: #c4d0ff;
            vertical-align: middle;
            cursor: move;
            padding: 2px;
            z-index: 1000;
        }

        .dd-ct .dd-item {
            margin: 2px;
        }
    </style>

    <script>
        var getDragData = function (e) {
            var sourceEl = e.getTarget(".dd-item");

            if (sourceEl) {
                d = sourceEl.cloneNode(true);
                d.id = Ext.id();
                return {
                    ddel: d,
                    sourceEl: sourceEl,
                    repairXY: Ext.fly(sourceEl).getXY()
                }
            }
        };
    </script>

    @*<script>
        Ext.dd.DropTarget.override({
            constructor : function(el, config){
                this.el = Ext.get(el);

                Ext.apply(this, config);

                if(this.containerScroll){
                    Ext.dd.ScrollManager.register(this.el);
                }

                debugger;
                this.callParent([this.el.dom, this.ddGroup || this.group,
                      {isTarget: true}]);
            }
        });
    </script>*@
</head>
<body>
    @(X.ResourceManager()
        .Listeners(events => events.DocumentReady.Handler = "App.DropTarget1.ddControl.addToGroup('group2');")
    )

    <div class="dd-ct" 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>

    <div class="dd-ct" 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>

    <div class="dd-ct" id="dd3-ct"></div>

    @(Html.X().DragZone()
        .Target("dd1-ct")
        .Group("group1")
        .GetDragData(h => h.Fn = "getDragData")
    )

    @(Html.X().DragZone()
        .Target("dd2-ct")
        .Group("group2")
        .GetDragData(h => h.Fn = "getDragData")
    )

    @(Html.X().DropTarget()
        .ID("DropTarget1")
        .Target("dd3-ct")
        .Group("group1")
        .NotifyDrop(h => h.Handler = "console.log('The item is dropped');")
    )
</body>
</html>

Thread: [CLOSED] Drag and Drop Multiple Groups

Thread Tools

Search Thread

Display

[CLOSED] Drag and Drop Multiple Groups

Similar Threads

[CLOSED] How to disallow grid drag drop if different groups are selected / disallow dropping in other group

[CLOSED] Drag and Drop with multiple Groups

[CLOSED] [1.0] Drag Drop Multiple TreeNodes?

Treepanel multiple items drag&drop

[CLOSED] [1.0] Drag and Drop - Multiple droptargets

Posting Permissions

Sitemap

Downloads

Resources

Thread: [CLOSED] Drag and Drop Multiple Groups

[CLOSED] Drag and Drop Multiple Groups

Similar Threads

Posting Permissions

Sitemap

Downloads

Resources

Stay connected with us