Javascript 如何允许用户使用按钮或把手上下移动div？

我允许我的web应用程序中的用户为其他用户创建测验。他们可以通过单击按钮将问题（

div

s）添加到

quizList

列表中。我希望这些用户能够按照他们想要的顺序重新定位他们的问题，这样如果他们不喜欢顺序，就不必删除他们的问题

以下是如何动态创建问题：

function addMultipleChoice() {
    const questionId = Date.now();
    const quizList = document.getElementById('quizList');
    const newQuestion = document.createElement('li');

    const questionHeader = document.createElement('h1');
    questionHeader.classList = 'large-header';
    questionHeader.setAttribute('style', 'margin-top: 30px; margin-left: 0px');
    questionHeader.setAttribute('contenteditable', 'true');
    questionHeader.innerHTML = 'Untitled Question...'

    const questionSubheader = document.createElement('p');
    questionSubheader.classList = 'large-subheader';
    questionSubheader.setAttribute('contenteditable', 'true');
    questionSubheader.innerHTML = 'Enter a question description...'

    const answerField = document.createElement('div');

    const answerLabelA = document.createElement('label');
    answerLabelA.setAttribute('contenteditable', 'true');
    answerLabelA.innerHTML = 'Answer A'

    const answerInputA = document.createElement('input');
    answerInputA.setAttribute('type', 'radio');
    answerInputA.setAttribute('name', questionId)

    const answerLabelB = document.createElement('label');
    answerLabelB.setAttribute('contenteditable', 'true');
    answerLabelB.innerHTML = 'Answer B'

    const answerInputB = document.createElement('input');
    answerInputB.setAttribute('type', 'radio');
    answerInputB.setAttribute('name', questionId)

    const answerLabelC = document.createElement('label');
    answerLabelC.setAttribute('contenteditable', 'true');
    answerLabelC.innerHTML = 'Answer C'

    const answerInputC = document.createElement('input');
    answerInputC.setAttribute('type', 'radio');
    answerInputC.setAttribute('name', questionId)

    const answerLabelD = document.createElement('label');
    answerLabelD.setAttribute('contenteditable', 'true');
    answerLabelD.innerHTML = 'Answer D'

    const answerInputD = document.createElement('input');
    answerInputD.setAttribute('type', 'radio');
    answerInputD.setAttribute('name', questionId)

    quizList.appendChild(newQuestion);

    newQuestion.appendChild(questionHeader);
    newQuestion.appendChild(questionSubheader);
    newQuestion.appendChild(answerField);

    answerField.appendChild(answerInputA)
    answerField.appendChild(answerLabelA);

    answerField.appendChild(answerInputB)
    answerField.appendChild(answerLabelB);

    answerField.appendChild(answerInputC)
    answerField.appendChild(answerLabelC);

    answerField.appendChild(answerInputD)
    answerField.appendChild(answerLabelD);
};

下面是一个我试图在我的应用程序中实现的示例。这是一个与谷歌表单非常相似的概念：

---

这需要您深入研究HTML/JS的“拖放”功能。检查示例。“没那么难，但可能会让人头疼。”RenevanderLende明白了。谢谢你的资源！也许我会在这里发布一个最佳解决方案的答案。这需要你深入研究HTML/JS的“拖放”功能。检查示例。“没那么难，但可能会让人头疼。”RenevanderLende明白了。谢谢你的资源！也许我会在这里发布一个答案，并给出最佳解决方案。