Hello,
Back in Atlas Time (6 monthes ago), I used Garbin's great exemple for a drag and drop found here:
http://aspadvice.com/blogs/garbin/archive/2006/01/17/14730.aspx
Now, after updating to the latest releases of ASPnet Ajax, I cannot make it work.
I've changed the script reference call into:
<asp:ScriptReferenceName="Microsoft.Web.Resources.ScriptLibrary.PreviewScript.js"Assembly="Microsoft.Web.Preview"/>
<asp:ScriptReferenceName="Microsoft.Web.Resources.ScriptLibrary.PreviewDragDrop.js"Assembly="Microsoft.Web.Preview"/>
The drag function (using "draggableListItem" beaviour) works well but the drop ("dragDropList" beaviour) is bugged and I get the following javascript error :
'this._activeDragSource.get_dragDataType()' is null or is not an object
Has there been a change in dragDropList in the new release? I cannot see it listed in the documentation.
Thanks in advance
Hi,
I've modified the example and the following code is working for me:
<%@. Page %><!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>Widgets UI Example</title> <style type="text/css"> body { font-family:Verdana; font-size:11px; } .main { position:relative; width:710px; height:540px; margin:auto; } .list1 { position:absolute; left:0px; height:520px; width:340px; padding:10px 5px 10px 10px; } .list2 { position:absolute; right:0px; height:520px; width:340px; padding:10px 10px 10px 5px; } .item { background:#fff; margin-bottom:5px; background:#fff; } .itemContent { padding:5px; text-align:center; } .itemHandle { height:15px; background:#e5ecf9; overflow:hidden; border-top:solid 1px #3366cc; font-weight:bold; cursor:move; } .dropCue { border:dashed 1px #ff0000; margin-bottom:5px; } .emptyList{ font-weight:bold; text-align:center; } .centered { margin:auto; } .templates { visibility:hidden; } </style></head><body> <form id="form1" runat="server"> <asp:ScriptManager ID="scriptManager" runat="server"> <Scripts> <asp:ScriptReference Assembly="Microsoft.Web.Preview" Name="PreviewScript.js" /> <asp:ScriptReference Assembly="Microsoft.Web.Preview" Name="PreviewDragDrop.js" /> </Scripts> </asp:ScriptManager> <div class="main"><%-- Left Area --%> <div id="leftArea" class="list1"> <div id="content1" class="item"> <div id="content1Handle" class="itemHandle">Content 1</div> <div class="itemContent"> <asp:Login ID="myLogin" runat="server" CssClass="centered"></asp:Login> </div> </div> <div id="content2" class="item"> <div id="content2Handle" class="itemHandle">Content 2</div> <div class="itemContent"> <asp:TextBox ID="myTextBox" runat="server"></asp:TextBox> <asp:Button ID="myButton" runat="server" Text="ClickMe" /> </div> </div> </div><%-- Right Area --%> <div id="rightArea" class="list2"> <div id="content3" class="item"> <div id="content3Handle" class="itemHandle">Content 3</div> <div class="itemContent"> <asp:Calendar ID="myCalendar" runat="server" CssClass="centered"></asp:Calendar> </div> </div> </div><%-- Templates --%> <div class="templates"><%-- Drop Cue template --%> <div id="dropCueTemplate" class="dropCue"></div><%-- Empty template --%> <div id="emptyTemplate" class="emptyList">Drop content here.</div> </div> </div> </form> <script type="text/xml-script"> <page> <components><!-- Left Area --> <control id="leftArea"> <behaviors> <dragDropList dragDataType="HTML" acceptedDataTypes="'HTML'" dragMode="Move" direction="Vertical"> <dropCueTemplate> <template layoutElement="dropCueTemplate" /> </dropCueTemplate> <emptyTemplate> <template layoutElement="emptyTemplate" /> </emptyTemplate> </dragDropList> </behaviors> </control><!-- Right Area --> <control id="rightArea"> <behaviors> <dragDropList dragDataType="HTML" acceptedDataTypes="'HTML'" dragMode="Move" direction="Vertical"> <dropCueTemplate> <template layoutElement="dropCueTemplate" /> </dropCueTemplate> <emptyTemplate> <template layoutElement="emptyTemplate" /> </emptyTemplate> </dragDropList> </behaviors> </control><!-- Draggable items --> <control id="content1"> <behaviors> <draggableListItem handle="content1Handle" /> </behaviors> </control> <control id="content2"> <behaviors> <draggableListItem handle="content2Handle" /> </behaviors> </control> <control id="content3"> <behaviors> <draggableListItem handle="content3Handle" /> </behaviors> </control> </components> </page> </script></body></html> Yes ! It works perfect.
Thank you very much Garbin !
It's a great example.
Many thanksAny ideas how I could save the contents after dragging
Any help on how we can get the list contents after a drop event would be good
Thanks anyway
Mike
mike963:
Any ideas how I could save the contents after dragging
Any help on how we can get the list contents after a drop event would be good
That is what I would also like to know. Also could you please Garbin provide the same code without xmlscript but with Microsoft AJAX library?
Thanx
I've been able to use the following code to make elements draggable:
$create(Sys.Preview.UI.DraggableListItem, {'handle': $get('content1Handle')}, null, null, $get('content1'));
But I haven't been able to programatically attach dragDropList behaviors because I can't figure out how to get a reference to a template. I had it working in Atlas (see: http://forums.asp.net/thread/1411942.aspx) but I had problems updating the template manager to work with MS AJAX.
Not that this will help too much, but I've been attempting the same thing. I've been spending a lot of time trying to understand exactly what the differences are between how the xml-script is parsed and run vice the imperative methods that you (and I) are trying.
A few things of note...
First, I noticed that if you call Sys.Application.getComponents(), the .length property will reveal that the imperative method will show five components are present (one for each $create call if you're mod'ing garbin's example like I am). In the declarative version, there are 10. So, after some investigating it seems that the declarative model makes one component for each DragDropList and each DraggableListItem (each behavior) and another component for each control, as a Sys.UI.Control (rightArea, leftArea, content1, content2, content3). Not sure if that's relevant just yet, but I suspect it might be.
Second, dropCueTemplates are Sys.Preview.UI.Template objects, not 'Declarative Template' objects like in AlexL's previous work around.
I've made them imperatively, but that hasn't helped in part b/c I'm not sure I'm making all the initialization params right. Looking in the previewScript.debug.js file, it looks like there's four params expected, but when I reflect on the actual dropCueTemplate that is sitting in one of the list behavior objects, it looks liek only two of them are passed by the xml-script; those are the _layoutTemplate (to be expected; and it's the dropCueTemplate DomElement), and the _parentMarkupContext.
I tried passing the list behavior a dropCueTemplate by using both the $create(Sys.Preview.UI.Template and the =new Sys.Preview.UI.Template syntax, but I think it's coming down to not knowing how to build that parentMarkupContext right. I've also tried to build one of those to pass in, but so far no joy. $create says that it doesn't support the property and using the =new has no effect at all (no error, no success). I suspect that you have to call initialize to get it to do anything, but I'm not sure why it's throwing that 'not supported' error. The Sys.Preview.UI.Template.initialize() function just deals with really basic DOM manipulation (tests if the layoutelement has a parentnode, if so it removes it from its parent node...)
Well, anyway, I need to get back to work now. T hose are my thoughts, please post here if you guys find anything adn I'll do the same.
Paul
Sorry for the thread necromancy, bu thas anyone had any luck solving this yet? I'd *really* like to be able to handle the control via js instead of xml-script...
Paul
I am looking for an option to save the position of those dragged items. I tried including a floatingbehavior to the xml-script for that control and provided
move = "OnMove" attribute value. And on the OnMove i tried to Save Profile properties. It didn't work. Any suggestions ??
Just to mention I updated the code for Atlas RC1.
Source here :
http://blog.marjanenarnout.be/index.php?entry=entry070320-224307
No comments:
Post a Comment