Я надеялся создать элемент управления, в котором пользователь мог бы щелкнуть внутри элемента div, затем перетащить мышь, а затем отпустить кнопку мыши, чтобы указать, как долго они хотят, чтобы что-то было. (Это для элемента управления календаря, поэтому пользователь будет указывать длительность определенного события)
Похоже, что лучший способ сделать это - зарегистрировать событие «mousedown» в родительском div, которое, в свою очередь, регистрирует событие «mousemove» в div, пока не будет запущено событие «mouseup». События «mousedown» и «mouseup» будут определять начало и конец временного диапазона, и, следуя событиям «mousemove», я могу динамически изменять размер диапазона, чтобы пользователь мог видеть, что он делает. Я основал это на том, как события создаются в календаре Google.
Проблема, с которой я столкнулся, заключается в том, что событие jQuery, по-видимому, предоставляет только надежную информацию о координатах мыши в отношении всей страницы. Есть ли способ узнать, какие координаты относятся к родительскому элементу?
Редактировать:
Вот картина того, что я пытаюсь сделать:
источник
offset()
также относительна, поэтому, если родитель является дочерним элементом другого элемента, это даст неверный результат. Используйтеposition()
вместо этого.Чтобы получить позицию клика относительно текущего щелкаемого элемента
Используйте этот код
источник
var y = e.pageY - $(this).offset().top;
но ваш ответ привел меня на правильный путь.Я использую этот кусок кода, это довольно приятно :)
источник
@AbdulRahim ответ почти правильный. Но я предлагаю функцию ниже в качестве замены (для дальнейшего использования):
источник
Это решение поддерживает все основные браузеры, включая IE. Это также заботится о прокрутке. Во-первых, он получает позицию элемента относительно страницы эффективно, без использования рекурсивной функции. Затем он получает x и y щелчка мыши относительно страницы и выполняет вычитание, чтобы получить ответ, представляющий собой позицию относительно элемента (например, элемент может быть изображением или элементом div):
источник
Если вы сделаете свой родительский элемент «position: относительным», то он будет «родительским смещением» для материала, по которому вы отслеживаете события мыши. Таким образом, jQuery "position ()" будет относительно этого.
источник
"position:relative"
. Позиция jQuery будет сообщать о своих позициях относительно родительского элемента, а не страницы. Формулировка в моем ответе плохая, она подразумевает, что она напрямую связана с решением Pointy, но это способ вычисления смещения, когда вы не можете или не хотите зависеть от атрибутов стиля родительского элемента.Вот тот, который также дает вам процентное положение точки в случае, если вам это нужно. https://jsfiddle.net/Themezly/2etbhw01/
источник
Я бы предложил это:
источник