Question

尝试使用angular-dragdrop，但创建的可放置区域与div的大小不同（它既高又宽），并且直接位于应该位于的下方。我感觉它错误地计算了偏移量，但我不确定如何修复它，也不确定如何解决它。

这是指令（原谅糟糕的格式化和可能不好的做法）：

mainApp.directive("mppDroppableLogo", function () {
return {
    restrict: 'E',
    replace: false,
    transclude: true,
    templateUrl: 'src/slides/editing/mppDroppableLogo.tpl.html',
    controller: 'mppDroppableLogoController',
    scope: {
        imageUrlChanged: '&'
    },
    compile: function compile(element, attributes) {
        return {
            pre: function preLink(scope, element, attributes, controller) { },
            post: function postLink(scope, element, attributes, controller) {
                var sitecoreImage = element.find('img');
                var imageWrapper = element.find(".mpp-droppable-logo");

                if (!angular.isDefined(imageWrapper)) {
                    console.log("mppDroppable:pgp directive is missing.");
                }

                if (angular.isDefined(sitecoreImage)) {

                    var styling = sitecoreImage.attr('style');
                    if (angular.isDefined(styling)) {
                        imageWrapper.attr("style", styling);

                    }

                    $scope.originalImageUrl = sitecoreImage.attr("src");
                    var cssUrl = "url(\'" + sitecoreImage.attr("src") + "\')";
                    imageWrapper.css("background-image", cssUrl);

                }

                imageWrapper.css("background-size", "contain");
                imageWrapper.css("background-repeat", "no-repeat");
            }
        };
    }
};
})

及其部分HTML：

<div data-drop="true" 
data-jqyoui-options="{
    hoverClass: 'valid-item-being-dragged',
    tolerance: 'touch'
}"
jqyoui-droppable="{
    onDrop: 'changeUrl(event, ui)'
}" 
class="mpp-droppable-logo"
ng-click="toggleSidebar()">

<!-- Hidden original image generated by Sitecore -->
<div ng-transclude ng-hide="true"></div>
</div>

这用于在XSLT中包装sitecore图像标记：

  <div style="top: 26vw; left: 6vw;">
    <mpp-droppable-logo image-url-changed="settings.imageUrlChanged" field-name="Logo">
      <sc:image field="Logo" style="width: 16vw; height: 5.5vw;" />
    </mpp-droppable-logo>
  </div>

所以会发生这样的情况：指令被编译，隐藏sitecore图像标记，然后填充包装它的div（后编译中的imageWrapper，部分HTML中定义的div，data-drop = true）和样式模仿图像标签。我已经在下面附上了一张图片，其中包含了糟糕的MS Paint技能以掩盖专有资料。黄色边界div表示可放置区域应该在哪里，并且仅在有效可拖动资产进入可放置区域时显示。黑色正方形是我正在拖动的图像 - 正如您所看到的，我们已经超出了可投放区域的范围。蓝色矩形表示实际可投放区域的大致边界。

http://gyazo.com/948852b8c96d3c6f3eeccec5ba2e11d9

如果有任何用处：

删除＆＃34; top＆＃34;和＆＃34;左＆＃34;外包装的样式会将图像向上移动（显然），但是可放置区域现在也会与div重叠，因此您可以将图像直接拖到它上面，但您也可以将图像拖到它下方，适当的事件将会解雇。
在转移样式后删除隐藏的sitecore图像标记并不会更改可放置区域的大小或位置
div上的Jquery offset（）给出：top = 449，left = 367。 div上的Jquery position（）给出top = 0，left = 0。

任何人都对这个问题有什么想法？

Angular-dragdrop或jQueryUI计算可丢弃区域的偏移量不正确

0 个答案: