jQuery को एक तत्व के भीतर माउस की स्थिति मिलती है

Question

मैं एक ऐसे नियंत्रण को बनाने की उम्मीद कर रहा था जहां कोई उपयोगकर्ता किसी div के अंदर क्लिक कर सकता है, फिर माउस को खींच सकता है, फिर माउस को ऊपर जाने के लिए यह इंगित करने के लिए कि वे कितनी देर तक कुछ करना चाहते हैं। (यह एक कैलेंडर नियंत्रण के लिए है, इसलिए उपयोगकर्ता एक निश्चित घटना के समय, लंबाई का संकेत देगा)

ऐसा करने का सबसे अच्छा तरीका यह है कि यह माता-पिता के तलाक पर "मूसडाउन" घटना को पंजीकृत करने के लिए होगा जो बदले में एक "माउसअप" घटना को रजिस्टर्ड करता है जब तक कि "माउसअप" घटना शुरू नहीं हो जाती। "मूसडाउन" और "माउसअप" इवेंट समय सीमा की शुरुआत और अंत को परिभाषित करेंगे और जैसा कि मैं "मूसमव" घटनाओं का पालन करता हूं, मैं गतिशील रूप से रेंज के आकार को बदल सकता हूं ताकि उपयोगकर्ता देख सकें कि वे क्या कर रहे हैं। मैं इस बात पर आधारित हूं कि Google कैलेंडर में ईवेंट कैसे बनाए जाते हैं।

समस्या यह है कि jQuery की घटना पूरे पृष्ठ के संदर्भ में केवल विश्वसनीय माउस समन्वय जानकारी प्रदान करने के लिए लगता है। क्या मूल तत्व के संदर्भ में निर्देशांक क्या हैं यह बताने का कोई तरीका है?

संपादित करें:

मैं क्या करने की कोशिश कर रहा हूँ की एक तस्वीर:

Answer 1

एक तरीका यह है कि offsetअनुवाद करने के लिए jQuery विधि का उपयोग करें event.pageXऔर event.pageYमाता-पिता के सापेक्ष एक माउस स्थिति में घटना से समन्वय करें। यहाँ भविष्य के संदर्भ के लिए एक उदाहरण है:

$("#something").click(function(e){
   var parentOffset = $(this).parent().offset(); 
   //or $(this).offset(); if you really just want the current element's offset
   var relX = e.pageX - parentOffset.left;
   var relY = e.pageY - parentOffset.top;
});

Comments

यदि माता-पिता तत्व का लेआउट बदला जा सकता है / नहीं तो इसे बदलना एक अच्छा विचार है!

— नुकीले

क्या यह उत्तर पैडिंग / सीमाओं को ध्यान में रखता है?

— लीजी

डॉक्स के अनुसार, ऑफसेट "बॉडी एलिमेंट पर बॉर्डर, मार्जिन या पैडिंग सेट के लिए खाता नहीं है।" मुझे उपयोग में मेरे पोस्ट किए गए उत्तर के साथ कोई समस्या नहीं आई है, लेकिन उन लोगों के लिए जाँच करना अच्छा हो सकता है जो सेट किए जा रहे हैं।

— 16

यह काम करने की जरूरत नहीं है। offset()सापेक्ष भी है, इसलिए यदि माता-पिता अन्य तत्व के बच्चे हैं, तो यह गलत परिणाम देगा। position()इसके बजाय उपयोग करें ।

— फ्लैश थंडर

@FlashThunder ऑफ़सेट () सापेक्ष नहीं है, कम से कम डॉक्स के अनुसार नहीं। इसके अलावा शरीर के तत्व पर कोई मार्जिन या पैडिंग न होना भी मानक अभ्यास होना चाहिए।

— जेम्स वाटकिंस

Answer 2

वर्तमान क्लिक किए गए तत्व के सापेक्ष क्लिक की स्थिति प्राप्त करने के लिए
इस कोड का उपयोग करें

$("#specialElement").click(function(e){
    var x = e.pageX - this.offsetLeft;
    var y = e.pageY - this.offsetTop;
}); 

Comments

आपके उत्तर ने मुझे बीटीडब्लू की मदद की, स्वीकृत उत्तर नहीं मिला। धन्यवाद :) मैंने वास्तव में क्या उपयोग किया है, इसके बजाय: var y = e.pageY - $(this).offset().top;लेकिन आपके जवाब ने मुझे सही रास्ते पर ले गया।

— सोलोमन क्लॉसन

Answer 3

मैं कोड के इस टुकड़े का उपयोग करता हूं, इसकी काफी अच्छी है :)

    <script language="javascript" src="http://code.jquery.com/jquery-1.4.1.js" type="text/javascript"></script>
<script language="javascript">
$(document).ready(function(){
    $(".div_container").mousemove(function(e){
        var parentOffset = $(this).parent().offset();
        var relativeXPosition = (e.pageX - parentOffset.left); //offset -> method allows you to retrieve the current position of an element 'relative' to the document
        var relativeYPosition = (e.pageY - parentOffset.top);
        $("#header2").html("<p><strong>X-Position: </strong>"+relativeXPosition+" | <strong>Y-Position: </strong>"+relativeYPosition+"</p>")
    }).mouseout(function(){
        $("#header2").html("<p><strong>X-Position: </strong>"+relativeXPosition+" | <strong>Y-Position: </strong>"+relativeYPosition+"</p>")
    });
});
</script>

Answer 4

@ अब्दुलरहीम का जवाब लगभग सही है। लेकिन मैं नीचे दिए गए फ़ंक्शन को विकल्प के रूप में सुझाता हूं (वायदा संदर्भ के लिए):

function getXY(evt, element) {
                var rect = element.getBoundingClientRect();
                var scrollTop = document.documentElement.scrollTop?
                                document.documentElement.scrollTop:document.body.scrollTop;
                var scrollLeft = document.documentElement.scrollLeft?                   
                                document.documentElement.scrollLeft:document.body.scrollLeft;
                var elementLeft = rect.left+scrollLeft;  
                var elementTop = rect.top+scrollTop;

                x = evt.pageX-elementLeft;
                y = evt.pageY-elementTop;

                return {x:x, y:y};
            }




            $('#main-canvas').mousemove(function(e){
                var m=getXY(e, this);
                console.log(m.x, m.y);
            });

Comments

शानदार सुधार, मेरा दिन बचाया।

— बड दाम्यानोव

लगभग, कैनवास में मार्जिन जोड़ें और आप मार्जिन से दूर हैं

— Benn

यह कोड के कुछ महान टुकड़े है, बहुत बहुत धन्यवाद!

— स्टीफन

Answer 5

यह समाधान IE सहित सभी प्रमुख ब्राउज़रों का समर्थन करता है। इसमें स्क्रॉलिंग का भी ध्यान रखा गया है। सबसे पहले, यह पृष्ठ के सापेक्ष तत्व की स्थिति को कुशलतापूर्वक प्राप्त करता है, और एक पुनरावर्ती फ़ंक्शन का उपयोग किए बिना। फिर यह माउस के x और y को पृष्ठ के सापेक्ष क्लिक करता है और घटाव का उत्तर उस तत्व के सापेक्ष देता है जो तत्व के सापेक्ष स्थिति है (तत्व उदाहरण के लिए चित्र या div हो सकता है):

function getXY(evt) {
    var element = document.getElementById('elementId');  //replace elementId with your element's Id.
    var rect = element.getBoundingClientRect();
    var scrollTop = document.documentElement.scrollTop?
                    document.documentElement.scrollTop:document.body.scrollTop;
    var scrollLeft = document.documentElement.scrollLeft?                   
                    document.documentElement.scrollLeft:document.body.scrollLeft;
    var elementLeft = rect.left+scrollLeft;  
    var elementTop = rect.top+scrollTop;

        if (document.all){ //detects using IE   
            x = event.clientX+scrollLeft-elementLeft; //event not evt because of IE
            y = event.clientY+scrollTop-elementTop;
        }
        else{
            x = evt.pageX-elementLeft;
            y = evt.pageY-elementTop;
    }

Answer 6

यदि आप अपने मूल तत्व को "स्थिति: सापेक्ष" बनाते हैं, तो यह उस सामान के लिए "ऑफसेट अभिभावक" होगा जो आप माउस ईवेंट को ट्रैक कर रहे हैं। इस प्रकार jQuery "स्थिति ()" के सापेक्ष होगा।

Comments

हे पॉइंटी, आपकी प्रतिक्रिया के लिए धन्यवाद। आपके शब्दों के आधार पर, ऐसा लगता है कि आप जो सुझाव दे रहे हैं, वह इस बात से अलग है कि जॅब ने क्या सुझाव दिया है, लेकिन मुझे समझ नहीं आ रहा है कि, आप कैसे विस्तृत कर सकते हैं? धन्यवाद फिर से

— क्रिस Dutrow

@DutrowLLC, Pointy के मूल तत्व की शैली को बदलने का सुझाव दे रहा है "position:relative"। JQuery की स्थिति तब मूल तत्व के सापेक्ष अपनी स्थिति की रिपोर्ट करेगी, पृष्ठ की नहीं। मेरे उत्तर पर शब्द खराब है, इसका अर्थ है कि यह सीधे पॉइंटी के समाधान से संबंधित है, लेकिन यह ऑफसेट की गणना करने का एक तरीका है जब आप मूल तत्व की शैली विशेषताओं पर निर्भर नहीं कर सकते हैं या नहीं करना चाहते हैं।

— जब्बाल

इसलिए अगर मैं "स्थिति: सापेक्ष" सेट करता हूं, तो jQuery सभी ब्राउज़र में रिलैस्टोव स्थिति को सही ढंग से रिपोर्ट करेगा? मेरे द्वारा पूछे जाने का कारण यह है कि jQuery के दस्तावेज़ का मतलब यह प्रतीत होता है कि सभी ब्राउज़रों में एकमात्र भरोसेमंद माउस स्थिति ब्राउज़र विंडो के संबंध में एक थी।

— क्रिस डुट्रो

"पोजीशन: रिलेटिव" वाला एक बॉक्स "पेरेंट" और "लेफ्ट" (आदि) बना देगा, जो कि रिलेटिव पेरेंट बॉक्स के कंटेंट रेक्टेंगल के लिए चाइल्ड बॉक्स के लिए सेट है।

— पोइंटी

मैं कुछ गलत कर रहा हो सकता है, लेकिन यह फ़ायरफ़ॉक्स में काम नहीं करता है। मेरे पास "स्थिति: रिश्तेदार;" माता-पिता में सेट, फ़ायरफ़ॉक्स रिपोर्ट event.pageX और event.clientX पहचान के साथ (शीर्ष के संबंध में, पृष्ठ के बाएं) और रिपोर्ट इवेंट.ऑफ़सेटएक्स को अपरिभाषित के रूप में

— क्रिस डुट्रो

Answer 7

यहां एक है जो आपको उस बिंदु की स्थिति का प्रतिशत भी देता है जब आपको इसकी आवश्यकता होती है। https://jsfiddle.net/Themezly/2etbhw01/

function ThzhotspotPosition(evt, el, hotspotsize, percent) {
  var left = el.offset().left;
  var top = el.offset().top;
  var hotspot = hotspotsize ? hotspotsize : 0;
  if (percent) {
    x = (evt.pageX - left - (hotspot / 2)) / el.outerWidth() * 100 + '%';
    y = (evt.pageY - top - (hotspot / 2)) / el.outerHeight() * 100 + '%';
  } else {
    x = (evt.pageX - left - (hotspot / 2));
    y = (evt.pageY - top - (hotspot / 2));
  }

  return {
    x: x,
    y: y
  };
}



$(function() {

  $('.box').click(function(e) {

    var hp = ThzhotspotPosition(e, $(this), 20, true); // true = percent | false or no attr = px

    var hotspot = $('<div class="hotspot">').css({
      left: hp.x,
      top: hp.y,
    });
    $(this).append(hotspot);
    $("span").text("X: " + hp.x + ", Y: " + hp.y);
  });


});

.box {
  width: 400px;
  height: 400px;
  background: #efefef;
  margin: 20px;
  padding: 20px;
  position: relative;
  top: 20px;
  left: 20px;
}

.hotspot {
  position: absolute;
  left: 0;
  top: 0;
  height: 20px;
  width: 20px;
  background: green;
  border-radius: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
  <p>Hotspot position is at: <span></span></p>
</div>

Answer 8

मैं यह सुझाव दूंगा:

e.pageX - this.getBoundingClientRect().left