jQuery Drag and Drop减速

Question

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

我用jQuery拖放构建了一个简单的滑块.当滑块元素(可拖动元素)移动到某些位置时,图片会淡入.因此,如果您移动可拖动元素的速度不是太快,则看起来您可以使用滑块处理"图片动画".现在,我想减慢可拖动元素的速度.因此用户永远不能过快地拖动元素.

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

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

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

我希望有一个人可以帮助我 :)

Answer 1

啊! 最后一个有趣的jQuery问题.

这绝对可以实现.下面我解释了如何.如果您想直接进入演示,请单击此处.

我们假设您的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;

然后,您可以使用$('#bar').offset().leftin jQuery .fadeTo()(或其他)函数来更改您正在谈论的图像的不透明度.

这一切似乎都是微不足道的,但事实并非如此.尝试实现此问题时存在一些问题.例如:

当滑块达到最大滑动距离时,应停止动画或重置.您可以通过多种方式执行此操作,但我认为最简单的解决方案是编写一个更新变量的.mousedown/ .mouseuplistener,以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; });

我还实现了revert选项,draggable因此当用户发布时滑块很好地返回到零#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

我希望这可以帮助你 :)