JQuery : How to disable mouse move vertically?


Tags: javascript,jquery,html,css

Problem :

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


Solution :

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:

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

    CSS Howto..

    how to keep the aspect ratio of an image in bounding box - CSS

    How to create a multiple columns with HTML CSS

    how to use inline css in master pages

    How to remove a CSS style on the fly

    how to make a image in div to be dragged just downwards using html5 css jquery animation?

    How to control the CSS of the contents that loaded dynamically into iframe?

    CSS How to center link elements within a div

    Show div only on Homepage using only JS & CSS

    How can I style table to be full width of container and make the cells use percentage of the width?

    CSS - How to create diagonal emboss?

    How to overlay divs with pure css?

    how can I use of a php variable into a .css file

    How to change an image on click using CSS alone?

    How to properly link CSS files with PHP footer and header

    HTML+CSS : how to move not close divs to create a right column?

    How to ask browsers to refresh (flush) the cache of my website?

    How to modify CSS rules without adding style attribute?

    how can I make a frame made with css be over a div and when changing the width does not affect the content of the div, only the width of the frame?

    How to get “position:fixed” css to work in IE 7+ with TRANSITIONAL doctype?

    How to make a div with arrowlike side without css border tricks?

    A really simple question: How to apply a style to an iframe whose parent tag's id is known?

    How to change buttons to pictures in jquery dialog

    How to do transparent background on few div to see background of parent

    HTML/CSS: How to make the sidebar and content follow each other

    How to view the compiled css from sass files in ruby on rails?

    How can I improve my webpage code to be scalable for smaller sizes?

    How to perform media queries if either statements are correct?

    How do I import 2 different files icons?

    How do you group similar n-th child selectors? [duplicate]

    How to create a simple Modal Dialog Box in JQuery?