1

我正在 Office UI Fabric 的帮助下开发响应式设计自定义页面布局。这是我正在为 Office 365 中的 SharePoint 开发的解决方案 (WSP) 的一部分。

问题 问题是当一个库被添加到一个具有响应式布局的页面时，拖放上传器区域被错误地放置。它不遵循 Office UI Fabrics 或 Bootstrap 应用的规则。

  • 问：那么如何将拖放上传器区域应用到正确的区域，即。在 SharePoint 的响应式页面布局内的文档库顶部？

部分解决问题的解决方案

  • StackExchange SharePoint 网站上有一篇文章，但它只能部分解决问题。简短描述它建议在 DOM 中的 #s4-workspace 元素下方应用 html-div 元素（下面的片段）。这里也有描述。 如果页面上只有一个库需要修复，此修复程序会产生奇迹

 <div class="ms-dnd-dropbox" id="ms-dnd-dropbox" style="display:none;">
 <span class="ms-attractMode ms-noWrap" id="ms-dnd-dropboxText" 
 style="line-height: 324px;">Drop here...</span>
 </div>

  • 添加 CSS 属性。我注意到很有可能left从 DOM 中的 .ms-dnd-dropbox 元素继承属性。这会将保管箱区域相对于保管箱区域正确水平对齐。然而，同样需要修复的 top 属性不能通过相同的技术应用。为什么？没有把握。

以正确的水平对齐放置 Dropbox 区域：

    .parentDivClass > .ms-dnd-dropbox{
        left: inherit !important;
        }

将保管箱区域放置在正确的水平对齐中，并具有一些外观不错的功能

.ms-dnd-dropbox{
  left: inherit !important;
  top: inherit !important;
  position: relative !important;
}

或者

    .ms-dnd-dropbox{
      left: inherit !important;
      top: inherit !important;
      position: absolute !important;
    }

  • 在 JavaScript 的帮助下，可以操作保管箱区域。代码如下。然而，这很好用，除了 sharepoint dragdrop.js 实际上比这个脚本执行得更快。即使两个脚本都使用 eventhandler dragenter。结果是，如果用户快速将文档拖到窗口中的 Dropbox 区域，首先会被错误地放置，然后，当文档window随着 Dropbox 区域移动时，会非常正确地放置。这里唯一的问题是，由于 sharepoint 脚本在我看到的dragenter事件之前执行，所以保管箱区域放置得不好。我的想法可能有一些错误，但如果是这种情况，请解释为什么会发生这种情况。

这种方式也仅在响应式布局处于“多列视图”时才有效，一旦对于较小的设备，列彼此下方下降，放置在最右边列中的所有库将被放置在正确位置下方约 1000 像素处。然而，这可能是可以接受的，因为很难想象为什么要将拖放功能应用于小型设备。

var topCalculation = 0;
var calculationsArray = [];
var oldValuesArray = [];

$(window).resize(function () {
    if (calculationsArray.length > 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++
        });
    }
});
.ms-dnd-dropbox {
    position: absolute;
    height: 100px;
    width: 100px;
}
<div class="ms-dnd-dropbox" style="left: 101px; top: 150px; background-color: red;"></div>
<div class="ms-dnd-dropbox" style="left: 202px; top: 250px; background-color: blue;"></div>
<div class="ms-dnd-dropbox" style="left: 203px; top: 450px; background-color: green;"></div>

4

0 回答 0