Question

我用JS制作了类似拖放元素的东西。

function Draggable(elm) {
    this.d = elm;
    this.style.position = "absolute";
    elm.onselectstart = elm.ondragstart = function() { return false; }
    elm.addEventListener('mousedown', this._start.bindAsEventListener(this), false);
}
Draggable.prototype._start = function (event) {
    this.deltaX = event.clientX;
    this.deltaY = event.clientY;
    if (!this.dm) {
        this.dm = document.createElement("div");
        this.dm.setAttribute("class", "dragger");
        this.dm.onmousemove = this._move.bindAsEventListener(this);
        this.dm.onmouseup = this._stop.bindAsEventListener(this);
        this.dm.onselectstart = RetFalse;
        this.dm.ondragstart = RetFalse;
    }
    document.body.appendChild(this.dm);

    this.lastX = this.lastY = 0;
    this.ondragstart();
    return false;
}
Draggable.prototype._move = function (event) {
    var newx = (event.clientX - this.deltaX);
    var newy = (event.clientY - this.deltaY);
    if (newx < this.x0) newx = this.x0;
    if (newx > this.x1) newx = this.x1;
    if (newy < this.y0) newy = this.y0;
    if (newy > this.y1) newy = this.y1;
    this.d.style.left = newx + "px";
    this.d.style.top = newy + "px";
    if (window.getSelection) window.getSelection().removeAllRanges(); else document.selection.empty();
    return false;
}
Draggable.prototype._stop = function (event) {
    document.body.removeChild(this.dm);
    return false;
}

“拖动器”是填充整个页面的透明DIV，以防止拖动的目标在鼠标移动太快时丢失捕获。（如果我能抓住鼠标，我就需要它。）

.dragger {
    cursor:move;
    position:absolute;
    width:100%;height:100%;
    left:0px;top:0px;
    margin:0px;padding:0px;
    z-index:32767;
    background: transparent;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
}

但是，如果我：

在可拖动元素上按鼠标左键
将其拖到客户区域外（浏览器窗口外）
释放鼠标按钮

元素将失去捕获，因此如果我将光标移回，没有收到鼠标按下事件，该元素随处可见光标。（直到你点击再次进行鼠标操作。）

刚才，我在这个网站上看到了它完美：（www.box.net） Mouse capture 即使您在浏览器窗口外释放鼠标按钮，蓝色选择框仍然可以在光标移动时调整大小，并在释放按钮时消失。

但是当光标在外面时，我无法接收任何鼠标移动或鼠标。

我可以使用什么API来捕获鼠标？

如您所见，我正在使用Chrome浏览器。据说在非IE浏览器中没有类似HTMLElement.setCapture的API。

这个页面使用jQuery，但jQuery使用了什么？什么是原始的javascript代码呢？

Answer 1

不是创建一个大而透明的元素（dm），而是将鼠标事件绑定到window。

它在页面上到处都有鼠标事件;在拖动过程中，即使光标移出窗口，您也会继续获得mousemove个事件，如果您在窗口外释放鼠标按钮，则会mouseup。

P.S。如果您在.preventDefault()事件上致电mousedown，则浏览器将不会选择任何文字，您也无需清除mousemove上的选择。

Answer 2

虽然它有点过时（FF现在支持setCapture），但我发现this article非常有帮助。修复的基础是这样的：

var dragTarget = element.setCapture ? element : document; // setCapture fix

我已经设置了this little example。 javascript是直接从我正在建立的网页中复制的，用于完美*的客户端。遗憾的是，我无法在iframe中找到可拖动内容的修复程序，因此如果在jsFiddle，Codepen等处查看，它仍然会在Chrome中出现问题。您必须相信我的工作原理（或尝试一下）你自己）。如果有人知道此iframe问题的修复方法，请分享。

*在Chrome，Safari和FF中，我还没有在Opera或IE中测试

在非IE浏览器中捕获鼠标？

2 个答案: