javascript - jQuery 拖放速度变慢

Question

是否可以降低可拖动元素的速度？

我用 jQuery 拖放构建了一个简单的 slider 。当 slider 元素(可拖动元素)移动到特定位置时，图片会淡入。因此，如果您移动可拖动元素的速度不太快，看起来您可以使用 slider 处理“图片动画”。现在，我想放慢可拖动元素的速度。因此用户永远不能将元素拖得太快。

这是我的代码示例。

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

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

我希望有人能帮助我:)

Answer 1

啊!最后是一个有趣的 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 来更改您正在谈论的图像的不透明度。

这一切看似微不足道，但事实并非如此。尝试实现时存在一些问题。例如:

When the slider reaches the maximum sliding distance, it should stop animating or be reset. You can do this in multiple ways but I think the easiest solution is to write a .mousedown / .mouseup listener which updates a variable dragging, that keeps track whether the user is still trying to drag #bar. If it's not, reset #bar. If it is, keep the slider at the maximum distance until .mouseup is fired.

此外，您必须小心使用预定义的边框。

我建议的代码如下:

// 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 时， slider 会很好地返回到零。当然，您可以根据需要删除它。

Now the variable that your whole question is about is the variable: 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

因此，负值提供较慢的拖动速度，正值提供较快的拖动速度。 p>

不幸的是(或者实际上:幸运的是)无法改变鼠标指针的速度。这是因为只有操作系统可以控制鼠标坐标和速度。浏览器无法影响这一点。我个人认为这无关紧要:移动 slider 的速度比平时慢是您要达到的目标，因此您可以忽略鼠标指针。

---

要查看所有这些操作，我为您准备了一个可用的 jsFiddle:

DEMO

希望对你有所帮助:)