Confirm, the DropTarget placed in the Bin collection doesn't currently work. It will be fixed in v2.1. Thanks for the report.
But DragTracker should work. Here is the example based on:
https://examples2.ext.net/#/DragDrop...d/DragTracker/
There are two changes.
1. The DragTracker has been moved to the Viewport Bin.
2. It is accessed
#{Viewport1}.bin[0]
instead of
#{DragTracker1}
within the Panel AfterRender listener.
Example
<%@ Page Language="C#" %>
<%@ Import Namespace="System.Collections.Generic"%>
<%@ Register assembly="Ext.Net" namespace="Ext.Net" tagprefix="ext" %>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
divsData.Items.Add("divs", new List<object>
{
new { X=20, Y=20 },
new { X=80, Y=20 },
new { X=140, Y=20 },
new { X=200, Y=20 },
new { X=20, Y=80 },
new { X=80, Y=80 },
new { X=140, Y=80 },
new { X=200, Y=80 },
new { X=20, Y=140 },
new { X=80, Y=140 },
new { X=140, Y=140 },
new { X=200, Y=140 }
});
}
</script>
<!DOCTYPE html>
<html>
<head runat="server">
<title>Click and Drag to Select Items - Ext.NET Examples</title>
<style type="text/css">
div.tracked-item {
border : 1px solid silver;
background-color : #f0f080;
width : 40px;
height : 40px;
text-align : center;
line-height : 40px;
font-size : 11px;
font-family : sans-serif;
position : absolute;
cursor : default;
}
.drag-area {
background-color : #f0f0f0 ! important;
position : relative;
}
.dd-proxy {
opacity : 0.4;
-moz-opacity : 0.4;
filter : alpha(opacity=40);
cursor : default ! important;
}
div.tracked-item.selected {
background-color : blue;
color : white;
font-weight : bold;
}
</style>
<script type="text/javascript">
var startTrack = function () {
Ext.select("div.tracked-item.selected").removeCls("selected");
this.items = Ext.select("div.tracked-item", true);
};
var dragTrack = function () {
this.items.each(function (item) {
var r = item.getRegion(),
sel = this.dragRegion.intersect(r);
if (sel) {
item.addCls("selected");
} else {
item.removeCls("selected");
}
}, this);
};
var endTrack = function () {
delete this.items;
};
</script>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />
<ext:ObjectHolder ID="divsData" runat="server" />
<ext:XTemplate ID="Tpl1" runat="server">
<Html>
<tpl for=".">
<div id="item-{#}" index="{#}" class="tracked-item" style="top:{Y}px;left:{X}px;">Item {#}</div>
</tpl>
</Html>
</ext:XTemplate>
<ext:Viewport ID="Viewport1" runat="server" Layout="Border">
<Bin>
<ext:DragTracker runat="server">
<Listeners>
<DragStart Fn="startTrack" />
<Drag Fn="dragTrack" />
<DragEnd Fn="endTrack" />
</Listeners>
</ext:DragTracker>
</Bin>
<Items>
<ext:Panel runat="server" Region="North" Height="70">
<Content>
<h3>Click and Drag to Select Items</h3>
</Content>
</ext:Panel>
<ext:Panel
runat="server"
Region="Center"
BodyCssClass="drag-area">
<Listeners>
<AfterRender Handler="#{Tpl1}.overwrite(this.body, #{divsData}.divs);
#{Viewport1}.bin[0].initEl(this.el);" />
</Listeners>
</ext:Panel>
</Items>
</ext:Viewport>
</form>
</body>
</html>
