Drag and Drop Web parts not working in SharePoint 2010 with a Custom Master Page

When I was recently creating a custom Master Page, I wanted to use CSS3 styles. Since IE 8 does not play overly well with CSS3 I built some shims to let the site degrade gracefully but I wanted the new styles to work as planned in IE 9. Easy enough right? The first thing you have to do is remove the following line from the section in your custom Master Page.

1
<meta http-equiv="X-UA-Compatible" content="IE=8"/>

Everything worked fine until I went into edit mode and attempted to drag and drop web parts from one web part zone to another. No luck, IE 9 kept throwing JavaScript errors, in particular

SCRIPT5007: Unable to get value of the property ‘style’: object is null or undefined
ie55up.js?rev=aLkCI%2BqMbk0%2BXpjAY7eBcA%3D%3D, line 2 character 37142

After a quick Google search I ran across the following two articles.

Drag and drop webpart manager not saving changes
http://www.spdev.info/2012/04/drag-and-drop-webpart-manager-not.html

Corners in IE and Firefox for SharePoint Master Pages
http://www.tonyishere.co.uk/?p=169

Obviously there are known issues that SharePoint 2010 is not fully compatible with IE 9, and this is just another example. But you know the coder in me wanted to know why this wasn’t working and if it could be quickly fixed. Running a few quick traces I found that the primary functions used to allow web parts to be moved are found in ie55up.js with a few helper functions in core.js. These are found in the 14 hive under 14TEMPLATELAYOUTS1033 in case you wish to check them out yourself.

First step was to attempt to fix the null variable issue from the first error. I did this using a combination of jQuery or updated JavaScript code. Rather trivial and not important for as soon as I fixed this error another cropped up. Ok, time to take stock before jumping down a rabbit hole. Time to bust open ie55up.debug.js. Well it ends up that there are quite a few functions required by SharePoint to handle web part drag and drop. This would require a major rewrite that I have to say I was not up to, and quite honestly I would not recommend.

In case you would like to give this a try, you will want to review and likely update the following functions.

In Ie55up.js

1
2
3
4
5
6
7
8
9
10
11
function MSOLayout_MoveWebPartStart
function MSOLayout_MoveWebPartDragZoneEnter
function MSOLayout_MoveWebPartDragEnter
function MSOLayout_MoveWebPartDragOver
function MSOLayout_MoveWebPartBodyDragOver
function MSOLayout_MoveWebPartStopEventBubble
function MSOLayout_MoveWebPart
function MSOLayout_UpdatePartOrderAfterMove
function MSOLayout_CreateIBar
function MSOLayout_MoveIBar
function MSOLayout_UpdateZoneDropDown

In core.js

1
2
3
function contains
function getFirstElementById
function MSOLayout_GetParentTable

If you decide to update the functions found in core.js you will have to be careful that other processes that may use these functions do not stop working too. Not that this needs to be said, but never overwrite hive files, always override SharePoint JavaScript functions, if you are so brave, by adding your own function versions after core.js or ie55up.js loads in your own js files.

Suggested Work Arounds

My first suggestion, and what worked for us, is that we ignored the fact web part drag and drop did not work. First, it only works in IE anyhow. Second, you can always Close a web part, then add the closed web part from the Closed Web Parts Category to the correct web part zone. If you need to reorder web parts in a web part zone you can use this same technique. Sure, it’s not ideal, but beats trying to fix core SharePoint functionality for modern browsers.

Use IE Developer Tool Bar

A simple work around when you are editing your site would be to use the IE Developer Tool bar to set your Document Mode to Internet Explorer 8 Standards.


Attempting to drag and drop a web part from one web part zone to another in IE 9 mode. The new web part zone does not acknowledge the new web part and a JavaScript error is thrown.


Set the Document mode to Internet Explorer 8 Standards. Then moved the web part and the new web part zone acknowledges the web part and no errors are thrown.


Dropped Web part into new Web Part Zone. Was successfully accepted.

It’s an interesting hack, but it works.

Have you found another solution? Did you override the web part drag and drop functionality successfully? If so please tell me as I would like to help you share it with the community.

Comments

  1. I can’t help but wonder if there is a way to change that metatag it IE8 while in edit mode.

    • Hi Shane,

      That is a really good question and suggestion. I am not sure how well that will work, but I can see a few different things to try.

      If you are using a publishing page then you could update the page layout to include the following. This also assumes that you are using jQuery.

      1
      2
      3
      4
      5
      6
      7
      <asp:Content ContentPlaceholderID="PlaceHolderAdditionalPageHead" runat="server">
           <PublishingWebControls:EditModePanel runat="server" id="editmodestyles">
                <script type="text/javascript">
                     jQuery('meta[http-equiv="X-UA-Compatible"]').attr('content', 'IE=8');
                </script>
           </PublishingWebControls:EditModePanel>
      </asp:Content>

      The idea being that if you are in edit more, modify the X-UA-Compatible meta tag.

      You could probably do something similar and move the meta tag in the master page to the PlaceHolderAdditionalPageHead Content Placeholder but I am not sure what will happen when you move that tag so far down into the head.

      If you are using a foundation based site page then you will probably have to use jQuery to check to see if any tag is in edit mode and if it is, add the jQuery code above.

      My initial tests show that this jQuery should work, it’s just a matter of how you wantt to load it.

      I hope this helps.

      • Hi Eric,

        Some great stuff you guys are doing with bootstrap. I have ported the skeleton framework in the past but had to rely on a lot of shims and JS/media queries workarounds to get past this issue, the people picker and other similar JS issues.

        Nifty suggestion here!

        Keep up the good work, it’s invaluable to the greater community!

        ~Shane

Speak Your Mind

*


− 1 = eight