是否有可能减慢可拖动元素的速度？jQuery拖放速度减慢

我有建立与jQuery拖放一个简单的滑块。当滑块元素（可拖动元素）移动到特定位置时，图片淡入。因此，如果您将可拖动元素的速度不太快，则您可以使用滑块处理“图片动画”。现在，我想减慢可拖动的元素。所以用户永远不能过快地拖动元素。

这是我的代码的一个例子。

$('.slider').mousemove(function(){ 

if($(this).position().left >= 0 && $(this).position().left <= 2) { 
    $('.slider_1').fadeIn(); 
    $('.slider_2').fadeOut(); 
} 
...

我希望有人能帮助我:)

来源

2014-11-05 user3715293

啊！最后是一个有趣的jQuery问题。

这绝对可以实现。下面我已经解释了如何。如果你想直接进入演示，click here。

让我们假设你的HTML的设置如下：

<div id="slider"> 
    <div id="bar"></div> 
</div>

凡酒吧是您单击并拖动实际的事情。

现在你需要做的是以下几点：

得到$('#bar').offset().left
明确指定的#bar位置可拖动拖动时，使用一些额外的变量SPEED

对于例如：

ui.position.left += (ui.offset.left - ui.originalPosition.left - leftOffset)*SPEED;

然后，您可以在jQuery的.fadeTo()（或其他）函数中使用$('#bar').offset().left来更改您正在讨论的图像的不透明度。

这一切似乎都很平凡，但事实并非如此。尝试实施时存在一些问题。例如：

当滑块达到最大滑动距离时，应停止动画或重置。为此，您可以通过多种方式，但我认为最简单的方法是写一个.mousedown/.mouseup监听器更新一个变量dragging，用于跟踪用户是否仍试图拖动#bar。如果不是，重置#bar。如果是，请将滑块保持在最大距离，直到.mouseup被触发。

而且，你一定要小心使用预定义的边界。

我建议的代码如下：

// Specify your variables here 
var SPEED = -0.6; 
var border = 1;   // specify border width that is used in CSS 
var fadeSpeed = 0;  // specify the fading speed when moving the slider 
var fadeSpeedBack = 500; // specify the fading speed when the slider reverts back to the left 

// Some pre-calculations 
var dragging = false; 
var slider = $('#slider'); 
var leftOffset = slider.offset().left + border; 
var adjustedSliderWidth = 0.5*slider.width(); 

// the draggable function 
$('#bar').draggable({ 
    axis: "x", 
    revert : function(event, ui) { 
      $(this).data("draggable").originalPosition = { 
       top : 0, 
       left : 0 
      }; 
      $('#image').fadeTo(fadeSpeedBack, 0); 
      return !event; 
     }, 
    drag: function (event, ui) { 
     var barOffset = $('#bar').offset().left - leftOffset; 
     if (barOffset >= 0) { 
      if (barOffset < adjustedSliderWidth) { 
       ui.position.left += (ui.offset.left - ui.originalPosition.left - leftOffset)*SPEED;  
      } else { 
       if (!dragging) { return false; } 
       else { ui.position.left = adjustedSliderWidth; } 
      } 
     } 
     // fading while moving: 
     $('#image').fadeTo(fadeSpeed, (ui.position.left/adjustedSliderWidth)); 

     // remove this if you don't want the information to show up: 
     $('#image').html(ui.position.left/adjustedSliderWidth 
         +"<br \><br \>" 
         +ui.position.left); 
    } 
}); 

// the mouse listener 
$("#bar").mousedown(function(){ dragging = true; }); 
$("#bar").mouseup(function(){ dragging = false; });

我还实施了draggable的revert选项，以便将滑块很好地返回到零。当用户释放#bar。当然，如果你愿意，你可以删除它。

现在，你的整个问题是关于变量是变量：SPEED。

您可以通过为此变量指定一个数字来指定拖动的速度。

例如为：

var SPEED = 0.0;   // the normal dragging speed 
var SPEED = 0.5;   // the dragging speed is 1.5 times faster than normal 
var SPEED = -0.5;  // the dragging speed is 0.5 times faster than normal

所以负值给出一个慢拖动速度和积极值给出一个更快拖动速度。

不幸的是（或者实际上：幸运的是），它是而不是可能改变鼠标指针的速度。这是因为只有操作系统可以控制鼠标坐标和速度。浏览器不能影响这一点。就我个人而言，我认为这并不重要：以比平常慢的速度移动滑块是您要实现的目标，因此您可以忽略鼠标指针。

要看到这一切的行动，我已经准备了一个工作的jsfiddle你：

DEMO

我希望这可以帮助你:)

来源

2014-11-05 12:20:11

jQuery拖放速度减慢

回答

DEMO

相关问题