基于jQuery实现拖拽式填空题的功能问题求助

我来帮你搞定这两个内容互换的需求！先理清楚核心逻辑：不管是已填充空白框之间的拖拽，还是从答案列表拖到已填充框，核心都是精准记录拖拽来源和目标的原有内容，再做对应的数据交换。

修改后的完整可运行代码 #

直接替换你原来的代码就能实现需求，我还优化了一些交互体验细节：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<style>
span {
    width: 100px;
    display: inline-block;
    height: 20px;
    background: #ffffff;
    border: 1px solid #ccc; /* 加边框让空白框更明显 */
    text-align: center;
}
body {
    font: 13px Verdana;
}
ul {
    list-style: none;
    padding: 10px;
    background: yellow;
}
ul li {
    display: inline-block;
    margin: 0 10px;
    padding: 10px;
    background: rgb(0, 255, 213);
    cursor: grab; /* 提示可拖拽 */
}
p {
    padding: 10px;
    background: rgb(255, 145, 0);
}
.ui-state-highlight {
    background: #f0f9ff; /* 调整高亮样式更醒目 */
}
.ui-state-hover {
    border-color: #2196F3;
}
</style>

<ul>
    <li>one</li>
    <li>two</li>
    <li>three</li>
    <li>four</li>
    <li>five</li>
    <li>six</li>
</ul>
<p>hello <span></span>hello <span></span>hello <span></span></p>

<script>
$(document).ready(function() {
    // 让已填充的空白框也支持拖拽
    $("span").draggable({
        revert: "invalid",
        helper: "clone", // 用克隆元素拖拽，避免原元素中途消失
        start: function() {
            // 空的空白框禁止拖拽
            if ($(this).text().trim() === "") {
                $(this).draggable("disable");
            } else {
                $(this).draggable("enable");
            }
        }
    });

    $("span").droppable({
        accept: "ul > li, span", // 同时接受答案列表和空白框的拖拽
        classes: {
            "ui-droppable-hover": "ui-state-hover"
        },
        drop: function(event, ui) {
            const targetSpan = $(this);
            const draggedElement = ui.draggable;
            const draggedText = draggedElement.text().trim();
            const targetText = targetSpan.text().trim();

            // 场景1：从答案列表拖拽li到已填充空白框
            if (draggedElement.is("li")) {
                if (targetText !== "") {
                    // 把空白框原有内容放回答案列表
                    $("<li>").text(targetText).appendTo("ul").draggable({ revert: "invalid" });
                }
                // 将li内容填充到目标空白框
                targetSpan.text(draggedText).addClass("ui-state-highlight");
                // 移除原li（如果想保留答案列表的原选项，删掉这行即可）
                draggedElement.remove();
            }

            // 场景2：从一个已填充空白框拖拽到另一个空白框
            if (draggedElement.is("span")) {
                if (targetText !== "") {
                    // 互换两个空白框的内容
                    draggedElement.text(targetText).removeClass("ui-state-highlight");
                    targetSpan.text(draggedText).addClass("ui-state-highlight");
                } else {
                    // 目标空白框为空，直接移动内容
                    targetSpan.text(draggedText).addClass("ui-state-highlight");
                    draggedElement.text("").removeClass("ui-state-highlight");
                }
            }
        }
    });

    // 初始化答案列表的拖拽功能
    $("ul > li").draggable({
        revert: "invalid",
        helper: "clone"
    });
});
</script>

关键逻辑拆解 #

1. 空白框支持拖拽：给span添加draggable属性，并且在拖拽开始时判断内容是否为空，避免空框被拖拽。
2. 区分拖拽来源：通过is("li")和is("span")判断拖拽元素类型，分别处理两种场景：
   • 从li拖到已填充span：把span原有内容生成新li放回答案列表，再填充当前li的内容
   • 从span拖到span：目标有内容就互换文本，目标为空则直接移动内容
3. 优化交互体验：添加了边框、拖拽光标、高亮样式，让用户操作更直观

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