表单“提交按钮”不会滑动

Question

请您告诉我为什么滑动功能不起作用？

https://jsfiddle.net/lcoulon/51gn2v45/

即使我称之为CSS和jquery，它也不会滑入真正的HTML页面：

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" rel="stylesheet">
<link href="../css/slide-submit.css" rel="stylesheet">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>

我的最终目的是将此提交按钮集成到Bootstrap4网页模板中。

非常感谢你的帮助，

Answer 1

首先，在JSfiddle示例问题是链接。 在这里（经过几次尝试）working example

其次，或者您的网站似乎忘了添加滑块处理代码。 正如你所说，控制台没有错误，所以我只是试图直接添加代码

（上面只有这一部分，看它是否会改变一些东西）

    /*!
 * Slide to submit button
 */

 $(".slide-submit button").draggable({cancel: false, containment: "parent", axis: "x", stop: function() {
  if (($(this).parent().width() / 2) === ($(this).position().left + 8)) {
    $(this).css({left: "auto", right: 0}).addClass("submitted").text("Submitting...").draggable('false');
    $(this).closest("form").submit();
  } else {
    $(this).css({left: 0});
  }
}}).on("click", function() {
  return false;
});

它看起来很有效（recorded animation here）