jQuery একটি উপাদানের মধ্যে মাউস অবস্থান পান

Question

আমি এমন একটি নিয়ন্ত্রণ তৈরি করার আশা করছিলাম যেখানে কোনও ব্যবহারকারী একটি ডিভের ভিতরে ক্লিক করতে পারে, তারপরে মাউসটিকে টেনে আনুন, তারপরে মাউসটিকে ছেড়ে দিন যাতে তারা কিছু হতে চায় indicate (এটি একটি ক্যালেন্ডার নিয়ন্ত্রণের জন্য, সুতরাং ব্যবহারকারী কোনও নির্দিষ্ট সময়ের দৈর্ঘ্য, সময়ে নির্দেশ করবে)

দেখে মনে হচ্ছে এটি করার সর্বোত্তম উপায় হ'ল পিতামাত্ত্বিক ডিভের উপর "মউসডাউন" ইভেন্টটি নিবন্ধভুক্ত করা যা "মাউসআপ" ইভেন্টটি চালিত না হওয়া অবধি ডিভের উপর একটি "মাউসমেভ" ইভেন্টটি নিবন্ধভুক্ত করে। "মাউসডাউন" এবং "মাউসআপ" ইভেন্টগুলি সময় সীমাটির শুরু এবং শেষ সংজ্ঞায়িত করবে এবং আমি "মাউসমাভ" ইভেন্টগুলি অনুসরণ করার সাথে সাথে আমি গতিশীলভাবে পরিসরের আকার পরিবর্তন করতে পারি যাতে ব্যবহারকারীরা কী করছে তা দেখতে পারে। গুগল ক্যালেন্ডারে ইভেন্টগুলি কীভাবে তৈরি করা হয় তার ভিত্তিতে আমি এটি ভিত্তিক করেছি।

আমার যে সমস্যাটি হচ্ছে তা হ'ল jQuery ইভেন্টটি পুরো পৃষ্ঠার প্রসঙ্গে কেবলমাত্র নির্ভরযোগ্য মাউস সমন্বয় তথ্য সরবরাহ করে। স্থানাঙ্কগুলি পিতামণ্ডলীয় উপাদানের সাথে সম্পর্কিত কিনা তা বোঝার কোনও উপায় আছে?

সম্পাদনা:

আমি যা করার চেষ্টা করছি তার একটি চিত্র এখানে:

Answer 1

একটি উপায় হ'ল jQuery offsetপদ্ধতিটি অনুবাদ 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

হ্যাঁ, পিতামাতার উপাদানটির বিন্যাসটি পরিবর্তন / পরিবর্তন করতে না পারলে এটি দুর্দান্ত ধারণা!

— পয়েন্টটি

এই উত্তরটি কি অ্যাকাউন্টে প্যাডিং / সীমান্ত গ্রহণ করে?

— লিগি

ডক্স অনুসারে, অফসেট "শরীরের উপাদানগুলিতে সীমানা, মার্জিন বা প্যাডিং সেট করার জন্য অ্যাকাউন্ট করে না।" আমার পোস্ট করা উত্তরটি ব্যবহারে আমি কোনও সমস্যার মুখোমুখি হইনি, তবে সেটগুলি নির্ধারণ করা ভাল be

— jball

এটি কাজ করতে হবে না। offset()আপেক্ষিকও, তাই পিতা-মাতা যদি অন্য উপাদানগুলির সন্তান হয় তবে এটি ভুল ফলাফল দেবে। position()পরিবর্তে ব্যবহার করুন।

— ফ্ল্যাশ থান্ডার

@ ফ্ল্যাশথান্ডার অফসেট () আপেক্ষিক নয়, কমপক্ষে ডক্স অনুসারে নয়। এছাড়াও শরীরের উপাদানগুলিতে কোনও মার্জিন বা প্যাডিং না রাখার জন্য এটি স্ট্যান্ডার্ড অনুশীলন হওয়া উচিত।

— জেমস ওয়াটকিন্স

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

উজ্জ্বল উন্নতি, আমার দিন বাঁচিয়েছে।

— বুড দামায়ানোভ

প্রায়, ক্যানভাসে মার্জিন যুক্ত করুন এবং আপনি মার্জিন দ্বারা বন্ধ

— বেন

এটি কোডের কিছু দুর্দান্ত অংশ, আপনাকে অনেক ধন্যবাদ!

— স্টেফান

Answer 5

এই সমাধানটি IE সহ সমস্ত বড় ব্রাউজারগুলিকে সমর্থন করে। এটি স্ক্রোলিংয়ের যত্নও নেয়। প্রথমত, এটি পৃষ্ঠার তুলনায় দক্ষতার সাথে এবং পুনরাবৃত্ত ফাংশনটি ব্যবহার না করে উপাদানটির অবস্থান পুনরুদ্ধার করে। তারপরে এটি পৃষ্ঠার সাথে সম্পর্কিত মাউস ক্লিকের x এবং y পায় এবং উত্তরটি পেতে বিয়োগ করে যা উপাদানটির সাথে সম্পর্কিত অবস্থান (উপাদানটি চিত্রের জন্য উদাহরণস্বরূপ বা ডিভ হতে পারে):

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 "অবস্থান ()" এর সাথে সম্পর্কিত হবে relative

Comments

আরে পয়েন্টি, আপনার প্রতিক্রিয়া জন্য ধন্যবাদ। আপনার শব্দের উপর ভিত্তি করে, শোনা যাচ্ছে যে আপনি যা বলছেন তা জবলের পরামর্শের চেয়ে আলাদা, কিন্তু আমি বুঝতে পারছি না, কীভাবে আপনি বিস্তারিত বলতে পারবেন? আবারও ধন্যবাদ

— ক্রিস ডাট্রো

@ ডড্রোএলএলসি, পয়েন্টি প্যারেন্ট উপাদানগুলির স্টাইলটি পরিবর্তনের পরামর্শ দিচ্ছে "position:relative"। JQuery অবস্থানটি পৃষ্ঠার পরিবর্তে মূল অবস্থানের সাথে সম্পর্কিত হয়ে তার অবস্থানগুলি প্রতিবেদন করবে। আমার উত্তরের শব্দটি দুর্বল, এটি বোঝায় যে এটি সরাসরি পয়েন্টির সমাধানের সাথে সম্পর্কিত তবে এটি অফসেট গণনা করার একটি উপায় যা আপনি যখন প্যারেন্ট উপাদানটির শৈলীর বৈশিষ্ট্যের উপর নির্ভর করতে না পারেন বা করতে চান না।

— jball

সুতরাং আমি যদি "অবস্থান: আপেক্ষিক" সেট করে থাকি তবে jQuery সমস্ত ব্রাউজারগুলিতে সঠিকভাবে সম্পর্কিত অবস্থানের প্রতিবেদন করবে? আমি জিজ্ঞাসা করার কারণটি হ'ল jQuery ডকুমেন্টেশন দ্বারা বোঝা যাচ্ছে যে সমস্ত ব্রাউজারে কেবলমাত্র নির্ভরযোগ্য মাউস অবস্থানটি ব্রাউজার উইন্ডো নিজেই সম্পর্কিত।

— ক্রিস ডাট্রো

"অবস্থান: আপেক্ষিক" সহ একটি বাক্স সন্তানের বাক্সগুলির জন্য পিতামাতার বাক্সের সামগ্রীর আয়তক্ষেত্রের তুলনায় "শীর্ষ" এবং "বাম" (ইত্যাদি) সেটিং তৈরি করবে।

— পয়েন্টটি

আমি হয়ত কিছু ভুল করছি, তবে এটি ফায়ার ফক্সে কাজ করছে বলে মনে হচ্ছে না। আমার "অবস্থান: আপেক্ষিক;" পিতামাতায় সেট, ফায়ারফক্স ইভেন্ট.পেজ এক্স এবং ইভেন্ট কোডিয়েন্টএক্স একইভাবে (পৃষ্ঠার বামদিকে শীর্ষে সম্মানের সাথে) রিপোর্ট করে এবং ইভেন্ট.অফসেটএক্সকে অপরিজ্ঞিত হিসাবে রিপোর্ট করেছে

— ক্রিস

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