将 left 和 top 值从像素更改为百分比后，元素的位置发生变化

Question

我正在使用 jQuery Droppable 并希望以百分比值的形式保存坐标。所以我编写了将像素值转换为百分比的代码。

但是我标记了它在 (0,0) 位置的百分比值是完美的但是当我将元素移动到 Downward 的父元素百分比值 TOP 减少和 Left 百分比值增加。所以在左下角的元素有大约 12% 的左边百分比增加和 8% 的顶部百分比减少。

更新：拖放后我得到的百分比值，当我将该百分比值添加到元素样式时，它会将元素向上和向右移动。这意味着顶部百分比值减少而左侧百分比值增加。

我找不到百分比值变化而计算保持不变的原因。这是代码，

jQuery("#editor").droppable({
    drop: function( event, ui ) {

        var pos = ui.draggable.offset();
        var dPos = $(this).offset();

        // Pixxel value of positions
        var elementTopPosition = pos.top - dPos.top;
        var elementLeftPosition = pos.left - dPos.left;

        // Getting parent element height and width
        var parentWidth = jQuery("#editor").width();
        var ParentHeight = jQuery("#editor").height();

        // Coverting to percentage
        var topInPercentage = ( 100 * elementTopPosition ) / ParentHeight;
        var leftInPercentage = ( 100 * elementLeftPosition ) / parentWidth;

    }
});

当我用百分比值保存元素位置时： http://www.awesomescreenshot.com/image/436490/b1b1c6c910b0f68a4199c8f67684ac56

当我用保存的百分比值输出那个元素位置时： http://www.awesomescreenshot.com/image/436526/12d4b0778240646285c6fdd10e61bd2f

实例 (fiddle if you prefer):

$("#draggable").draggable();

jQuery("#droppable").droppable({
    drop: function (event, ui) {

        debugger;

        var pos = ui.draggable.offset();
        var dPos = $(this).offset();

        // Pixxel value of positions
        var elementTopPosition = pos.top - dPos.top;
        var elementLeftPosition = pos.left - dPos.left;

        // Getting parent element height and width
        var parentWidth = jQuery("#droppable").width();
        var ParentHeight = jQuery("#droppable").height();

        // Coverting to percentage
        var topInPercentage = (100 * elementTopPosition) / ParentHeight;
        var leftInPercentage = (100 * elementLeftPosition) / parentWidth;
        
        $("#draggable").css({top: topInPercentage + '%', left: leftInPercentage + '%'});

    }
});

#draggable {
    width: 100px;
    padding: 2px 5px;
    cursor: pointer;
    color: #fff;
    position: absolute;
}
#droppable {
    position: relative;
    width: 200px;
    height: 200px;
    background: #999;
    color: #fff;
    padding: 10px;
}

<div id="droppable">
    <div id="draggable">Element</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>

因此，尝试在其父元素之间移动元素，在每次移动中我都捕获左上角的像素值并将其转换为百分比，然后将该百分比值增益应用到该元素。但与原position值不同

Answer 1

你想要 outerWidth/outerHeight 而不是 width/height:

$("#draggable").draggable();

jQuery("#droppable").droppable({
    drop: function (event, ui) {

        debugger;

        var pos = ui.draggable.offset();
        var dPos = $(this).offset();

        // Pixxel value of positions
        var elementTopPosition = pos.top - dPos.top;
        var elementLeftPosition = pos.left - dPos.left;

        // Getting parent element height and width
        var parentWidth = jQuery("#droppable").outerWidth();   // <=== Here
        var ParentHeight = jQuery("#droppable").outerHeight(); // <===

        // Coverting to percentage
        var topInPercentage = (100 * elementTopPosition) / ParentHeight;
        var leftInPercentage = (100 * elementLeftPosition) / parentWidth;
        
        $("#draggable").css({top: topInPercentage + '%', left: leftInPercentage + '%'});

    }
});

#draggable {
    width: 100px;
    padding: 2px 5px;
    cursor: pointer;
    color: #fff;
    position: absolute;
}
#droppable {
    position: relative;
    width: 200px;
    height: 200px;
    background: #999;
    color: #fff;
    padding: 10px;
}

<div id="droppable">
    <div id="draggable">Element</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>

将 left 和 top 值从像素更改为百分比后，元素的位置发生变化

Position of element changes after changing left and top value from pixel to percentage

jquery

html

jquery-ui-droppable