Hi!
Great sample! I'm working on AJAX Blog.NET, but I want also create maps form my town (it is so small that it not exists on Google and MSN ;)).
Thank you for source code!
Kind regards
M.Kierepka
Great samples !!
Thanks for sharing :P
Hi there:
Nice sample. Quick question though, is there anyway to preserve the layout on pastback? If you click on any of the calendar controls, ie next month, or day select, the page posts back and doesn't preserve the layout.
Any thoughts?
Thanks!
At this moment you'd have to write some script yourself to iterate over the elements in each list, and identify the position per item.
Very helpful .. Thanks Wilco.
How about adding a new <li> dynamically within the page? Like a "Create new Item" button.
Got any starting points?
That's going to be a bit more tricky at this moment. For stuff like that I'd wait until the ListView has better support for DND built-in. Once it integrates nicely with the DND API, it should be a matter of adding an item to a datasource to update the ListView (which would then render the added item).
Hi! Great sample. I working on similar capabilities and I have the same symptome as your sample have : when you resize de IE Window, then the Items adapt to the new Width of the Window. But as soon as you start moving an Item within a list or from a list to another, it's Width freezes. Then if you resize the Window, you get your Item with it's frozen Width but the others still adapt to the Window Width.
Is it something you missed in your sample and that Atlas could work around or is it the way Atlas works with that issue ?
Thanks.
On IE 6.0, when I drop an Item, it's Width becomes 1 pixel longer than it was. If I drag n drop ten times, it's Width increases by ten pixels and so on.
Good catch Nicolas. At this moment it sets the width to the offsetWidth (which is about the width you're looking at) to prevent it from resizing while it is being dragged (which it would since the item is re-parented to the body). However, it does not properly reset the width to the originally defined width.
The other issue you mentioned is kind of related to this as well. A workaround is to decrease the width of the div inside the listitem a bit. I changed my demo to set the width to 99.5% which seems to fix it.
I encounter a similar bug when dynamically adding content inside the div.
The list positions update correctly until i move the item. After moving, the item retains a fixed height.
Any workarounds for this?
Hi,
This samples works with the new release (Atlas December CTP) ?
Thanks
Great example! I have learned a lot!
I had a questions? If I put the list1 and list2 to two columns of a table, and drag the webparts between two columns, how will it work?
I tried to figure it out today, but failed!
I would appreiciate you for any help!
Vivian Wang
Vivian: I would recommend to just place the 2 lists inside the 2 table cells. In that case you could use the same code as in my examples.
Hi, great sample
It's posible to use ProfileScriptService for keep the state from the List?
Very Informative!
I tried running the Default.aspx page in the new VSI from December and it did not work - looks like they got rid of the atlas:script tags...any ideas what's up?
The Script-Tags are now embedded in the ScriptManager:
<atlas:ScriptManager ID="scriptManager" runat="server" EnablePartialRendering="true">
<Scripts>
<atlas:ScriptReference Browser="Mozilla" Path="~/ScriptLibrary/AtlasCompat.js" ScriptName="Custom" />
<atlas:ScriptReference Browser="Firefox" Path="~/ScriptLibrary/AtlasCompat.js" ScriptName="Custom" />
<atlas:ScriptReference Browser="Mozilla" Path="~/ScriptLibrary/AtlasCore.js" ScriptName="Custom" />
</Scripts>
(...)
</atlas:ScriptManager>
Correct. For the DND library, you can specify a script reference like:
1
|
<atlas:ScriptReference ScriptName="AtlasUIDragDrop" />
|
The server-controls are removed in the December CTP though, so you should (still) use the client-side controls/behaviors.
Hi there, the example was really great !! thanks for that wilco.
Now, I've a little question and may be you can help me: there is some way to know when an item is droped? I means that I need know by a procedue for example, the movement of any element in the page. The idea is to make a chess board where the pieces would be moved from a first cell to the other, and I need know the fisrt and the second cell.
Thanks you for all, I appreciate any suggestions.
Is there anyway you could update the the demo using the lastest March CTP?
I think you have the only example that really shows DND functionality using Atlas.
I tried using the examples from the last two posts but I can't get the drag and drop functionality.
For the march CTP, use the following code:
Grtz. Ids
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
|
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Atlas - DND elements</title>
<style type="text/css">
body
{
font-family: verdana;
font-size: 80%;
}
#list1, #list2
{
padding: 8px;
}
#list1
{
border: 1px solid #aaa;
margin-bottom: 10px;
}
#list2
{
border: 1px solid #aaa;
}
ul
{
padding-left: 0px;
margin: 0px 0px 0px 0px;
}
ul li
{
list-style: none none;
margin-bottom: 10px;
}
.webPart
{
border: 1px solid #ccc;
width: 100%;
}
.webPartTitle
{
background: #fff url('Images/gradient.gif') repeat-x;
cursor: move;
font-weight: bold;
width: 100%;
}
.webPartTitle span
{
padding-left: 5px;
}
.webPartBody
{
padding: 5px;
}
.dropCue
{
border-top: 1px solid #000;
}
.template
{
display: none;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<atlas:ScriptManager ID="S1" runat="server" EnablePartialRendering="true">
<Scripts>
<atlas:ScriptReference ScriptName="AtlasUIDragDrop" />
</Scripts>
</atlas:ScriptManager>
<div style="margin-bottom: 10px">
Move elements using drag and drop.
</div>
The first list:
<div id="list1">
<ul id="category1">
<li id="webPart1">
<div class="webPart">
<div id="webPart1Title" class="webPartTitle">
<span>WebPart #1.</span>
</div>
<div class="webPartBody">
WebPart #1.
</div>
</div>
</li>
<li id="webPart2">
<div class="webPart">
<div id="webPart2Title" class="webPartTitle">
<span>WebPart #2.</span>
</div>
<div class="webPartBody">
<asp:Login ID="Login1" runat="server" />
</div>
</div>
</li>
<li id="webPart3">
<div class="webPart">
<div id="webPart3Title" class="webPartTitle">
<span>WebPart #3.</span>
</div>
<div class="webPartBody">
WebPart #3.
</div>
</div>
</li>
</ul>
</div>
The second list:
<div id="list2">
<ul id="category2">
<li id="webPart4">
<div class="webPart">
<div id="webPart4Title" class="webPartTitle">
<span>WebPart #4.</span>
</div>
<div class="webPartBody">
WebPart #4.
</div>
</div>
</li>
<li id="webPart5">
<div class="webPart">
<div id="webPart5Title" class="webPartTitle">
<span>WebPart #5.</span>
</div>
<div class="webPartBody">
WebPart #5.
</div>
</div>
</li>
<li id="webPart6">
<div class="webPart">
<div id="webPart6Title" class="webPartTitle">
<span>WebPart #6.</span>
</div>
<div class="webPartBody">
<asp:Calendar ID="Calendar1" runat="server" />
</div>
</div>
</li>
</ul>
</div>
<div class="template">
<ul>
<li id="dropCueTemplate" class="dropCue"></li>
</ul>
</div>
<script type="text/xml-script">
<page xmlns:script="http://schemas.microsoft.com/xml-script/2005">
<references>
<add src="ScriptLibrary/AtlasUI.js" />
<add src="ScriptLibrary/AtlasControls.js" />
<add src="ScriptLibrary/AtlasUIDragDrop.js" />
</references>
<components>
<control id="category1">
<behaviors>
<dragDropList dataType="HTML" acceptedDataTypes="'HTML'" dragMode="Move">
<dropCueTemplate>
<template layoutElement="dropCueTemplate" />
</dropCueTemplate>
</dragDropList>
</behaviors>
</control>
<control id="webPart1">
<behaviors>
<draggableListItem handle="webPart1Title" />
</behaviors>
</control>
<control id="webPart2">
<behaviors>
<draggableListItem handle="webPart2Title" />
</behaviors>
</control>
<control id="webPart3">
<behaviors>
<draggableListItem handle="webPart3Title" />
</behaviors>
</control>
<control id="category2">
<behaviors>
<dragDropList dataType="HTML" acceptedDataTypes="'HTML'" dragMode="Move">
<dropCueTemplate>
<template layoutElement="dropCueTemplate" />
</dropCueTemplate>
</dragDropList>
</behaviors>
</control>
<control id="webPart4">
<behaviors>
<draggableListItem handle="webPart4Title" />
</behaviors>
</control>
<control id="webPart5">
<behaviors>
<draggableListItem handle="webPart5Title" />
</behaviors>
</control>
<control id="webPart6">
<behaviors>
<draggableListItem handle="webPart6Title" />
</behaviors>
</control>
</components>
</page>
</script>
</form>
</body>
</html>
|
Hello,
Great sample!
I have got problems with the march CTP.
Can someone do a zip for a newby.
Tks.
My example works with the march CTP, although not in Firefox. Must have missed something.
I tried with the Mach CTP and I've got this :
[code]Compiler Error Message: CS0234: The type or namespace name 'Components' does not exist in the namespace 'Microsoft.Web' (are you missing an assembly reference?)
[/code]
I found the error.
I didn't delete the line :
[code=XML]
<add namespace="Microsoft.Web.Components" assembly="Microsoft.Web.Atlas" tagPrefix="atlas"/>[code]
in the web.config file !
Do you modify the others exemples for march ctp ?
Is there any way to add this behavior to dynamically added controls (panel and all controls within)?
Thanks!
i found this web really helpful
now i know how to do drag drop things thanks wilcob
Hi,
In the latest Ap[ril CTP, there is this dragoverlay extender which allow us to make the drag and drop easier. But is there any way, it can be configure to be able to "snap to grid"? I am writing a program that requires to drag control into a table. I would like to know if it is possible to have a snap to grid effect?
Thanks.
I too am working on a DND application and am interested in finding a way to create the "snap to grid" functionality.
Hi all,
I'm using FireFox and I don't understand why the example doesn't work when I create my own project with your code (which is a great example !). The code from Ids.
It works perfectly on the online demo, works prefectly with IE, and work with the old CTS (the older dll of atlas).
I've tried to modify the web.config, and I've tried to change some stuff, but it still doesn't work.
I've also tried other example like the one at:
http://weblogs.asp.net/scottgu/archive/2006/03/24/441044.aspx
And drags work prefectly under FireFox.
I'll continue to investigate, if I find the solution, I'll post it. But if someone know, I take :D
I'm a newbie in ASP.NET (2.0) and I'm sure the solution is not so far :|
Thanks in advance,
Jeremie.
Ok, I've found the solution
Hi, great sample
In this example,Ondrop event can be raised
Thanks..
Hi,
Good demo.. looks neat.. Is it possible to do similar drag-n-drop
between Asp.Net GridView Columns ?
thx,
Gopi
Great sample. Thank you.
I tried to use the sample that is on-line (with draggable controls) in copy mode, but nothing gets copied to the target area. Why is that?
Thanks, Kathy
Is there an updated version for Atlas July CTP?´
Thanks,
DBA
Hello,
I have some problem regarding this Demo Code..
I want to Move table cell value to another table cell. So, Here If you have some code or changes in this code so my problem will solve..
plese it's Uregent .
Thanks,
Vishal
hi
i want to drag and drop facelity in table
i have two table
table1
table2
in table1 table 3 item (a,b,c)
table2 is empty
when in table1 select a and drag to table2 that time
table2 contain a and fire an insert query in database
but in table1 contain all 3 item
[code = vb.net]
hi
i want to drag and drop facelity in table
i have two table
table1
table2
in table1 table 3 item (a,b,c)
table2 is empty
when in table1 select a and drag to table2 that time
table2 contain a and fire an insert query in database
but in table1 contain all 3 item
[/code]
Chirag,
What this means
please give your problem in descrition.
so any one can understand..
OK Chirag..
It doesn't work in Netscape 8.1.
Could you please confirm?
Thanks
interpeo
Has anyone been able to make this work using a database backend to populate the lists and drag and drop between them?
Wilco,
I've got RC1 installed and have created the same type of demo as you using javascript only. However, how do we go about fixing the element width issue when the browser resizes... Where is the code for that located? Ideally, I want the same resize behavior that http://www.pageflakes.com uses...this is a showstopper for me if I cant fix it :(...appreciate any help you might have.
Andrew
sorry to be so ignorant wilco.. but where are these interfaces? what .dll and namespace? i tried to search for these using the object browser but that did not give any results. what am i missing here?
Hi
Is drag and drop is possible between two GridView's. I want to drag one cell of GridView1 to GridView2 .And on drop an insert statement is to be executed. Can you give me the code for this
Hi,
What if I want to add the DropZones dynamically. I know that the following code marks the drag-drop element:
<control id="webPart4">
<behaviors>
<draggableListItem handle="webPart4Title" />
</behaviors>
</control>
My work around is to load the script and append the new script. Later inject the script using ClientScript.RegisterClientScriptBlock method.
Do you have any other ways to dynamically create the drop zones?
Hi,
The UpdatePanels stopped working when I added the <Scripts> tag inside the ScriptManager control.
First of all Great article and example!
Do you have an updated version of this code for ASP.NET AJAX 1.0? That would be great if you could post it. I'm having trouble converting it over.
Thanks!