Question

我将元素从一个容器拖到第二个容器（容器是独立的）。在拖动开始时，我将拖动的元素添加到正文中（这是必要的）。如果我将元素放到第二个容器中，我得到相对于主体的元素坐标而不是第二个容器，所以我的元素出现在第二个容器的错误位置

我该如何处理？

Answer 1

您可能希望包含更多相关信息。可拖动元素可能位置：绝对吗？在这种情况下，请确保给它的容器位置：相对位置，以便它捕捉到它的父级。

Answer 2

Html看起来像这样：

<div id="designer">  
   <div class="ui-layout-center">
     <div id="workspace"></div>
   </div>

   <div class="ui-layout-north">
     content
   </div>

   <div class="ui-layout-west">
     <div class="elements">
        <div class="element"></div>
        <div class="element"></div>
     </div>
   </div>
</div>

CSS

#workspace {
   position:relative;
}
.work-element { /*class for dropped element*/
  position:absolute;
}

JS

$('.elements .element').draggable({
    helper: copyElementHelper
});

$("#workspace").droppable({
    accept: '.element',
    drop: onWorkspaceDrop
});

function copyElementHelper(event) {
    var $element = $('<div></div>');

    return $element.appendTo('body').css('zIndex', 5).show();
};

function onWorkspaceDrop(event, ui) {
    // logic for adding element to workspace
    // create element
    // add class work-element to created element
    // set positions for created element using ui param
    // here I have position relative to body
    // how to transform it to be position relative to workspace
};

更改元素容器而不更改元素位置

2 个答案: