jQuery changes input text value when you drag the mouse up / down

Question

jQuery changes input text value when you drag the mouse up / down

Navigation

#1 by (1 votes)

1

How can I make an Input of type Text change its value when I click inside it and drag the mouse up to increase the value and down to decrease the value. Only when the mouse moves up and down does the change in value of the input (validate min and max) I have this, but I can not make it work as a wish. Look at the effect I want to do link and this is what I have so far link but I need it to work only when the mouse click is pressed osea as dragging up or down as well as the example put

var clicking = false;
$('this').click(function() {
    clicking = false;
});
$('#change_value_up_down').mouseover(function() {
    clicking = true;
});
var i = 0;
var y = 0;
$(this).mousemove(function(my) {
    if (clicking === false) {
        return false;
    } else {
        // change value
        if (my.pageY <= $('#change_value_up_down').offset().top + $('#change_value_up_down').css('width').replace('px', '') / 10) {
            y = parseInt($('#change_value_up_down').val()) + 1;
            $('.movestatus').text('plus');
        } else {
            y = parseInt($('#change_value_up_down').val()) - 1;
            $('.movestatus').text('minus');
        }
        $('#change_value_up_down').val(parseInt(y));
        // Mouse click + moving logic here
        //$('.movestatus').text('mouse moved ' + i);
        i++;
    }
});
$('#change_value_up_down').mouseup(function(e) {
    clicking = false;
    //e.stopPropagation();
});
$('.selector').mouseup(function(e) {
    i = 0;
});

jquery

asked by Lenin Zapata 16.11.2016 в 20:15

source

1 answer

Show route with several Google Map bookmarks android "Illegal Access" cordovaGeolocation

score 1 · Accepted Answer

in the 5th line it replaces:

$('#change_value_up_down').mouseover(function () {

By:

$('#change_value_up_down').mousedown(function () {

Update:

Bug in Google Chrome fixed by replacing

line 34:

$('#change_value_up_down').mouseup(function(e) {

By:

$(this).mouseup(function(e) {

 var clicking = false;
    $('this').click(function () {
                clicking = false;
            });
            $('#change_value_up_down').mousedown(function () {
                clicking = true;
            });
            var i = 0;
            var y = 0;
            $(this).mousemove(function(my){
                if(clicking === false) 
                {
                    return false;
                }
                else
                {
                    // change value
                    if (my.pageY <= $('#change_value_up_down').offset().top + $('#change_value_up_down').css('width').replace('px', '')/10) 
                    {
                        y = parseInt($('#change_value_up_down').val()) +1 ;
                        $('.movestatus').text('plus');
                        }
                    else
                    {
                        y =  parseInt($('#change_value_up_down').val()) -1;
                        $('.movestatus').text('minus');
                        }
                    $('#change_value_up_down').val(parseInt(y));  
                    // Mouse click + moving logic here
                    //$('.movestatus').text('mouse moved ' + i);
                    i++;
                }
            });
            $(this).mouseup(function(e) {
                clicking = false;
                //e.stopPropagation();
            });
            $('.selector').mouseup(function(e) {
                i = 0;
            });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<i>Only when the mouse moves up and down does
    the value change from the input
    (validate min y max)</i>
  <br /><br /><br /><br /><br />
<input type="text" value="5" id="change_value_up_down" />
  
  <!-- only ref -->
  <span class="clickstatus"></span>
  <span class="movestatus"></span>

For more information about the events with the mouse in jQuery and learn the library itself:

PS: if the language is a limitation, give it a spartan kick with some translator like Bing Translator, Google Translate, which translate up to Elvish: D and if English you want to learn, here are some recommendations: