jQuery krijgt muispositie binnen een element

Ik hoopte een besturingselement te maken waarbij een gebruiker in een div kan klikken, vervolgens de muis kan slepen en de muis vervolgens kan loslaten om aan te geven hoe lang iets moet zijn. (Dit is voor een kalendercontrole, dus de gebruiker zal de lengte, in de tijd, van een bepaalde gebeurtenis aangeven)

Het lijkt erop dat de beste manier om dit te doen is om een ​​”mousedown”-gebeurtenis op de bovenliggende div te registreren, die op zijn beurt een “mousemove” -gebeurtenis op de div registreert totdat een “mouseup” -gebeurtenis wordt geactiveerd. De gebeurtenissen “mousedown” en “mouseup” bepalen het begin en einde van het tijdbereik en terwijl ik de gebeurtenissen “mousemove” volg, kan ik de grootte van het bereik dynamisch wijzigen, zodat de gebruiker kan zien wat ze doen. Ik heb dit gebaseerd op hoe afspraken worden gemaakt in Google Agenda.

Het probleem dat ik ondervind is dat de jQuery-gebeurtenis alleen betrouwbare muiscoördinaatinformatie lijkt te geven met betrekking tot de hele pagina. Is er een manier om te onderscheiden wat de coördinaten zijn met betrekking tot het bovenliggende element?

Bewerken:

Hier is een foto van wat ik probeer te doen:
alt-tekst


Antwoord 1, autoriteit 100%

Eén manier is om de jQuery offset-methode te gebruiken om de event.pageXen event.pageYcoördineert van de gebeurtenis naar een muispositie ten opzichte van de ouder. Hier is een voorbeeld voor toekomstig gebruik:

$("#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;
});

Antwoord 2, autoriteit 5%

De positie van de klik opvragen ten opzichte van het huidige aangeklikte element
Gebruik deze code

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

Antwoord 3, autoriteit 4%

Ik gebruik dit stukje code, het is best aardig 🙂

   <script language="javascript" src="https://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>

Antwoord 4, autoriteit 3%

@AbdulRahim antwoord is bijna correct. Maar ik stel de onderstaande functie voor als vervanging (voor verdere referentie):

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);
            });

Antwoord 5, autoriteit 2%

Deze oplossing ondersteunt alle belangrijke browsers, inclusief IE. Het zorgt ook voor scrollen. Ten eerste haalt het efficiënt de positie van het element ten opzichte van de pagina op, en zonder een recursieve functie te gebruiken. Vervolgens krijgt het de x en y van de muisklik ten opzichte van de pagina en doet het de aftrekking om het antwoord te krijgen dat de positie is ten opzichte van het element (het element kan bijvoorbeeld een afbeelding of div zijn):

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

Antwoord 6

Als je je bovenliggende element “position: relative” maakt, dan zal het de “offset parent” zijn voor de dingen waarover je muisgebeurtenissen volgt. Dus de jQuery “position()” zal daar relatief aan zijn.


Antwoord 7

Hier is er een die je ook een procentuele positie van het punt geeft voor het geval je het nodig hebt.
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>

Snippet uitvouwen


Antwoord 8

Ik zou dit aanraden:

e.pageX - this.getBoundingClientRect().left

Other episodes