1

我无法让光标知道e-resize何时mousedown发生mousemove事件。我确实设法做到了，但后来它不再起作用了，我忘记了我是如何让它起作用的。

这是jsFiddle中的示例，当您拖动句柄栏时，它的光标不会更改e-resize为应有的状态。

我在想有某种不正确的cursor: e-resize分配。

这是当前的CSS：

.container {
    width: 500px;
    height: 300px;
    box-sizing: border-box;
}
.splitter {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.splitter.vertical .leftPane {
    position: absolute;
    height: 100%;
    top: 0;
    left: 0;
    bottom: 0;
    overflow: hidden;
    background-color: blue;
    margin-right: 5px;
    right: 25%;
    z-index: 1;
}
.splitter.vertical .rightPane {
    position: absolute;
    height: 100%;
    top: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    background-color: red;
    left: auto;
    width: 25%;
    z-index: 1;
}
.splitter.vertical .handleBar {
    position: absolute;
    height: 100%;
    top: 0;
    bottom: 0;
    overflow: hidden;
    background-color: green;
    right: 25%;
    width: 5px;
    margin-left: -5px;
    z-index: 1;
    cursor: e-resize;
}
.splitter.active .handleClone {
    position: absolute;
    top: 0;
    bottom: 0;
    background-color: green;
    width: 5px;
    cursor: e-resize;
    z-index: 3;
}
.splitter .content-overlay {
    opacity: 0.5;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 2;
    display: none;
    background-color: black;
}
.splitter.active .content-overlay {
    display: block;
}
.splitter.active {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: e-resize;
}
.splitter.hide-right .handleBar {
    display: none !important;
}
.splitter.hide-right .rightPane {
    display: none !important;
}
.splitter.hide-right .leftPane {
    right: 0 !important;
    margin-right: 0 !important;
}
4

2 回答 2

1

问题是 Chrome 认为您想要选择可能存在的任何文本，因此它会更改光标，就好像您正在突出显示文本一样。选择开始时，您可以防止默认操作，其中包括更改光标。

我添加了这一行：

container[0].onselectstart = function(e){e.preventDefault();return false;}

将它移动到您想要的位置，但它可以工作。

查看更新的小提琴

在jQuery 论坛上找到

编辑：

为了清楚起见，我会将该行移入 container.on('mousemove')

container.on('mousemove', function (e) {
    var rightPos = container.width() - (e.pageX - container.offset().left);

    this.onselectstart = function(e){e.preventDefault();return false;}

    handleClone.css({
        right: rightPos - 2
    });
})
于 2013-08-22T04:13:21.917 回答
0

您是否尝试过使用 javascript 来解决问题？在元素上执行事件处理程序onmousedown并onmouseup让它们运行如下函数：

    function mousecursor() { 
    document.getElementById("mygreatid").style.cursor = "eResize"; 
    }

希望有帮助:)

于 2013-08-22T04:10:33.660 回答