1

Cómo puedo hacer que un Input de tipo Text cambie su valor cuando haga clic dentro de él y arrastre el mouse hacia arriba para aumentar el valor y hacia abajo para disminuir el valor. Sólo cuando el ratón se mueve hacia arriba y hacia abajo hace el cambio de valor de la entrada (validar min y max) Tengo esto, pero no puedo hacer que funcione como un deseo. miren el efecto que quiero hacer http://recordit.co/YJovptdj9f y esto es lo que tengo hasta ahora https://jsfiddle.net/pandeyvishal1986/ggqzb27f/ pero necesito que funcione solo cuando el click de mouse este presionado osea como arrastrando de arriba o abajo asi como el ejemplo puesto

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

1 respuesta 1

1

en la 5ta linea reemplaza:

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

Por:

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

Actualización:

Bug en Google Chrome arreglado mediante el reemplazado de

línea 34:

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

Por:

$(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>

Para mayor información sobre los eventos con el mouse en jQuery y aprender en sí la librería:

PD: si el idioma es una limitante, dale una patada espartana con algún traductor como Bing Translator, Google Translate, que traducen hasta del élfico :D y si inglés quieres aprender, aquí unas recomendaciones:

10
  • Hola! Estaría bien que ampliaras la respuesta con los cambios que has realizados ya que es complicado de saber que se ha hecho. Gracias! Un saludo. Commented el 16 nov. 2016 a las 19:31
  • 1
    complicado? bueno, ya que lo dices, vamos editando :D
    – fredyfx
    Commented el 16 nov. 2016 a las 19:33
  • Gracias @fredyfx, esta mejor, pero te lo comentaba porque los que andamos algo flojillos de js, nos viene bien que nos expliquen el porqué de los cambios, es decir, porque en este caso funciona mousedown mejor que mouseover? Gracias de nuevo! Commented el 16 nov. 2016 a las 19:38
  • 1
    de nada hermano @IdirOuhabMeskine, estamos para servir, gracias por tomarte el tiempo de comentar, agrego unos enlaces de utilidad en breve :D
    – fredyfx
    Commented el 16 nov. 2016 a las 19:39
  • al hacer eso funciona pero si dejo de tener presionado el click igualmente funciona, lo que quiero es que solo incremente/decremente solo cuando el click este sostenido, para darle efecto de arrastre al usuario, y si dejo de tener el click sostenido deje de incrementar/decrementar, necesito ayuda
    – LΞИIИ
    Commented el 16 nov. 2016 a las 19:55

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.