Sep 08, 2010, 10:10 AM
[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:
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&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]