Question

你好

我目前正在开发一个与我很久以前发现的以下codepen非常相似的项目。这对Tinder一样重要;

在codepen中是以下JavaScript / jQuery：

function pullChange() {
    animating = true;
    deg = pullDeltaX / 10;
    $card.css("transform", "translateX("+ pullDeltaX +"px) rotate("+ deg +"deg)");

    var opacity = pullDeltaX / 100;
    var rejectOpacity = (opacity >= 0) ? 0 : Math.abs(opacity);
    var likeOpacity = (opacity <= 0) ? 0 : opacity;
    $cardReject.css("opacity", rejectOpacity);
    $cardLike.css("opacity", likeOpacity);
};

$(document).on("mousedown touchstart", ".demo__card:not(.inactive)", function(e) {
      if (animating) return;

      $card = $(this);
      $cardReject = $(".demo__card__choice.m--reject", $card);
      $cardLike = $(".demo__card__choice.m--like", $card);
      var startX = e.pageX || e.originalEvent.touches[0].pageX;

      $(document).on("mousemove touchmove", function(e) {
        var x = e.pageX || e.originalEvent.touches[0].pageX;
        pullDeltaX = (x - startX);
        if (!pullDeltaX) return;
        pullChange();
      });

      $(document).on("mouseup touchend", function() {
        $(document).off("mousemove touchmove mouseup touchend");
        if (!pullDeltaX) return; // prevents from rapid click events
        release();
      });
});

我想要实现的是实现两个按钮来“模拟”拖动鼠标。所以 - 如果你玩codepen - 你会发现可以左右拖动卡片。然后根据拖动的向左或向右的距离做出“喜欢”或“不喜欢”的决定。此外，如果您在一个方向上拖动卡片太远或太少，卡片将在释放后卡入设定点。

我想让用户选择点击“赞”或“不喜欢”按钮而不是拖动。点击其中一个按钮将执行与拖动卡片相同的操作。

这样做很简单吗？任何人都可以给我任何指导吗？我花了一些时间来处理这个问题，似乎无法让它发挥作用，所以任何帮助都会非常赞赏！

如果您需要更多数据或信息，请与我们联系。

谢谢！

Answer 1

你的问题遗漏了代码的重要部分; pullChange()和release()函数。由于这些是实际控制卡片移动的功能，因此您应该能够将它们绑定到按钮单击并稍加警告。 pullChange()使用DeltaX变量并期望它在那里告诉它移动多远，所以你需要手动设置它，因为没有拖动事件告诉它多远。

使用按钮“模拟”鼠标向上，鼠标移动和鼠标按下事件

1 个答案: