ASP.NET Web Parts: Drag and Drop Support in Non-IE Browsers

Question

I have been using web parts on my site since ASP.NET 2.0 came out. Dragging and dropping web parts works great in Internet Explorer, but it doesn't work at all in Firefox, Chrome, or Safari. I recently upgraded the site to ASP.NET 3.5 SP1, but I am still unable to drag and drop web parts in non-IE browsers.

How can I enable drag and drop web parts in these other browsers?

Update (2/9/2010):

This mentions this problem, but offers no solution: http://forums.asp.net/t/1294857.aspx

Update (2/19/2010):

These posts offer a possible solution, but I have been unable to get it working yet on my site:

• http://forums.asp.net/p/1451292/3319836.aspx
• http://waitink.blogspot.com/2008/10/ajax-web-parts-part-3-dynamic-web-parts.html

In short, these say the drag and drop problem was solved in "ASP.NET Futures (July 2007 release)" but for some crazy reason, was left out of ASP.NET 3.5 SP1. So to solve, you have to download the Futures release at: http://www.microsoft.com/downloads/details.aspx?FamilyId=A5189BCB-EF81-4C12-9733-E294D13A58E6&displaylang=en

Then, you need to use the WebPartManager and WebPartZone from the Microsoft.Web.Preview.UI.Controls.WebParts namespace.

Answer 1

You must be using a very old version of "Atlas", because they fixed this quite a while ago (after beta 1).

Answer 2

Dear kevin, I don't know how's your application state but I strongly recommand to use something like Google IG page web part style. this is a light and heavy control which works fine with all of available browsers!

you can find a complete description onHow to create a google ig style page at:

http://userscripts.org/scripts/review/2279

note that this is a opensource Greasemonkey script.

you can also find a similar project at codeproject

http://www.codeproject.com/KB/ajax/MakingGoogleIG.aspx?msg=3098239

hope this help

Answer 3

It seems to me that asp.net ajax is not a right tool to do this job. It's too ugly and heavy. I've implemented similar task using ExtJs (click here for a sample). ExtJs is a very powerful js library for RIA. It's was very easy and fast to implement and there was no pain - the code of a library is almost perfect and the documentation really rocks.
Also you can try to implement your web part with JQuery (webparts with JQuery) and JQuery UI. But it will be much more harder in comparison with ExtJs.

(02/17/2010)
I strongly recommend not to use asp.net ajax for this task. It's very hard to debug. JS code of the library IMO is ugly and has a lot of pitfalls and it doesn't allow easy customization. And this is why I recommend to use some different approach. But if you want you can check the source of Dropthings web portal. It uses asp.net ajax but it's highly customized. And it works in FF, Chrome, Opera. Here is the demo.

Answer 4

This might look like a silly question but, if you add the following HTML code to your page:

<div style="background-color: red; padding: 50px; width: 100px;">&nbsp;</div>
<div style="background-color: green; width: 100px;">&nbsp;</div>

Is the red box bigger twice as big as the green one?

If it isn't, you have an incorrect DOCTYPE that's causing the browsers to render the page in Quirks Mode, basically ending any hope you might have of it working across browsers.

If the size of the boxes is correct, do you get any error messages in the Firebug console when you try to drag and drop in Firefox?

And as a last two comments related to the others answers:

1. If you can, I also recommend you to avoid asp.net ajax and use jQuery instead. You'll find much more info around the web, and it's much better documented IMO.
2. Check the references in your project to verify that you really are using the latest version of ASP.Net Ajax. Even if your computer has the latest version of ASP.Net, your project might reference an older dll included in your bin directory (It happened to me once, so I should know!)

Answer 5

Have you checked out JQuery drag and drop support? It works on all the browsers which support Drag and Drop operations and it is pretty easy to implement.

http://www.highoncoding.com/Articles/381_Drag%20And%20Drop%20With%20Persistence%20Using%20JQuery.aspx