जावास्क्रिप्ट

Question

का उपयोग कर 2 डीओएम तत्वों के बीच सापेक्ष स्थिति प्राप्त करें मैंने ड्रैग करने योग्य तत्वों का एक सेट लागू किया है जिसे jQuery का उपयोग करके कुछ कंटेनर में छोड़ा जा सकता है। मुझे जो चाहिए वह एक एनीमेशन है जो किसी तत्व को उपयोगकर्ता इंटरैक्शन के बिना एक विशिष्ट कंटेनर में ले जाता है। समस्या यह है कि तत्व और ड्रॉप कंटेनर डीओएम के विभिन्न हिस्सों में हैं और ज्यादातर फ्लोट का उपयोग करके तैनात हैं।

मुझे केवल 2 कोड फ़्लोटिंग डीओएम तत्वों के बीच पूर्ण स्थिति अंतर प्राप्त करने के लिए कुछ कोड चाहिए, जो jQuery का उपयोग कर प्राथमिक रूप से उपयोग करते हैं। मुझे मिली एकमात्र चीज कुछ हैक्स ऊपर डीओएम को पार्स कर रही थी लेकिन हमेशा बहुत ब्राउज़र-विशिष्ट (उदाहरण के लिए "यह फ़ायरफ़ॉक्स या आईई या जो कुछ भी अच्छी तरह से काम नहीं करती है")।

var distance = getDistance(element1, element2); 

या jQuery अंकन में:

बेस्ट कुछ इस तरह होगा

var distance = $(element1).distanceTo($(element2)); 

Answer 1

मैं jQuery इस्तेमाल कभी नहीं किया, बस एपीआई ऊपर देखा, तो मैं यह मान सकते हैं आप निम्न कर सकते हैं:

 
var o1 = $(element1).offset(); 
var o2 = $(element2).offset(); 
var dx = o1.left - o2.left; 
var dy = o1.top - o2.top; 
var distance = Math.sqrt(dx * dx + dy * dy); 

Answer 2

शुद्ध जावास्क्रिप्ट का उपयोग करना।

var dx = obj1.offsetLeft - obj2.offsetLeft; 
var dy = obj1.offsetTop - obj2.offsetTop; 
var distance = Math.sqrt(Math.pow(dx,2) + Math.pow(dy,2)); 

Answer 3

निम्नलिखित के बारे में क्या?

var isIE = navigator.appName.indexOf("Microsoft") != -1; 

function getDistance(obj1, obj2){ 
    var obj1 = document.getElementById(obj1); 
    var obj2 = document.getElementById(obj2); 
    var pos1 = getRelativePos(obj1); 
    var pos2 = getRelativePos(obj2); 
    var dx = pos1.offsetLeft - pos2.offsetLeft; 
    var dy = pos1.offsetTop - pos2.offsetTop; 
    return {x:dx, y:dy}; 
} 
function getRelativePos(obj){ 
var pos = {offsetLeft:0,offsetTop:0}; 
while(obj!=null){ 
    pos.offsetLeft += obj.offsetLeft; 
    pos.offsetTop += obj.offsetTop; 
    obj = isIE ? obj.parentElement : obj.offsetParent; 
} 
return pos; 
} 
// 
var obj = getDistance("element1","element2") 
alert(obj.x+" | "+obj.y);