UpdatePanel - postback ruins drag and drop behavior

I've been trying out the dragDropList behavior and it works fine with regular ASP.Net pages.
I then wrapped it in an UpdatePanel, and it works fine when the page is initially loaded - but as soon as a postback occurs the drag-and-drop no longer works.

I've tried putting the XML script inside the UpdatePanel, outside it, in the head, etc. I just can't get it to work.

Here's the form part of my aspx page:

<form id="form1" runat="server">
<atlas:ScriptManager ID="AtlasScriptManager" EnablePartialRendering="true" EnableViewState="true" runat="server">
 <Scripts>
<atlas:ScriptReference ScriptName="AtlasUIDragDrop" />
 </Scripts>
</atlas:ScriptManager
<atlas:UpdatePanel ID="MainUpdatePanel" Mode="Always" runat="server">
 <ContentTemplate>
<div id="dropArea" class="dropArea">
 <div id="content1" class="item">
<div id="content1Handle" class="itemHandle">Draggable Panel</div>
<div class="itemContent">You can drag these panels to another position in the list.</div>
 </div>
 <div id="content2" class="item">
<div id="content2Handle" class="itemHandle">Draggable Panel</div>
<div class="itemContent">
 <p>Clicking on this button will invalidate the drag-n-drop support.<br />
 I haven't figured out why yet...</p>
 <asp:Button ID="BtnTest" Text="Test" runat="server" />
 </ul>
</div>
 </div>
</div
<div class="templates">
 <div id="dropCueTemplate" class="dropCue">Let go!</div>
</div>
 </ContentTemplate>
</atlas:UpdatePanel
<script type="text/xml-script">
 <page xmlns:script="http://schemas.microsoft.com/xml-script/2005">
<components>
<!-- Drop Area --> <control id="dropArea">
<behaviors>
 <dragDropList dataType="HTML" acceptedDataTypes="'HTML'" dragMode="Move" direction="Vertical">
<dropCueTemplate>
 <template layoutElement="dropCueTemplate" />
</dropCueTemplate>
 </dragDropList>
</behaviors>
 </control
<!-- Draggable items --> <control id="content1">
<behaviors>
 <draggableListItem handle="content1Handle" />
</behaviors>
 </control
 <control id="content2">
<behaviors>
 <draggableListItem handle="content2Handle" />
</behaviors>
 </control>
</components>
 </page>
</script>
</form>

I'd appreciate any suggestions on what might be wrong and how I can fix it.Hi,

an UpdatePanel should contain only server controls, i.e. controls that can be extended by using an extender or controls that programmatically render Atlas markup.

You should avoid to wrap static HTML with an UpdatePanel, because in this case, the corresponding Atlas controls are disposed after a postback, and they are not re-instantiated as expected.
Thanks for your reply, Garbin.

Unfortunately, that is not the issue (but good to know!). I replaced everything with server controls and the issue remains. After the postback, the drag and drop no longer works.
Hi,

using server controls in this case doesn't solve the problem becauseyour problem regards the corresponding client counterparts, that aredisposed after an update is triggered.

This means that, even if you have replaced a <div id="content1" /> with a <asp:Panel id="content1" runat="server" />, you have an Atlas <control id="content1" /> that is disposed when a postback occurs, stopping the dragdrop functionality to work.

To solve this problem, you need an extender or an Atlas-enabled server control, i.e. a control that programmatically renders the <control id="..." /> stuff, because in this way the rendered Atlas markup will be parsed after a postback and the client functionality will be correctly restored.

i have the same problem but not only with my drag overlay...but i dont understand Garbin on what i need to do to fix the problem. I have attached an asp:panel to my drag overlay.

Could you please explain further on what i need to do?

thanks

o

Hi,

basically you should not put static HTML in an UpdatePanel, because
a partial update could potentially clear it.

Garbin you are my hero :)

I'm now able to do "drag & drop google style" because of you!

thank you very much!!