Làm cách nào để định vị một div ở đầu div khác với javascript?

Question

Div đầu tiên là thanh '#icon-selection-menu', vị trí nhàn rỗi của nó là tuyệt đối với top:0px và left:0px. Vì vậy, nó xuất hiện ở góc trên cùng bên trái bên trong div nội dung.

Sâu trong nội dung div trẻ em tôi nhận được divs khác mà thực sự là loại '.emoticon-nút'. Vị trí của họ là tương đối bên trong cha mẹ của họ. Trên nút bấm như vậy tôi muốn vị trí div đầu tiên ngay trên nút, điều chỉnh đường viền dưới cùng của nó đến đường viền trên cùng của nút.

Làm thế nào tôi có thể nhận được đầu và trái giá trị để thiết lập $('#icon-selection-menu').top và $('#icon-selection-menu').left?

Answer 1

jQuery cung cấp .offset() để nhận vị trí của bất kỳ phần tử nào liên quan đến tài liệu. Kể từ #icon-selection-menu đã được vị trí tương đối so với tài liệu, bạn có thể sử dụng này:

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

$('#icon-selection-menu') sẽ được đặt ở góc trên cùng bên trái của $('.emoticon-button').

_{(1) jQuery giả định do sử dụng $ trong câu hỏi.}

Answer 2

bạn có thể có được vị trí của nguyên tố này bằng jquery dưới

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

và bấm vào nút bạn có thể đặt nó ở trên bằng cách sử dụng

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

Answer 3

Nhận' .emoticon nút 'vị trí (bên trái, trên cùng). Sau đó áp dụng tương tự cho '# icon-selection-menu'. Sẽ có một số điều chỉnh ở trên và bên trái để căn chỉnh với biểu tượng cảm xúc.

Answer 4

Bạn có thể có được vị trí hàng đầu và trái của một div sử dụng offsetTop và offsetLeft

Ví dụ: `

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

Answer 5

javascript đã tích hợp sẵn trong phiên bản của những gì @bfavaretto đề cập. Nó dài hơn một chút so với phiên bản Jquery, nhưng những người như tôi không sử dụng Jquery có thể cần nó.

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"; 

Bạn có thể, tất nhiên, thêm đơn vị vào hệ thống này như px hoặc các thứ khác. Chỉ cần lưu ý rằng những gì tôi đã làm ở trên chỉ là một ví dụ và là cho hai yếu tố riêng biệt với ID, không phải lớp học. Hai dòng đầu tiên của mã sẽ thay đổi theo mã của bạn. Phần tử iconselect là những gì tôi đang cố gắng căn chỉnh và phần tử emoticonbtn là nút bạn nhấn để thực hiện iconselect xuất hiện. Các phần quan trọng nhất của mã được tóm tắt:

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

Hy vọng điều này sẽ giúp những người không muốn sử dụng JQUERY!