ASP.NET Web 部件：非 IE 浏览器中的拖放支持答案

【问题标题】：ASP.NET Web Parts: Drag and Drop Support in Non-IE BrowsersASP.NET Web 部件：非 IE 浏览器中的拖放支持
【发布时间】：2011-01-14 13:51:00
【问题描述】：

自从 ASP.NET 2.0 出现以来，我一直在我的网站上使用 Web 部件。拖放 Web 部件在 Internet Explorer 中效果很好，但在 Firefox、Chrome 或 Safari 中根本不起作用。我最近将网站升级到 ASP.NET 3.5 SP1，但我仍然无法在非 IE 浏览器中拖放 Web 部件。

如何在这些其他浏览器中启用拖放 Web 部件？

更新（2010 年 2 月 9 日）：

这提到了这个问题，但没有提供解决方案：http://forums.asp.net/t/1294857.aspx

更新（2010 年 2 月 19 日）：

这些帖子提供了一个可能的解决方案，但我还无法在我的网站上使用它：

简而言之，这些说拖放问题在“ASP.NET Futures（2007 年 7 月发布）”中得到了解决，但由于某些疯狂的原因，它被排除在 ASP.NET 3.5 SP1 之外。因此，要解决此问题，您必须在以下位置下载 Futures 版本： http://www.microsoft.com/downloads/details.aspx?FamilyId=A5189BCB-EF81-4C12-9733-E294D13A58E6&displaylang=en

然后，您需要使用 Microsoft.Web.Preview.UI.Controls.WebParts 命名空间中的 WebPartManager 和 WebPartZone。

【问题讨论】：

您有生成的代码示例吗？拖放适用于所有浏览器...只要生成的代码不仅仅是 IE。
如何使生成的代码不是“仅限 IE”？

标签： asp.net cross-browser web-parts

【解决方案1】：

您必须使用非常旧版本的“Atlas”，因为they fixed this quite a while ago (after beta 1)。

【讨论】：

我们使用的是最新版本的 ASP.NET 和 ASP.NET AJAX (3.5 SP1)。
那么问题出在您项目特定的样式表或 javascript 文件上，因为拖放在 Firefox 上运行良好。这将很难确定。您应该尝试使用几个非常简单的 Web 部件创建一个准系统项目，并查看拖动是否适用于 Firefox。在我的机器上工作！
好吧，我奖励了你，因为你的回答似乎是最有可能的解决方案。此页面上的解决方案尚未奏效，但至少您尝试直接解决问题。
@Kevin 您是否尝试创建一个只有几个可拖动 Web 部件的空项目？这就是我所做的，它在 Firefox 中运行良好。有时“父级”CSS 规则会调整诸如position 之类的内容，并可能对网站的其他部分造成严重破坏。这些情况很难调试，您希望在开始修复之前确保这是确切的问题。创建一个虚拟项目是一种方法。
1st，此答案中的链接无效。第二，我创建了一个非常简单的虚拟项目（没有任何额外的 css），它根本无法在 Firefox 或 Chrome 上运行。我正在使用 ASP.NET 4.0，我正在关注这个例子：windowsdevcenter.com/pub/a/windows/2006/01/10/…

【解决方案2】：

这可能看起来像一个愚蠢的问题，但是，如果您将以下 HTML 代码添加到您的页面：

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

红色盒子是绿色盒子的两倍吗？

如果不是，则说明您的 DOCTYPE 不正确，导致浏览器以 Quirks 模式呈现页面，基本上结束了您对它在浏览器中工作的任何希望。

如果框的大小正确，当您尝试在 Firefox 中拖放时，是否会在 Firebug 控制台中收到任何错误消息？

作为与其他答案相关的最后两个 cmets：

如果可以，我还建议您避免使用 asp.net ajax 并改用 jQuery。您会在网络上找到更多信息，而且 IMO 的文档记录要好得多。
检查项目中的引用以确认您确实使用的是最新版本的 ASP.Net Ajax。即使您的计算机安装了最新版本的 ASP.Net，您的项目也可能会引用包含在您的 bin 目录中的旧 dll（我曾经遇到过这种情况，所以我应该知道！）

【讨论】：

我看到您实际上还没有找到解决方案，您是否验证了项目使用的 AjaxToolkit dll 的版本？您是否尝试使用 Firebug 来查看是否有任何 javascript 错误？（Josh 创建一个空白项目的想法也很不错）。不管赏金是否过期，很高兴知道您找到了解决方案！

【解决方案3】：

我不知道您的应用程序状态如何，但我强烈建议使用 Google IG 页面 Web 部件样式之类的东西。这是一个轻量级的控件，适用于所有可用的浏览器！

您可以在以下位置找到有关如何创建 google ig 样式页面的完整说明：

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

请注意，这是一个开源 Greasemonkey 脚本。

您也可以在 codeproject 找到类似的项目

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

希望有帮助

【讨论】：

【解决方案4】：

在我看来，asp.net ajax 不是完成这项工作的正确工具。它太丑了，太重了。我已经使用 ExtJs (click here for a sample) 实现了类似的任务。 ExtJs 是一个非常强大的 RIA js 库。实现起来非常简单快捷，而且没有任何痛苦 - 库的代码几乎是完美的，文档真的很棒。
您也可以尝试使用 JQuery (webparts with JQuery) 和 JQuery UI 来实现您的 Web 部件。但与 ExtJs 相比，它会困难得多。

（2010 年 2 月 17 日）
我强烈建议不要将 asp.net ajax 用于此任务。调试非常困难。 IMO 库的 JS 代码很丑陋，并且有很多陷阱，并且不允许轻松定制。这就是为什么我建议使用一些不同的方法。但如果您愿意，您可以查看Dropthings 门户网站的来源。它使用 asp.net ajax，但它是高度定制的。它适用于 FF、Chrome、Opera。 Here is the demo.

【讨论】：

这仅解释了单个 Web 部件功能的实现，与我遇到的特定错误无关：无法在非 IE 浏览器中拖放。
@Kevin：我的建议是尽可能避免使用 asp.net ajax，因为它很难调试。 IMO 库的 JS 代码很丑陋，并且有很多陷阱，并且不允许轻松定制。这就是为什么我建议使用一些不同的方法。
我的问题与 ASP.NET AJAX 无关。在我开始使用 ASP.NET AJAX 之前，拖放 Web 部件在 IE 中工作。
@Kevin，你确定吗？你真的知道WebParts的D&D是如何为IE实现的吗？在我看来，你没有。检查以下链接 geekswithblogs.net/dotNETvinz/archive/2009/06/01/… 和 geekswithblogs.net/dotNETvinz/archive/2008/09/12/… 。
根据你给我的第一个链接中的表格——geekswithblogs.net/dotNETvinz/archive/2009/06/01/…——我们用了很久的表格左上角的case，没有Ajax也没有UpdatePanel .拖放在 IE 中运行良好。我们后来才升级到 ASP.NET AJAX，同样的问题仍然存在。

【解决方案5】：

您是否检查过 JQuery 拖放支持？它适用于所有支持拖放操作的浏览器，并且很容易实现。

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

【讨论】：

幸运或不幸，这不是我们项目的选择。

【解决方案6】：

这似乎是答案：http://weblogs.asp.net/uruit/archive/2009/08/19/extending-asp-net-webparts-cross-browser-drag-and-drop-functionality-using-jquery.aspx

【讨论】：