javascript - 查询 : How to disable mouse move vertically?

Question

我正在使用鼠标单击事件创建元素选择器。 JSFiddle 链接。您可以单击一个单元格并根据需要拖动(将显示绿色)。我的问题是如何在单击和拖动时禁用鼠标垂直移动？用户应该只能水平拖动。以下是我提供的代码。

HTML

<div id="grid">
                <div class="gridHeader">
                    <span><label>#</label></span>
                        <span><label>01</label></span>
                        <span><label>02</label></span>
                        <span><label>03</label></span>
                        <span><label>04</label></span>
                        <span><label>05</label></span>
                        <span><label>06</label></span>
                        <span><label>07</label></span>
                        <span><label>08</label></span>
                        <span><label>09</label></span>
                        <span><label>10</label></span>
                </div>
                    <div class="gridRow">
                        <span><label>Room #01</label></span>
                            <span class="item"></span>
                            <span class="item"></span>
                            <span class="item"></span>
                            <span class="item"></span>
                            <span class="item"></span>
                            <span class="item"></span>
                            <span class="item"></span>
                            <span class="item"></span>
                            <span class="item"></span>
                            <span class="item"></span>
                    </div>
                    <div class="gridRow">
                        <span><label>Room #02</label></span>
                            <span class="item"></span>
                            <span class="item"></span>
                            <span class="item"></span>
                            <span class="item"></span>
                            <span class="item"></span>
                            <span class="item"></span>
                            <span class="item"></span>
                            <span class="item"></span>
                            <span class="item"></span>
                            <span class="item"></span>
                    </div>
                    <div class="gridRow">
                        <span><label>Room #03</label></span>
                            <span class="item"></span>
                            <span class="item"></span>
                            <span class="item"></span>
                            <span class="item"></span>
                            <span class="item"></span>
                            <span class="item"></span>
                            <span class="item"></span>
                            <span class="item"></span>
                            <span class="item"></span>
                            <span class="item"></span>
                    </div>
                    <div class="gridRow">
                        <span><label>Room #04</label></span>
                            <span class="item"></span>
                            <span class="item"></span>
                            <span class="item"></span>
                            <span class="item"></span>
                            <span class="item"></span>
                            <span class="item"></span>
                            <span class="item"></span>
                            <span class="item"></span>
                            <span class="item"></span>
                            <span class="item"></span>
                    </div>
                    <div class="gridRow">
                        <span><label>Room #05</label></span>
                            <span class="item"></span>
                            <span class="item"></span>
                            <span class="item"></span>
                            <span class="item"></span>
                            <span class="item"></span>
                            <span class="item"></span>
                            <span class="item"></span>
                            <span class="item"></span>
                            <span class="item"></span>
                            <span class="item"></span>
                    </div>
                    <div class="gridRow">
                        <span><label>Room #06</label></span>
                            <span class="item"></span>
                            <span class="item"></span>
                            <span class="item"></span>
                            <span class="item"></span>
                            <span class="item"></span>
                            <span class="item"></span>
                            <span class="item"></span>
                            <span class="item"></span>
                            <span class="item"></span>
                            <span class="item"></span>
                    </div>
            </div>

CSS

#grid {

}
.gridHeader {
}
#grid .gridHeader > span {
    border:1px solid black;
    text-align: center;
    padding: 3px 5px;
    margin-top: 1px;
    display: inline-block;
    width: 16px;
    vertical-align: middle;
    margin-right: -3px;
    background-color: silver;
}
#grid .gridHeader > span:FIRST-CHILD {
    width:75px;
}
.gridRow {
}
#grid .gridRow > span {
    border: 1px solid black;
    text-align: center;
    padding: 3px 5px;
    margin-top: 1px;
    display: inline-block;
    width:16px;
    height:20px;
    vertical-align: middle;
    margin-right: -3px;
}
#grid .gridRow > span:FIRST-CHILD {
    width:75px;
    background-color: silver;
}

脚本

$(document).ready(function(){
    $('#grid .item').mousedown(function(){
        $(this).attr("style", "background-color:green");
        $('#grid .item').mouseenter(function(){
            $(this).attr("style", "background-color:green");
        });
    });
    $('#grid .item').mouseup(function(){
        $('#grid .item').unbind('mouseenter');
    });
});

Answer 1

您不需要阻止垂直鼠标移动。您只需要捕获正确的元素及其 sibling ，并将每个事件附加到放置元素的类，如下所示:

DEMO

$(document).ready(function(){
        $('.gridRow .item').mousedown(function(){
            $(this).attr("style", "background-color:green");
            $(this).siblings().mouseenter(function(){ 
            //^^^^style only its siblings where mouse has been clicked
                $(this).attr("style", "background-color:green");
        });
    });
});