Skip to main content
asdasdasdasdasdasdasd
Origen Enlace

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

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

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;
});
se eliminaron 783 caracteres en el cuerpo
Origen Enlace
sioesi
  • 11.5k
  • 7
  • 26
  • 57
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+ ;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;
                });
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;
                });
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;
});
Origen Enlace

jQuery cambia valor de input text cuando arrastras el mouse arriba/abajo

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