我如何允许用户使用按钮或抓手手柄上下移动div？

I am allowing my users in my web app to create quizzes for other users. They can add a question (divs) to the quizList list by clicking a button. I would like those users to be able to reposition their questions in the order they want so they don't have to delete their question if they don't like the order.

这是动态创建问题的方式：

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);
};

Here is an example of what I am trying to accomplish in my app. It is a very similar concept to Google Forms: https://imgur.com/a/YbPwAQb