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. Dragging and dropping web parts works fine in Internet Explorer, but it doesn't work at all in Firefox, Chrome, or Safari. I recently upgraded my site to ASP.NET 3.5 Service Pack 1 (SP1), but I still cannot drag web parts to non-IE browsers.

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

Update (2/9/2010):

This mentions this problem, but does not offer a solution: http://forums.asp.net/t/1294857.aspx

Update (2/19/2010):

These messages offer a possible solution, but I could not get it to work 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, they say that the drag problem was resolved in ASP.NET Futures (July 2007 release), but for some crazy reason it was left without ASP.NET 3.5 SP1. Therefore, to solve, you need to download the issue of futures at: http://www.microsoft.com/downloads/details.aspx?FamilyId=A5189BCB-EF81-4C12-9733-E294D13A58E6&displaylang=en

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

Answer 1

You must use the very old version of Atlas because they fixed it quite a while ago (after beta 1) .

Answer 2

This may seem like a silly question, but if you add the following HTML 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 field twice as large as the green?

If this is not the case, you have the wrong DOCTYPE that causes browsers to display the page in Quirks mode, basically ending up with any hope you may have while working in browsers.

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

And as the last two comments related to the rest answer:

• If you can, I also recommend that you avoid asp.net ajax and use jQuery instead. You will find much more information on the Internet, and this is much better documented by IMO.
• Check the links in your project to make sure you are using the latest version of ASP.Net Ajax. Even if your computer has the latest version of ASP.Net, your project may reference the older dll included in the bin directory (this happened to me once, so I must know!)

Answer 3

I don’t know how your application is stated, but I highly recommend using something like the style of the web part of the Google IG page. This is a light and heavy control that works great with all available browsers!

you can find the full description aboutHow to create a google ig style page at:

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

Please note that this is a generated Greasemonkey script.

you can also find a similar project in codeproject

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

hope this help

Answer 4

It seems to me that asp.net ajax is not a suitable tool to do this job. It is too ugly and heavy. I performed a similar task using ExtJs ( click here for an example ). ExtJs is a very powerful js library for RIA. It was very easy and fast to implement, and there was no pain - the library code is almost perfect, and the documentation is really amazing.
You can also try to implement your web part using jQuery (jQuery web pages ) and the jQuery user interface. But it will be much more complicated compared to ExtJs.

(02/17/2010)
I highly recommend not using asp.net ajax for this task. It is very difficult to debug. The IMO library's JS code is ugly and has many pitfalls, and this does not make it easy to configure. And so I recommend using some other approach. But if you want, you can check out the Dropthings web portal source. It uses asp.net ajax, but it is very customized. And it works in FF, Chrome, Opera. Here is a demo .

Answer 5

Have you tested jQuery drag and drop support? It works in all browsers that support drag and drop operations, and is pretty easy to implement.

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

Answer 6

It looks like an answer: http://weblogs.asp.net/uruit/archive/2009/08/19/extending-asp-net-webparts-cross-browser-drag-and-drop-functionality-using-jquery.aspx