Miałem nadzieję, że uda mi się stworzyć kontrolę, w której użytkownik mógłby kliknąć wewnątrz elementu div, a następnie przeciągnąć myszą, a następnie zwolnić przycisk myszy, aby wskazać, jak długo chce, aby coś było. (To jest dla kontrolki kalendarza, więc użytkownik będzie wskazywał długość w czasie określonego zdarzenia)
Wygląda na to, że najlepszym sposobem na zrobienie tego byłoby zarejestrowanie zdarzenia „mousedown” w nadrzędnym elemencie div, który z kolei rejestruje zdarzenie „mousemove” w elemencie div do momentu wywołania zdarzenia „mouseup”. Zdarzenia „mousedown” i „mouseup” definiują początek i koniec zakresu czasowego, a śledząc zdarzenia „mousemove”, mogę dynamicznie zmieniać rozmiar zakresu, aby użytkownik mógł zobaczyć, co robi. Oparłem to na tym, jak wydarzenia są tworzone w kalendarzu Google.
Problem polega na tym, że zdarzenie jQuery wydaje się dostarczać wiarygodnych informacji o współrzędnych myszy tylko w odniesieniu do całej strony. Czy istnieje sposób, aby rozpoznać, jakie współrzędne odnoszą się do elementu nadrzędnego?
Edytować:
Oto zdjęcie tego, co próbuję zrobić:
źródło
offset()
jest również względna, więc jeśli rodzic jest dzieckiem innego elementu, da to zły wynik. Użyjposition()
zamiast tego.Aby uzyskać pozycję kliknięcia względem aktualnie klikniętego elementu
Użyj tego kodu
źródło
var y = e.pageY - $(this).offset().top;
Ale twoja odpowiedź poprowadziła mnie na właściwą ścieżkę.Używam tego fragmentu kodu, jest całkiem fajny :)
źródło
@AbdulRahim odpowiedź jest prawie poprawna. Ale proponuję poniższą funkcję jako substytut (dla dalszego odniesienia):
źródło
To rozwiązanie obsługuje wszystkie główne przeglądarki, w tym IE. Dba również o przewijanie. Po pierwsze, wydajnie pobiera pozycję elementu względem strony i bez użycia funkcji rekurencyjnej. Następnie pobiera x i y kliknięcia myszą względem strony i wykonuje odejmowanie, aby uzyskać odpowiedź, która jest pozycją względem elementu (element może być na przykład obrazem lub div):
źródło
Jeśli ustawisz swój element nadrzędny na „position: relative”, będzie to „offsetowy element nadrzędny” dla rzeczy, nad którymi śledzisz zdarzenia myszy. Zatem jQuery „position ()” będzie do tego odniesiona.
źródło
"position:relative"
. Pozycja jQuery zgłosiłaby wówczas swoje pozycje względem elementu nadrzędnego, a nie strony. Sformułowanie mojej odpowiedzi jest słabe, sugeruje, że jest bezpośrednio związane z rozwiązaniem Pointy'ego, ale jest to sposób obliczania przesunięcia, gdy nie możesz lub nie chcesz polegać na atrybutach stylu elementu nadrzędnego.Oto taki, który podaje również procentową pozycję punktu, na wypadek, gdybyś jej potrzebował. https://jsfiddle.net/Themezly/2etbhw01/
źródło
Sugerowałbym to:
źródło