I am creating elements selector with mouse click event. JSFiddle link. 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.
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;
}
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");
});
});
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.