相关疑难解决方法(0)

jQuery在元素中获取鼠标位置

我希望能够创建一个控件,用户可以在div中单击,然后拖动鼠标,然后放开鼠标以指示他们想要的内容.(这是用于日历控件,因此用户将指示特定事件的时间长度)

看起来最好的方法是在父div上注册一个"mousedown"事件,然后在div上注册一个"mousemove"事件,直到触发"mouseup"事件."mousedown"和"mouseup"事件将定义时间范围的开始和结束,当我按照"mousemove"事件时,我可以动态地更改范围的大小,以便用户可以看到他们正在做什么.我的基础是谷歌日历中如何创建事件.

我遇到的问题是jQuery事件似乎只提供参考整个页面的可靠鼠标坐标信息.有没有办法辨别参考父元素的坐标是什么?

编辑:

下面是我正在尝试做的事情的照片: 替代文字

jquery mouseevent

160
推荐指数
5
解决办法
24万
查看次数

如何检测用户是否正在尝试调整可拖动元素的大小?

我正在尝试创建可拖动元素,这些元素也可以通过在 CSS 规则的帮助下拖动右下角来调整大小resize: both。到目前为止,我可以在屏幕上拖动它,但我不知道如何检测光标是否处于“调整大小”状态,因为尝试调整元素大小会移动它。

目前,作为一种解决方法,我只是检查光标是否在右下角的 20px 范围内,但这不是很准确(可能取决于浏览器/操作系统),并且在某些地方它拒绝调整元素大小或移动元素全部。

有什么建议么?

!function(){
"use strict";
let x, y, drag;
document.addEventListener("mousedown", function(e) {
  if (e.target.parentNode.lastChild !== e.target && e.target.parentNode.classList.contains("main")) {
    //bring element to the front and dispatch mousedown event again otherwise resize doesn't work
    e.target.parentNode.appendChild(e.target);
    return e.target.dispatchEvent(new MouseEvent(e.type, e));
  }

  if (!e.target.classList.contains("draggable"))
    return;

  /* if cursor within 20px from bottom right corner don't move */
  const r = e.target.getBoundingClientRect();
  if (r.right < e.x + 20 && r.bottom < e.y + 20)
    return;

  drag …
Run Code Online (Sandbox Code Playgroud)

html javascript css

6
推荐指数
1
解决办法
2431
查看次数

标签 统计

css ×1

html ×1

javascript ×1

jquery ×1

mouseevent ×1