Jquery function that allows N numbers of inputs to increase / decrease by means of mousedown

Question

Jquery function that allows N numbers of inputs to increase / decrease by means of mousedown

Navigation

#1 by (1 votes)

4

I have this script that allows you to increase / decrease the value of an input by dragging up and down with the click pressed. But I need to make it work to be able to add this functionality to any input also with a minimum and a maximum value range link

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

The code is raw, but I need this to be a function to do it in any input.

jquery

asked by Lenin Zapata 16.11.2016 в 22:14

source

1 answer

Form String with single quote. Error ORA-01756 Static methods vs. instance method in testing java

score 1 · Accepted Answer

var clicking = false;
$('.vamoAlSubibaja').mousedown(function() {
  clicking = true;  
});

$(document).mouseup(function() {
  clicking = false;  
})
var i = 0;
var y = 0;
$('.vamoAlSubibaja').mousemove(function(my) {
  if (clicking == false) {
    return
  } else {
    // change value
    if (my.pageY <= $(this).offset().top + $('.vamoAlSubibaja').css('width').replace('px', '') / 10) {
      y = parseInt($(this).val()) + 1;
      $('.movestatus').text('plus');
    } else {
      y = parseInt($(this).val()) - 1;
      $('.movestatus').text('minus');
    }
    $(this).val(parseInt(y));    
    i++;
  } 
});

<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" class="vamoAlSubibaja" id="change_value_up_down" />
<input type="text" value="5" class="vamoAlSubibaja" id="change_value_up_down2" />

<!-- only ref -->
<span class="clickstatus"></span>
<span class="movestatus"></span>