开发类似Scratch的拖拽游戏时点击Reset按钮清空div内容失效问题

问题原因 #

• Reset按钮没有设置显示文本，页面上看不到可点击的按钮区域
• 页面重复引入两次jQuery，容易引发冲突导致事件绑定失效
• 可拖拽元素的标签写法不规范：<input type="button">属于单标签，额外加的</button>闭合标签会导致DOM结构解析异常
• 点击事件绑定到所有button元素上，逻辑不够精准，也容易被其他按钮行为干扰

修正方案 #

先调整HTML部分的错误：

1. 给Reset按钮添加显示文本，删除重复引入的jQuery CDN（保留head里的flask静态资源引入即可，若本地静态资源加载异常则保留CDN版本、删除head里的引入）
2. 修正可拖拽按钮的标签错误
3. 调整JS的事件绑定逻辑，直接绑定到id为reset的按钮上

修正后的完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>Play Maze - Zoom Zoom</title>
    <script src="{{ url_for('static',filename='vendor/jquery/jquery.min.js') }}"></script>
    <script src="{{ url_for('static',filename='js/sb-admin-2.min.js') }}"></script>
</head>
<body id="page-top">
    <div id="wrapper">
        <ul class="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion" id="accordion_sidebar">
        <!-- Commands -->
            <a class="sidebar-brand d-flex align-items-center justify-content-center">
                <div class="sidebar-brand-icon rotate-n-15"><i class="fas fa-laugh-wink"></i></div>
                <div class="sidebar-brand-text mx-3">Commands</div>
            </a>
            <div class="commands">
                <div class="draggable">
                    <input type="button" class="btn-forward" id="forward" value="Forward" draggable="true">
                </div>
                <div class="draggable">
                    <input type="button" class="btn-backward" id="backward" value="Backward" draggable="true">
                </div>
                <div class="draggable">
                    <input type="button" class="btn-right" id="right" value="Right" draggable="true">
                </div>
                <div class="draggable">
                    <input type="button" class="btn-left" id="left" value="Left" draggable="true">
                </div>
                <div class="draggable">
                    <input type="button" class="btn-repeat" id="repeat" value="Repeat" draggable="true">
                </div>
            </div>
        </ul>
        <!-- Begin Page Content -->
        <div class="container-fluid">
            <div class="row">
                <div class="col-xl-12 col-lg-12">
                    <div class="card shadow mb-4">
                        <div class="card-body">
                            <div class="row">
                                <div class="col">
                                    <div class="container" id="commands"></div>
                                    <button id="reset" class="btn btn-lg btn-primary">Reset</button>
                                </div>
                            </div>
                        </div> 
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        $(document).ready(function() {
            $("#reset").click(function() {
                $("#commands").empty();
            });
        });
    </script>
</body>
</html>

如果需要实现完整拖拽功能，还需要补充拖拽相关的事件监听代码，目前你提供的代码里没有处理拖拽放置的逻辑，拖拽完成后元素不会插入到#commands容器里，后续补充dragstart、dragover、drop相关的事件处理即可。

内容的提问来源于stack exchange，提问作者Christian Chim