1

私は単純な HTML DIV スプリッターを作成しています。カーソルを col-resize に設定しています。スプリッターをドラッグするときにカーソルのサイズを変更したいのですが、ドラッグするマウスがスプリッター上にない場合 (たとえば、サイズ変更の境界を超えている場合)、カーソルはそれ以上サイズ変更されません。HTML:

<div id="container">
    <div id="left"></div>
    <div id="splitter"></div>
    <div id="right">
</div>

CSS:

#container {
    position: relative;
}

#left {
    position: absolute;
    left: 2px;
    top: 2px;
    width: 200px;
    height: 200px;
    outline: 2px solid red;
}

#right {
    position: absolute;
    left: 202px;
    top: 2px;
    width: 300px;
    height: 200px;
    outline: 2px solid blue;
}

#splitter {
    position: absolute;
    left:202px;
    top: 2px;
    height: 200px;
    z-index: 2;
    cursor: col-resize;
    width: 8px;
}

#splitter.active {
    background-color: gray;
}

私が遭遇するもう1つの問題は、マウスがダウンしてドラッグしているときに背景色を灰色にしたいが、マウスを上げたりドラッグを終了したりすると色がつかないようにしたいのですが、マウスがスプリッターの外にある場合、マウスアップイベントは発生しません。

$("#splitter").on("mousedown mouseup", function() {
    $(this).toggleClass("active");});​

jsFiddle のリンクはこちら: http://jsfiddle.net/Shuping/MhYuK/ 何か提案はありますか?

4

1 に答える 1

2

あなたはelse条件を与えていません。

これを試してみてください。

$("#splitter").on("mousedown", function() {
    $(this).addClass("active");
});

$("#splitter").on("mouseup mouseleave", function() {
    $(this).removeClass("active");
});​
于 2012-12-29T16:36:17.250 に答える