[英]JQuery : How to disable mouse move vertically?
我正在使用鼠標單擊事件創建元素選擇器。 JSFiddle鏈接。 您可以單擊一個單元格並根據需要拖動(綠色將顯示) 。 我的問題是如何在點擊和拖動時禁用鼠標垂直移動? 用戶應該只能水平拖動。 以下是我的efforded代碼。
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');
});
});
您不需要阻止垂直鼠標移動 。 您只需要捕獲正確的元素及其兄弟,並將每個事件附加到放置項目的類,如下所示:
$(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.