CODEWITHSUNDEEP
javascriptjqueryhtmlcssposition
Dinesh Kanivu
Dinesh Kanivu

Reputation: 2587

Positioning of Div

I have one issue in my work please have a look into it

Here is my Js fiddle Demo

I have a Draggable Div called Dekey, Initialy i set a fixed top and Left.. Initially you can see the Draggable div touching the Mountain's peek. When i click the create button below the image gets zoomed and the posotion of the draggable div changes. I dont want to change the draggable div from the exact position. How can i do that

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

Upvotes: 2

Views: 106

Answers (2)

Bhaskar Melkani
Bhaskar Melkani

Reputation: 331

I guess you will have to do some math..

Since size of draggable box is 59 and size multiplier is .2 (1.2-1). So total increase in size of box after scale is 59*.2 = 11.8. We will take half of it since increase is in both side. For positioning we will translate the draggable box from half the increase in size from left. So we will reposition the box 5.9 units towards upper left corner. Please verify it, I might be wrong. Check this fiddle

I have added these lines:-

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

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

Thanks

Upvotes: 1

Sowmya
Sowmya

Reputation: 26969

Remove below line. 

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

This is causing zoom for draggable div second time.

When you apply scaling for id="divSpot" it automatically scales the inner elements also so you need not to give scale again for child element.

DEMO

Upvotes: 2

Related Questions