PDA

View Full Version : [CLOSED] Drag and Drop Multiple Groups



ATLAS
Sep 11, 2013, 12:39 PM
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, 3:19 PM
Hi @ATLAS,

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

ATLAS
Sep 11, 2013, 6:51 PM
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, 7: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, 7: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)


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, 1:38 PM
Could you, please, provide an example to test with?

ATLAS
Sep 16, 2013, 11:17 AM
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, 1: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, 1: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, 4:19 PM
Your example works so I shall implement this on our dynamic page - many thanks this is very helpful


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>

Daniil
Sep 18, 2013, 3:48 PM
We fixed it in SVN. Now, the Groups property works.

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()
.ID("DropTarget1")
.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>

ATLAS
Sep 19, 2013, 2:03 PM
Thanks for that fix. Running the latest SVN now
With the following code I can correctly drag each of the 3 boxes to the drop box and it stops them being dropped onto each of the other boxes correctly. However on the return trip I can move any of the boxes from the target drop box to any of the dragzones - is this a bug or is thre any way around this?



@(Html.X().DragZone()
.Target("={#{CU_OPTIONAL_ID0}.getEl().el}")
.Groups(groups => { groups.Add(new DragDropGroup("AIGroup", true)); groups.Add(new DragDropGroup("CU0Group", true)); groups.Add(new DragDropGroup("CU1Group", true)); })
.GetDragData(h => h.Fn = "fnGetDragData")
.GetRepairXY(h => h.Fn = "fnGetRepairXY"))


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

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

)

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

)

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

)



@(Html.X().DropTarget()
.Target("={#{CU_SELECT_ID0}.body.dom}")
.Group("CU0Group")
.NotifyEnter(h => h.Fn = "fnNotifyTakeBackCUPanel")
.NotifyDrop(h => h.Fn = "fnNotifyDropTakeBackCUPanel")
)

@(Html.X().DropTarget()
.Target("={#{CU_SELECT_ID1}.body.dom}")
.Group("CU1Group")
.NotifyEnter(h => h.Fn = "fnNotifyTakeBackCUPanel1")
.NotifyDrop(h => h.Fn = "fnNotifyDropTakeBackCUPanel1")
)

@(Html.X().DropTarget()
.Target("={#{AI_SELECT_ID}.body.dom}")
.Group("AIGroup")
.NotifyEnter(h => h.Fn = "fnNotifyTakeBackAIPanel")
.NotifyDrop(h => h.Fn = "fnNotifyDropTakeBackAIPanel")
)

Daniil
Sep 19, 2013, 3:26 PM
Could you modify my example to get it reproducible?

ATLAS
Sep 19, 2013, 4:47 PM
Could you modify my example to get it reproducible?
Your example doesn't show the items in the drop box when I drag them there (in Chrome, and doesn't work in IE9 at all) if it showed them then I could amend it to drag the items back to where they were moved from

Daniil
Sep 20, 2013, 4:57 AM
Your example doesn't show the items in the drop box when I drag them there

Yes, because dropping is not implemented in my example at all. Ok, I implemented it now and it doesn't reproduce the issue that you told about.


and doesn't work in IE9 at all

Seems, it is working same for me in IE9, Chrome and FireFox.

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()
}
}
};

var notifyDrop = function (source, e, data) {
this.el.appendChild(data.sourceEl);
};
</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()
.ID("DropTarget1")
.Target("dd3-ct")
.Groups(groups =>
{
groups.Add(new DragDropGroup("group1", true));
groups.Add(new DragDropGroup("group2", true));
})
.NotifyDrop(h => h.Fn = "notifyDrop")
)
</body>
</html>

ATLAS
Sep 23, 2013, 3:15 PM
Hi Daniil



@{
Layout = "";
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()
}
}
};

var notifyDrop = function (source, e, data) {
this.el.appendChild(data.sourceEl);
};
</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().DragZone()
.Target("dd3-ct")
.Groups(groups =>
{
groups.Add(new DragDropGroup("group1", true));
groups.Add(new DragDropGroup("group2", true));
})
.GetDragData(h => h.Fn = "getDragData")
)
@(Html.X().DropTarget()
.ID("DropTarget1")
.Target("dd3-ct")
.Groups(groups =>
{
groups.Add(new DragDropGroup("group1", true));
groups.Add(new DragDropGroup("group2", true));
})
.NotifyDrop(h => h.Fn = "notifyDrop")
)
@(Html.X().DropTarget()
.Target("dd1-ct")
.Group("group1")
.NotifyDrop(h => h.Fn = "notifyDrop")
)
@(Html.X().DropTarget()
.Target("dd2-ct")
.Group("group2")

.NotifyDrop(h => h.Fn = "notifyDrop")
)
</body>
</html>


drag item1 from box 1 to box 3 ok
drag item2 from box 2 to box 3 ok
problem is that I can drag item2 from box 3 to box 1 and
item1 from box3 to box 2

Ideally would like to limit item1 to box 3 and only box 1
and limit item2 to box 3 and box 2

is there any way of altering the code here to do that?

Daniil
Sep 24, 2013, 10:00 AM
Well, you defined these DropTargets.

@(Html.X().DropTarget()
.Target("dd1-ct")
.Group("group1")
.NotifyDrop(h => h.Fn = "notifyDrop")
)

@(Html.X().DropTarget()
.Target("dd2-ct")
.Group("group2")
.NotifyDrop(h => h.Fn = "notifyDrop")
)

And this DragZone:

@(Html.X().DragZone()
.Target("dd3-ct")
.Groups(groups =>
{
groups.Add(new DragDropGroup("group1", true));
groups.Add(new DragDropGroup("group2", true));
})
.GetDragData(h => h.Fn = "getDragData")
)

It is why you are able to drag from "dd3-ct" to "dd-1" and "dd-2".

Maybe, you could use another groups for those DropTargets.

@(Html.X().DropTarget()
.Target("dd1-ct")
.Group("group3")
.NotifyDrop(h => h.Fn = "notifyDrop")
)

@(Html.X().DropTarget()
.Target("dd2-ct")
.Group("group4")
.NotifyDrop(h => h.Fn = "notifyDrop")
)

ATLAS
Sep 25, 2013, 8:57 AM
I tried this but it still allows dragging of items in box 3 to box 1 and box 2 - I need to see if I can limit where it can be dragged back to



@{
Layout = "";
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()
}
}
};

var notifyDrop = function (source, e, data) {
this.el.appendChild(data.sourceEl);
};
</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")
.Groups(groups =>
{
groups.Add(new DragDropGroup("group1", true));
})

.GetDragData(h => h.Fn = "getDragData")
)

@(Html.X().DragZone()
.Target("dd2-ct")
.Groups(groups =>
{
groups.Add(new DragDropGroup("group2", true));
})
.GetDragData(h => h.Fn = "getDragData")
)
@(Html.X().DragZone()
.Target("dd3-ct")
.Groups(groups =>
{
groups.Add(new DragDropGroup("group1", true));
groups.Add(new DragDropGroup("group2", true));
groups.Add(new DragDropGroup("group3", true));
groups.Add(new DragDropGroup("group4", true));
})
.GetDragData(h => h.Fn = "getDragData")
)
@(Html.X().DropTarget()
.ID("DropTarget1")
.Target("dd3-ct")
.Groups(groups =>
{
groups.Add(new DragDropGroup("group1", true));
groups.Add(new DragDropGroup("group2", true));
groups.Add(new DragDropGroup("group3", true));
groups.Add(new DragDropGroup("group4", true));
})
.NotifyDrop(h => h.Fn = "notifyDrop")
)
@(Html.X().DropTarget()
.Target("dd1-ct")
.Group("group3")
.NotifyDrop(h => h.Fn = "notifyDrop")
)
@(Html.X().DropTarget()
.Target("dd2-ct")
.Group("group4")
.NotifyDrop(h => h.Fn = "notifyDrop")
)
</body>
</html>

Daniil
Sep 25, 2013, 1:05 PM
I am not sure why you are adding these groups

groups.Add(new DragDropGroup("group3", true));
groups.Add(new DragDropGroup("group4", true));
to the DragZone with "box 3" target ("dd3-ct") if you don't want allow dragging from that box to other boxes.

ATLAS
Sep 25, 2013, 1:59 PM
Perhaps I haven't made myself clear -

Box 1 drag to Box 3 and drop
Box 2 drag to Box 3 and drop
Box 1 cannot drag and drop to Box 2
Box 2 cannot drag and drop to Box 1
Box 3 items from Box 1 can be dragged out and dropped onto Box 1 only (returned to original box if chosen in error)
Box 3 items from Box 2 can be dragged out and dropped onto Box 2 only (returned to original box if chosen in error)

Thanks


I am not sure why you are adding these groups

groups.Add(new DragDropGroup("group3", true));
groups.Add(new DragDropGroup("group4", true));
to the DragZone with "box 3" target ("dd3-ct") if you don't want allow dragging from that box to other boxes.

Daniil
Sep 26, 2013, 7:10 AM
Thank you for the clarification, the requirement is clear now.

You can mark a dropped element where it is dragged from - sourceElId. Then restrict dropping if that sourceElId doesn't match a drop target.

Here is an example.

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()
}
}
};

var notifyDropForBox12 = function (source, e, data) {
var sourceElId = data.sourceEl.getAttribute("sourceElId");

if (this.el.id === sourceElId) {
this.el.appendChild(data.sourceEl);
}
};

var notifyDropForBox3 = function (source, e, data) {
Ext.fly(data.sourceEl).set({ // mark a DOM element
sourceElId: source.el.id
});
this.el.appendChild(data.sourceEl);
};

var notifyOver = function (source, e, data) {
var sourceElId = data.sourceEl.getAttribute("sourceElId");

return this.el.id === sourceElId ? this.dropAllowed : this.dropNotAllowed;
};
</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().DragZone()
.Target("dd3-ct")
.Group("group3")
.GetDragData(h => h.Fn = "getDragData")
)

@(Html.X().DropTarget()
.Target("dd1-ct")
.Group("group3")
.NotifyOver(h => h.Fn = "notifyOver")
.NotifyDrop(h => h.Fn = "notifyDropForBox12")
)

@(Html.X().DropTarget()
.Target("dd2-ct")
.Group("group3")
.NotifyOver(h => h.Fn = "notifyOver")
.NotifyDrop(h => h.Fn = "notifyDropForBox12")
)

@(Html.X().DropTarget()
.Target("dd3-ct")
.Groups(groups =>
{
groups.Add(new DragDropGroup("group1", true));
groups.Add(new DragDropGroup("group2", true));
})
.NotifyDrop(h => h.Fn = "notifyDropForBox3")
)
</body>
</html>

ATLAS
Sep 26, 2013, 8:22 AM
Excellent that is exactly what I want to do - I will implement this now in our system - thanks - you can close this case now