JQuery: How to disable mouse movement vertically?

Question

I am creating an element selector with a mouse event. JSFiddle . You can click on one cell and drag as you want (green will appear). My question is how to turn off the mouse by moving vertically when you click and drag? Users should only be dragged horizontally. Below are my modified codes.

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;
}

Scenarios

$(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

You do not need to block the vertical mousemove . You just need to catch the correct element and its siblings, and also attach each event to the class, where items are placed as follows:

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");
        });
    });
});