Question

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

但我标记了它的in（0,0）位置百分比值变得完美但是当我将元素移动到TOP元素百分比值的下降和Left Increase的百分比值时。因此，左下角元素左侧百分比增加约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>

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

Answer 1

您需要outerWidth / outerHeight而不是width / height：

＆＃13;

$("#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 + '%'});

    }
});

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

将left和top值从像素更改为百分比

1 个答案: