0

I have 2 types of divs 

<div class="target_div" id="t1">  </div>
<div class="target_div" id="t2">  </div>
<div class="target_div" id="t3">  </div>
<div class="target_div" id="t4">  </div>


<div class="child_div" id="c1">  </div>
<div class="child_div" id="c2">  </div>
<div class="child_div" id="c3">  </div>
<div class="child_div" id="c4">  </div>

Using Jquery , say I want to position c1 over t1 , so that their top left corners match always , how do I go about doing this ? I want c1 to stick to t1 no matter what ... page resizing , scrolling.. in all cases .

I am creating a card game , and I want to drag drop and place the cards from the footer and place in the divs numbered 1-13 . Hence the question.

In the picture , t1,t2... etc are the divs with numbers 1-13 . c1,c2 etc are the cards lying on the footer.

geeky_monster
  • 8,672
  • 18
  • 55
  • 86
  • 1
    on drag drop, make the c1 child of t1... make t1 position:relative and c1 position:absolute with top:0 and left:0 – gp. Sep 01 '13 at 02:08

2 Answers2

0

Just set your card to position absolute with CSS and then use this script :

var offset = $('#t1').offset() //example
$('#c1').css({
    'top' : offset.top,
    'left' : offset.left
})
Karl-André Gagnon
  • 33,662
  • 5
  • 50
  • 75
0

add position:relative; to the target_div class.

when you'r droping a child_div in target_div, move the child_div element to be a direct child of target_div (DOM manipulation is very easy using JavaScript & JQuery like this), then add position:absolute; top:0; left:0; to the specific child_div being moved.

Community
  • 1
  • 1
avrahamcool
  • 13,888
  • 5
  • 47
  • 58