[英]JQuery : How to disable mouse move vertically?
I am creating elements selector with mouse click event. 我正在使用鼠标单击事件创建元素选择器。 JSFiddle link.
JSFiddle链接。 You can click on one cell and drag as you want (green color will show) .
您可以单击一个单元格并根据需要拖动(绿色将显示) 。 My question is how to disable mouse is moving vertically while click and drag ?
我的问题是如何在点击和拖动时禁用鼠标垂直移动? Users should be only draggable horizontally.
用户应该只能水平拖动。 Below is my efforded codes.
以下是我的efforded代码。
HTML 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 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;
}
Scripts 脚本
$(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');
});
});
You don't need to block the vertical mousemove . 您不需要阻止垂直鼠标移动 。 You just need to catch the proper element and its siblings and also attaching event each to class where the items are placed as below:
您只需要捕获正确的元素及其兄弟,并将每个事件附加到放置项目的类,如下所示:
$(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");
});
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.