позиционирование Div

Question

У меня есть один вопрос в моей работе, пожалуйста, посмотрите в него

Вот мой Js скрипку Demo

У меня есть Draggable Div называется Dekey, Initialy я установить фиксированное top и Left.. Вначале вы можете видеть, как Divagable div прикасается к Маунту. Когда я нажимаю кнопку , создайте кнопку ниже изображения, которое будет увеличено, а положение перетаскиваемого 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 и размером множитель 0,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}); 

Благодарности