JQuery：如何禁用鼠标垂直移动？答案

【问题标题】：JQuery : How to disable mouse move vertically?JQuery：如何禁用鼠标垂直移动？
【发布时间】：2015-07-27 12:25:05
【问题描述】：

我正在使用鼠标单击事件创建元素选择器。 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');
    });
});

【问题讨论】：

仅供参考，您不能限制鼠标的实际移动。如果用户想上楼走出你的窗户，他们可以。您可以限制鼠标向左/向右移动时发生的情况并忽略垂直运动。您必须以不同的方式实现命中检测，以便只响应拖动开始的行中的项目。

标签： javascript jquery html css

【解决方案1】：

您无需阻止垂直鼠标移动。您只需要捕获正确的元素及其兄弟姐妹，并将每个事件附加到放置项目的类，如下所示：

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

【讨论】：

哦！你给了我一个很好的观点。谢谢你，先生。 $(this).siblings() 非常有用。但是当鼠标被释放并且不应该应用列（房间 xxx）时我需要取消绑定事件（我想我可以处理这个）。谢谢。
@Cataclysm.. 随时！！快乐编码！如果您遇到任何问题，请告知！！供您参考this answer 可能对您有所帮助！！