Flask：使用滑块提交表单答案

【问题标题】：Flask: Submit a form using a sliderFlask：使用滑块提交表单
【发布时间】：2021-08-13 22:43:33
【问题描述】：

在烧瓶中，如何创建这样的“要提交的幻灯片”？

我加了

<script src="http://code.jquery.com/jquery-1.10.2.js"></script>  
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

在我的base.html 中的<head> 标记中，并使用上面小提琴中的jquery 使其工作。有趣的是，这行得通 -

<script src="http://code.jquery.com/jquery-1.10.2.js"></script>  
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>  
<script>
 
        $(".slide-submit button").html("test"); //test

</script>

但这不是

<script src="http://code.jquery.com/jquery-1.10.2.js"></script>  
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>  
<script>
 
        $(".slide-submit button").draggable();

</script>

【问题讨论】：

这里有什么帮助吗？
您是否包含了您在第 2 点中提到的插件？
你能告诉我们相关的HTML代码吗？
@0stone0 是的，我做到了
@GeomanYabes - 你想看哪个文件？它很大，可能大部分都无关紧要，

标签： javascript python html jquery flask

【解决方案1】：

例如，您的控制台错误是未知的，因此我假设您错误地使用了可拖动功能

根据this码笔链接的文档（你提到的）正确使用该功能的方法如下

$(".slide-submit button").draggable({
    cancel: false,
    containment: "parent",
    axis: "x", 
    stop: function() 
    {
        //this segment is optional replace with your own instructions
        //the condition is used to check if sliding was done till end
        if (($(this).parent().width() / 2) === ($(this).position().left + 8))
        {
            $(this).css({left: "auto", right: 0})
            .addClass("submitted") //to change UI design to something else
            .text("Submitting...") // to tell user be patience data is being sent
            .draggable('false'); // disable dragging while sending operation
            $(this).closest("form").submit(); //actually submit the form
        } 
        else 
        {
            $(this).css({left: 0});
            //if sliding was stoped by user but it was not near the end then reset position of slider to the start
        }
    }}).on("click", function() 
    {
        return false;
    });

在上述函数中设置了以下内容并且是强制性的，否则您将无法在幻灯片事件中使用按钮

设置属性是否可以取消
设置拖动轴，例如X 或 Y
告知用户已停止拖动或滑动的功能（重要）
在第一次交互时调用并取消按钮默认行为的点击函数

【讨论】：