JQuery: 如何禁用鼠标垂直移动？

Question

JQuery: 如何禁用鼠标垂直移动？

4

我将创建一个元素选择器，并使用鼠标单击事件。以下是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');
    });
});

- Cataclysm

请注意，您无法限制鼠标的实际移动。如果用户想要向上并离开您的窗口，他们可以这样做。您可以限制鼠标左/右移动时发生的情况并忽略垂直运动。您将不得不以不同的方式实现命中检测，以便只响应拖动开始行中的项目。 - jfriend00

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Guruprasad J Rao · Accepted Answer

你不需要阻止垂直mousemove。你只需要捕捉正确的元素及其兄弟，并将事件附加到放置这些项目的类中，如下所示：

演示

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