Jak pozycjonować div na początku innego elementu div za pomocą javascript?

Question

Pierwszy element div to pasek '#icon-selection-menu', jego pozycja bezczynna to bezwzględna z top:0px i left:0px. Pojawia się więc w lewym górnym rogu wewnątrz div zawartości.

Głęboko w treści div dzieci dostałem inne divy, które są rzeczywiście rodzaju ".emoticon-button". Ich pozycja jest względna wewnątrz rodzica. Na takim przycisku kliknij Chciałbym ustawić pierwszy div tuż nad przyciskiem, dostosowując jego dolną granicę do górnej krawędzi przycisku.

Jak mogę uzyskać top i lewo wartości ustawić $('#icon-selection-menu').top i $('#icon-selection-menu').left?

Answer 1

jQuery zapewnia .offset(), aby uzyskać pozycję dowolnego elementu względem dokumentu. Od #icon-selection-menu jest już umieszczona w stosunku do dokumentu, można użyć to:

var destination = $('.emoticon-button').offset(); 
$('#icon-selection-menu').css({top: destination.top, left: destination.left}); 

$('#icon-selection-menu') zostanie umieszczony w lewym górnym rogu $('.emoticon-button').

_{(1) jQuery przyjęto z powodu użycia w pytaniu $.}

Answer 2

można uzyskać pozycję elementu za pomocą poniższego jQuery

var position=$('#icon-selection-menu').position(); 
var left=position.left; 
var right=position.right 

i kliknięcie tego przycisku można ustawić go powyżej używając

$("#ID").live("click",function(){ 
    $('.emoticon-button').animate({left:left,right:right}); 
}); 

Answer 3

get”.emoticon przycisku "pozycja (lewa, góra). Następnie zastosuj to samo do "# ikony-menu wyboru-opcji". Nastąpiłaby korekta na górze i na lewo, aby dopasować się do emotikonów.

Answer 4

Można uzyskać górnej i lewej pozycji div przy użyciu offsetTop i offsetLeft

Przykład: `

$('#div-id').offset().top; 
$('#div-id').offset().left; 

Answer 5

JavaScript posiada wbudowany w wersji co @bfavaretto wymienione. Jest nieco dłuższy niż wersja Jquery, ale ludzie tacy jak ja, którzy nie używają Jquery, mogą go potrzebować.

var iconselect = document.getElementById("icon-selection-menu"); 
var emoticonbtn = document.getElementById("emoticon-button"); 
var oTop = emoticonbtn.offsetTop; 
var oLeft = emoticonbtn.offsetLeft; 
iconselect.style.top = oTop; 
iconselect.style.left = oLeft; 
iconselect.style.position = "absolute"; 

Można oczywiście dodać jednostki do tego systemu, takie jak px lub inne rzeczy. Zauważ, że to, co zrobiłem powyżej, było tylko przykładem i dotyczy dwóch oddzielnych elementów z identyfikatorami, a nie klasami. Pierwsze dwa wiersze kodu będą się różnić w zależności od kodu. Element iconselect jest tym, co próbuję wyrównać, a element emoticonbtn to przycisk, który naciskasz, aby wyświetlić iconselect. Najważniejszymi częściami kodu podsumować:

elementtomove.offsetTop; //distance from top of screen 
elementtomove.offsetLeft; //distance from left of screen 

Nadzieja to pomaga ludziom, którzy nie chcą korzystać z jQuery!