4

tengo este script que permite incrementar/decrementar el value de un input arratrando hacia arriba y hacia abajo con el click presionado. Pero necesito hacerlo funcion para poder agregarle esta funcionalidad a cualquier input tambien con un minimo y un maximo de rango de valor https://jsfiddle.net/iLen/ggqzb27f/3/

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

El codigo esta crudo, pero necesito que esto sea una funcion para hacerlo en cualquier input.

1 respuesta 1

1

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>

3
  • 1
    Gracias por el momento funciona bien, es lo que necesitaba
    – LΞИIИ
    Commented el 16 nov. 2016 a las 21:45
  • de nada hermano, ya luego vemos para hacerlo funcionar correctamente en Google Chrome :D
    – fredyfx
    Commented el 16 nov. 2016 a las 21:49
  • hola @fredyfx te cuento que no funciona correctamente en Chrome :/ en firefox funciona bien pero en crome no incrementa si esta fuera del input
    – LΞИIИ
    Commented el 17 nov. 2016 a las 17:33

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.