जावास्क्रिप्ट के साथ किसी अन्य div के शीर्ष पर div को कैसे स्थानांतरित करें?

Question

पहला div '#icon-selection-menu' बार है, यह पूर्णtop:0px और left:0px के साथ निष्क्रिय स्थिति है। तो यह सामग्री div के अंदर शीर्ष बाएं कोने में दिखाई देता है।

सामग्री div बच्चों में गहरी मुझे अन्य divs मिलते हैं जो वास्तव में '.emoticon-button' प्रकार के होते हैं। उनकी स्थिति उनके माता-पिता के अंदर सापेक्ष है। इस तरह के बटन पर क्लिक करें, मैं बटन के ऊपर पहले div को स्थिति में रखना चाहता हूं, बटन की शीर्ष सीमा पर इसकी निचली सीमा को समायोजित करना चाहता हूं।

मैं शीर्ष कैसे प्राप्त कर सकते हैं और मूल्यों छोड़ दिया $('#icon-selection-menu').top और $('#icon-selection-menu').left स्थापित करने के लिए?

Answer 1

jQuery दस्तावेज़ से संबंधित किसी भी तत्व की स्थिति प्राप्त करने के लिए .offset() प्रदान करता है। चूंकि #icon-selection-menu पहले से ही दस्तावेज़ को किस स्थिति में है, तो आप इस का उपयोग कर सकते हैं:

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

$('#icon-selection-menu')$('.emoticon-button') के ऊपरी-बाएं कोने में रखा जाएगा।

_{(1) jQuery प्रश्न में $ के उपयोग के कारण माना गया।}

Answer 2

आप नीचे दिए गए jQuery का उपयोग करके तत्व की स्थिति को प्राप्त कर सकते हैं

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

और उस बटन को क्लिक पर आप '.emoticon-बटन का उपयोग कर

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

Answer 3

प्राप्त करें द्वारा यह ऊपर स्थित कर सकते हैं 'स्थिति (बाएं, ऊपर)। फिर इसे '# आइकन-चयन-मेनू' पर लागू करें। इमोटिकॉन के साथ संरेखित करने के लिए ऊपर और बाएं कुछ समायोजन होगा।

Answer 4

आप एक div offsetTop और offsetLeft का उपयोग कर के शीर्ष और बाएं स्थिति प्राप्त कर सकते हैं

उदाहरण: `

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

Answer 5

जावास्क्रिप्ट एक अंतर्निहित में क्या उल्लेख किया @bfavaretto का संस्करण। यह jquery संस्करण से थोड़ा लंबा है, लेकिन मेरे जैसे लोग जो jquery का उपयोग नहीं करते हैं, उन्हें इसकी आवश्यकता हो सकती है।

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

आप निश्चित रूप से इस प्रणाली में पीएक्स या अन्य चीजों जैसे इकाइयों को जोड़ सकते हैं। बस ध्यान दें कि मैंने जो किया वह सिर्फ एक उदाहरण था और आईडी के साथ दो अलग-अलग तत्वों के लिए है, कक्षाओं में नहीं। कोड की पहली दो पंक्तियां आपके कोड के अनुसार अलग-अलग होंगी। तत्व iconselect वह है जिसे मैं संरेखित करने का प्रयास कर रहा हूं, और तत्व emoticonbtn वह बटन है जिसे आप iconselect प्रकट करने के लिए दबाते हैं। कोड के सबसे महत्वपूर्ण भागों में संक्षेप:

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

आशा इस लोग हैं, जो jQuery का उपयोग करने के लिए तैयार नहीं हैं मदद करता है!