Div的定位

Question

我的工作有一个问题，请看一看

这是我的小提琴演示

我有一个名为Dekey的Draggable Div，初始时，我将top和Left.设置为固定值Left. 。 最初，您可以看到Draggable div接触了Mountain的窥视。 当我单击下方的创建按钮时，图像将被缩放并且可拖动div的位置发生变化。 我不想从确切位置更改可拖动div。 我怎样才能做到这一点

代码 HTML

<div id="conainter" style="width: 500px; height: 300px; background: gray; position: relative; text-align: center;">

    <div style="width: auto; height: auto; background: blue;" id="divSpot">
        <img src="http://upload.wikimedia.org/wikipedia/commons/1/1a/Bachalpseeflowers.jpg" style="max-width: 400px; max-height: 400px;" id="image">
        <div id="draggable" class="ui-widget-content" style="background: rgba(255, 85, 85, 0.5); z-index: 1; cursor: move; position: absolute; top:83px; left:127px; ">
            <p>Dekey</p>
        </div>
    </div>

</div>




<a href="javascript:;" class="ui-button" id="create-spot-btn">create</a>

jQuery的

$(function() {
$( "#draggable" ).resizable({ containment: '#conainter>#divSpot'});
$( "#draggable" ).draggable({ containment: '#conainter>#divSpot'});


$('#image').load(function(){

    $("#create-spot-btn").click(function(){
        var scale = 1.2
        $('#divSpot').css('transform', 'scale(' + scale + ')');
        $('#divSpot').children('div').css('transform', 'scale(' + 1/scale + ')');

    });
});


});

CSS

#draggable { width: 50px; height: 50px; padding: 0.5em; }

Answer 1

删除下面的行。

$('#divSpot').children('div').css('transform', 'scale(' + 1/scale + ')');

这导致第二次拖动的div缩放。

当为id="divSpot"应用缩放时，它也会自动缩放内部元素，因此您无需再次为子元素提供缩放。

DEMO

Answer 2

我猜你将不得不做一些数学..

由于可拖动框的大小为59，大小乘数为.2（1.2-1）。 因此，缩放后盒子的总大小增加为59 * .2 = 11.8。 我们将采取其中的一半，因为双方都在增加。 为了定位，我们将从左侧增加的大小的一半平移可拖动框。 因此，我们将方框5.9单位重新定位到左上角。 请验证，我可能是错的。 检查这个小提琴

我添加了以下几行：

var pos = $('#draggable').offset();

   $('#draggable').offset({top: pos.top - 5.9, left: pos.left - 5.9});

谢谢