我希望能够创建一个控件,用户可以在div中单击,然后拖动鼠标,然后放开鼠标以指示他们想要的内容.(这是用于日历控件,因此用户将指示特定事件的时间长度)
看起来最好的方法是在父div上注册一个"mousedown"事件,然后在div上注册一个"mousemove"事件,直到触发"mouseup"事件."mousedown"和"mouseup"事件将定义时间范围的开始和结束,当我按照"mousemove"事件时,我可以动态地更改范围的大小,以便用户可以看到他们正在做什么.我的基础是谷歌日历中如何创建事件.
我遇到的问题是jQuery事件似乎只提供参考整个页面的可靠鼠标坐标信息.有没有办法辨别参考父元素的坐标是什么?
编辑:
下面是我正在尝试做的事情的照片:
我正在尝试创建可拖动元素,这些元素也可以通过在 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)