I'm writting an application that uses extensively drag and drop. It used Sys.UI.DragDropManager and worked fine on July CTP. Now I'm getting a lot of errors in the new Preview DragDopManager. I guess I should not using this one, instead I'm trying to use AjaxControlToolkit.DragDropManager, as it seems to work with the Ajax Control Toolkit.
Hi,
you're right, the DragDropManager defined in the CTP uses type methods (Array.add, Array.remove) that aren't defined anywhere. The DragDropManager contained in the AjaxControlToolkit is the one contained in the July CTP, though you might want to correct the following issue until a Toolkit refresh is available:
http://forums.asp.net/thread/1436147.aspx
Thank you Garbin. I'm using AjaxControlToolkit.DragDropManager with the suggested workaround and it seems to work properly. However there is another bug in the DragDropManager. In some circumstances (sorry I can tell you exactly what circumstances), DragDropManager calculates incorrectly the statingPoint. This bug was in July CTP and is in AjaxControlToolkit.DragDropManager. Sometimes, when you start dragging a control, the drag visual goes way from its natural position, it goes below and right. I'm using the following workaround IDragSource behavior:
// cuando se pulsa con el ratón en el asa para mover
// se comienza la operación Drag and Drop
function OnMoveHandleMouseDown(e)
{
//debug.trace('OnMoveHandleMouseDown');
_startingMove = true;
// salvamos la posición actual del ratón
// para poder calcular luego startingPoint.
_lastClientX = e.clientX;
_lastClientY = e.clientY;
// salvamos la posición del control
// y del scroll para poder calcular luego startingPoint
var x = parseInt(_frame.style.left.replace('px',''));
var y = parseInt(_frame.style.top.replace('px', ''));
var scroll = Sys.UI.Control.getScrollPosition( _frame );
saveOriginalPosition();
window._event = e;
AjaxControlToolkit.DragDropManager.startDragDrop(this, _frame, null);
//hay un bug en el DragDropManager que calcula incorrectamente
//startingPoint, con lo que el control se va lejos
//de la posición donde debería estar. Por eso hay que reponer
//la posición de control y calcular el startingPoint
resetPosition();
_frame.startingPoint = {
x: _lastClientX - x + scroll.x,
y: _lastClientY - y + scroll.y
};
if (window.__safari) {
document.onselectstart = _onSelectStartDelegate;
} else {
$addHandler(document, 'selectstart', _onSelectStartDelegate);
}
}
Basically I'm calculating the startingPoint, I'm assuming (i konow it) that _frame.style.position = 'absolute'.
Here is saveOriginalPosition:
function saveOriginalPosition()
{
var left = parseInt( _frame.style.left.replace('px', '') );
var top = parseInt( _frame.style.top.replace('px', ''));
_originalPosition = { x:left, y:top };
}
and Sys.UI.Control.getScrollPosition:
Sys.UI.Control.getScrollPosition = function(element) {
var scrollLeft = 0;
var scrollTop = 0;
var parent;
for (parent = element.parentNode; parent; parent = parent.parentNode)
{
if (parent.scrollLeft) {
scrollLeft += parent.scrollLeft;
}
if (parent.scrollTop) {
scrollTop += parent.scrollTop;
}
}
return { x: scrollLeft, y: scrollTop };
}
I mean I can't tell you ...
Hi,
thank you for posting the code, I'll try to understand what's happening there.
Let me know if you manage to write a repro for this issue.
Sorry, but time restrictions prevent me to create a simple repro. However I can tell you what I discovered.
1) the _drag method sets the location (setLocation(position)) based on this calculus:
position = mousePosition - statingPoint + scroll // please, assume these are 2D vectors and we have overloaded the operators.
2) when starting the dragging operation, if the original position of drag visual is 'absolute', the position must not be changed and:
staringPoint must be = mousePosition - position + scroll
3) However startDragDrop method calculates starting point as:
startingPoint = mousePosition - getLocation + scroll
getLocation can be different (likely greatter) than position (style.left , style.top) for an absolutely postioned element if it has a positioned ancestor other than body. This is because the drag visual moves down and right when starting the drag operation
4) startDragDrop contains an extrange logic. It does:
dragVisual.style.position = "absolute";
....
if (dragVisual.style.position == "absolute") {
dragVisual.startingPoint = this.subtractPoints(dragVisual.startingPoint, Sys.UI.DomElement.getLocation(dragVisual));
}
else {
var left = parseInt(dragVisual.style.left);
var top = parseInt(dragVisual.style.top);
if (isNaN(left)) left = "0";
if (isNaN(top)) top = "0";
dragVisual.startingPoint = this.subtractPoints(dragVisual.startingPoint, { x: left, y: top });
}
comparing position == 'absolute' has no sense if you previously set position = 'absolute'
I also think (not sure) it should be:
if (dragVisual.style.position != "absolute") {
dragVisual.startingPoint = this.subtractPoints(dragVisual.startingPoint, Sys.UI.DomElement.getLocation(dragVisual));
}
else {
var left = parseInt(dragVisual.style.left);
var top = parseInt(dragVisual.style.top);
if (isNaN(left)) left = "0";
if (isNaN(top)) top = "0";
dragVisual.startingPoint = this.subtractPoints(dragVisual.startingPoint, { x: left, y: top });
}
...
dragVisual.style.position = "absolute";
Ok, here is a repro:
<%@. Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
<%@. Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
<!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 runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID= "sm" runat="server">
</asp:ScriptManager>
<h1>Bug demostration</h1>
<p /><p /><p /><p /><p />
<div style='position:relative'>
<asp:Panel runat="server" ID="panel1" style='position:absolute;left:50px;top:50px;width:50px;height:100px;background-color:Blue;'>
<asp:Panel runat="server" ID="handle" style='position:absolute;left:0px;top:0px;width:50px;height:20px;background-color:Green;'>
</asp:Panel>
</asp:Panel>
<ajaxToolkit:DragPanelExtender ID="DragPanelExtender1" runat="server"
TargetControlID="panel1" DragHandleID="handle" />
</div>
</form>
</body>
</html>
Please, try to drag the panel, you will see how the drag visual moves down and right when you start the drag operation.
I applied the above changes and it seems to work :-)
Hi,
thanks. Is the above repro using the modified version of the Toolkit (i.e. the one with the fix suggested in the first reply) ?
Yes,
Whithout any changes, the repro shows the bug, with your first fix, the repro still shows the bug. With the fix I suggested does not show the bug.
Hi,
where is the file stored that has to be changed?
Jesús:
Whithout any changes, the repro shows the bug, with your first fix, the repro still shows the bug. With the fix I suggested does not show the bug.
Months later this bug still exists in the March '07 release. Any idea from MSFT if this fix will be incorporated into a release?
Gerry
Whithout any changes, the repro shows the bug, with your first fix, the repro still shows the bug. With the fix I suggested does not show the bug.
Months later this bug still exists in the March '07 release. Any idea from MSFT if this fix will be incorporated into a release?
Gerry
Whithout any changes, the repro shows the bug, with your first fix, the repro still shows the bug. With the fix I suggested does not show the bug.
Months later this bug still exists in the March '07 release. Any idea from MSFT if this fix will be incorporated into a release?
Gerry
Where do you incorporate this fix? You can show this in the case of your example.
Thanks
Vid
No comments:
Post a Comment