JQuery

2016-04-01 9 views
0

ile başka bir merkeze bir div yerleştirin HTML/CSS/JS hakkında daha fazla bilgi edinmek için kişisel bir projem var.
Ama bununla ilgili bir sorunum var.JQuery

<body>'umda, her biri 2 dairesel eşmerkezli div ile iki divum var. Biri, bölgenin ortasına yerleştirilir, diğeri değil.

<div id="sphaea_bloc"> 
    <div id="actor" class="actor_locked"> 
     <div class="actor_extern_locked"> </div> 
     <div class="actor_intern_locked"> </div> 
     </div> 

     <div id="lock" class="lock_locked"> 
     <div class="lock_extern_locked"> </div>  
     <div class="lock_intern_locked"> </div> 
     </div>  
</div> 

Taban yerleşimi iyi.

İkinci adım JQuery ile drag'n'drop eklemek ve iyi çalışıyor. Amaç küçük div'u büyük div'a bırakmak.
Başarısız olduğunda, doğru bir temel konumda geri döner.
Ama şimdi, damla iyi olduğunda, JQuery ile küçük divı büyük divun merkezine yerleştirmek istiyorum (4 dairenin eşmerkezli olması).

Uzun bir süre arandım ama sorun olmadan bunu başaramadım: 2 div'um arasında her zaman biraz sapma var ... Ve nedenini anlayamıyorum. FiddleJS link

Birisi bana sorunu bulmak için yardımcı olabilir ve neden benim küçük div büyük iç ama bir ofset ile her zaman: Burada

fiddlejs bağlantı nedir?

Şimdiden teşekkürler! Birlikte değiştirip bile AeldredOni

+0

zaman sizi –

+0

'display' attr 'inline-block'unu ayarlayın, bunun için birçok değerle denedim, ama yine de aynı sorun:/ – Aeldred

+0

küçük div için mutlak pozisyonu kullanabilir misiniz? –

cevap

1
ı aşağıda gibi yaptım gelmiş

ve çalışma, bu merkezli olacak div yüksekliği: Bir eleman ortalamak edemez

.actor_locked { 
    position:absolute; 
    left:-9999px; 
    right:-9999px; 
    top:-9999px; 
    bottom:-9999px; 
    display: block; 
    margin: auto; 
    width: 60px; 
    height: 60px; 
    border-radius: 50px; 
} 

http://jsfiddle.net/xga3dzfm/1/

+0

Teşekkürler, bu akşamı deneyeceğim, eğer çalışıyorsa gerçekten ihtiyacım olan şey bu! Bir sonraki adım için aynı, küçük div genişliğini ve yüksekliğini animasyonlu! Çok teşekkürler! – Aeldred

+0

i umarım size yardımcı olur :) –

+0

Sadece şu anda ^^ Bırakma kilidi ile kilitlendiğinde jquery komutu ekleyerek denedim: $ ('# aktör'). Css ({"position": " aboslute "," left ":" - 9999px "," right ":" - 9999px ", " top ":" - 9999px "," bottom ":" - 9999px "," display ":" block "}); Ama şimdi aktör normal pozisyona dönüyor, doğru düşüş tespit edilse bile ... – Aeldred