Question

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

这是我的Js小提琴Demo

我有一个名为 Dekey 的可拖动Div，最初我设置了固定的top和Left.。最初你可以看到Draggable div触及Mountain's peek。当我单击下方的创建按钮时，图像会变焦并且可拖动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单位。请验证一下，我可能错了。 Check this fiddle

我添加了以下这些行： -

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

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

谢谢

Div的定位

2 个答案: