title: Multiple SharePoint 2013 'Drag and Drop Uploader' placement is wrongly placed in responsive page layout
body: <p>I'm developing responsive design custom page layouts with the help of Office UI Fabric. This is part of a solution (WSP) that i'm developing for SharePoint in Office 365. </p>
  
  <p><strong>Question</strong>
  The issue is that when a library is added to a page with a responsive layout the drag n' drop uploader area is wrongly placed. It dosent follow the rules applied by Office UI Fabrics or Bootstrap. </p>
  
  <blockquote>
    <ul>
    <li><strong>Q:</strong> So how can the drag and drop uploader area be applied to the correct area ie. on-top of the document library within a responsive
    page-layout in SharePoint?</li>
    </ul>
  </blockquote>
  
  <p><strong>Solutions that partly solve the issue</strong></p>
  
  <blockquote>
    <ul>
    <li>There is a post at the <a href="https://sharepoint.stackexchange.com/questions/115596/sharepoint-2013-drag-and-drop-uploader-drop-here-box-placement/162054#162054">StackExchange SharePoint site</a> but it only partly solves the issue. Shortly described it proposes that a
    html-div element(snippet below) is applied underneath the #s4-workspace element in
    the DOM. Also described <a href="http://www.faqssys.info/sharepoint-2013-drag-and-drop-uploader-drop-here-box-placement/" rel="nofollow noreferrer">here</a>.
    <em>This fix works wonders if its only one library on a page that needs fixing</em></li>
    </ul>
  </blockquote>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code> &lt;div class="ms-dnd-dropbox" id="ms-dnd-dropbox" style="display:none;"&gt;
   &lt;span class="ms-attractMode ms-noWrap" id="ms-dnd-dropboxText" 
   style="line-height: 324px;"&gt;Drop here...&lt;/span&gt;
   &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <blockquote>
    <ul>
    <li>Adding of CSS properties. I noticed that it is very much possible to inherit the <code>left</code> attribute from the .ms-dnd-dropbox element in the
    DOM. This will place the dropbox area in the correctly horisontal
    alignment in relation to the dropbox area. However the top attribute
    which also needs fixing can't be applied by the same technique. Why?
    Not sure.</li>
    </ul>
  </blockquote>
  
  <p><strong>Places dropbox area in correct horisontal alignment:</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>    .parentDivClass &gt; .ms-dnd-dropbox{
          left: inherit !important;
          }</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>Places dropbox area in correct horisontal alignment with some decent-looking functionality</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.ms-dnd-dropbox{
    left: inherit !important;
    top: inherit !important;
    position: relative !important;
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>OR</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>    .ms-dnd-dropbox{
        left: inherit !important;
        top: inherit !important;
        position: absolute !important;
      }</code></pre>
  </div>
  </div>
  </p>
  
  <blockquote>
    <ul>
    <li>With the help of JavaScript it is possible to manipulate the dropbox areas. Code below. This however works fine except for the fact
    that the sharepoint dragdrop.js actually executes faster than this
    script. Even though both scripts uses the eventhandler <code>dragenter</code>.
    The result is that if a user quickly drags a document into the window
    the dropbox area, first will be placed wrongly and then, when the
    document is moved withing <code>window</code> the dropbox areas will be placed
    very much correctly. <em>The only issue here is the fact that the dropbox
    areas are placed badly since the sharepoint script executes, as I see
    it, before the <code>dragenter</code> event. There might be some fault in my
    thinking here but please explain why this happens if that is the
    case.</em></li>
    </ul>
  </blockquote>
  
  <p><em>This way also only works when the responsive layout is in "multiple column view", as soon as the columns drops underneath each other for smaller devices all libraries placed in the futhermost right colum will be placed around 1000px underneath the correct placement. However this might be acceptable since its hard to Imagne why the dragdrop functionality should be applied to a small device.</em></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var topCalculation = 0;
  var calculationsArray = [];
  var oldValuesArray = [];
  
  $(window).resize(function () {
      if (calculationsArray.length &gt; 0) {
          calculationsArray = [];
          var i = 0;
          $(".ms-dnd-dropbox").each(function(i){
           $(this).css("top", oldValuesArray[i]);
          });
      }
  });
  
  $(window).on("dragenter", function () {
      alert(calculationsArray.length);
      if (calculationsArray.length === 0) {
          $(".ms-dnd-dropbox").each(function (e) {
              topCalculation = $(this).position().top;
              oldValuesArray.push(topCalculation);
              topCalculation = (topCalculation - 120);
              calculationsArray.push(topCalculation);
              $(this).css("top", topCalculation);
          });
      } else {
          var i = 0;
          $(".ms-dnd-dropbox").each(function () {
              $(this).css("top", calculationsArray[i]);
              i++
          });
      }
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.ms-dnd-dropbox {
      position: absolute;
      height: 100px;
      width: 100px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="ms-dnd-dropbox" style="left: 101px; top: 150px; background-color: red;"&gt;&lt;/div&gt;
  &lt;div class="ms-dnd-dropbox" style="left: 202px; top: 250px; background-color: blue;"&gt;&lt;/div&gt;
  &lt;div class="ms-dnd-dropbox" style="left: 203px; top: 450px; background-color: green;"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>