上下拖动鼠标时jQuery更改值输入

Question

当您在输入类型文本中单击并向上拖动鼠标以增加值并向下拖动以减小值时，如何使输入类型文本更改其值。只有当鼠标上下移动时，输入的值才会改变（验证最小值 y 最大值）我有这个但我不能让它如愿以偿。

JSBin Example

var clicking = false;
$('#change_value_up_down').mousedown(function(){
    clicking = true;
    $('.clickstatus').text('mousedown');
});
var i = 0;
var y = 0;
$('#change_value_up_down').mousemove(function(my){
    if(clicking === false) return;

    // change value
    y = my.pageY - this.offsetTop;
    $(this).val(y);

    // Mouse click + moving logic here
    $('.movestatus').text('mouse moved ' + i);
  i++;
});
$('.selector').mouseup(function() {
  i = 0;
});

Answer 1

你也可以使用fiddle：

JS：

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

Answer 2

Working fiddle.

我认为您想要类似以下示例的内容。

var down = false;
var my = $("#change_value_up_down").offset().top;
var counter;

$(document).mousedown(function() {
  down = true;
}).mouseup(function() {
  down = false;  
  clearInterval(counter);
});

$("#change_value_up_down").mouseenter(function(e) {
  clearInterval(counter);
})

$("#change_value_up_down").mouseout(function(e) {
  var current_value = $(this).val();
  var self = $(this);

  if(down) {
    if(e.clientY<my) {
       counter = setInterval(function(){
          self.val(current_value++);
       },300);
    }else{
      counter = setInterval(function(){
          self.val(current_value--);
       },300);
    }
  }
});

希望这会有所帮助。

var down = false;
var speed = 100;
var my = $("#change_value_up_down").offset().top;
var counter;

$(document).mousedown(function() {
  down = true;
}).mouseup(function() {
  down = false;  
  clearInterval(counter);
});
$("#change_value_up_down").mouseenter(function(e) {
  clearInterval(counter);
})

$("#change_value_up_down").mouseout(function(e) {
  var current_value = $(this).val();
  var self = $(this);
  
  if(down) {
    if(e.clientY<my) {
       counter = setInterval(function(){
       		self.val(current_value++);
       },speed);
    }else{
      counter = setInterval(function(){
       		self.val(current_value--);
       },speed);
    }
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<br><br>
<br><br>
<input type="text" value=5 id="change_value_up_down" size="2" style="cursor:n-resize;"/>

Answer 3

我可以在它制作的另一种语言的帖子中找到答案，目前非常有效。

https://es.stackoverflow.com/questions/34265/jquery-funcion-que-permita-a-n-numeros-de-inputs-hacer-incremento-decremento-por/