*** CodePen Demo ***
SortableJS is a JavaScript library for building re-orderable drag and drop ui elements.
As an introduction to the library we’ll build a quiz that requires the user to correctly order a set of answers.
SortableJS can be downloaded from here or loaded via CDN.
<script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>
In this example we’ll ask the user to sort a list of F1 drivers by their number of Grand Prix victories.
Let’s get started by creating the following HTML list with the driver names:
<!-- index.html -->
<ul id="quiz">
<li>Ayrton Senna</li>
<li>Sebastian Vettel</li>
<li>Lewis Hamilton</li>
<li>Fernando Alonso</li>
<li>Michael Schumacher</li>
<li>Alain Prost</li>
</ul>
Next we initiate SortableJS, passing the id of our “quiz” element.
// script.js
new Sortable(quiz);
At this point you should be able to drag the list items to change the order in the browser.
Next we’ll add a button to the HTML that can be clicked to check if the answer is correct:
<!-- index.html -->
<button onclick="checkAnswer()">Check Answer</button>
Then define the correct order that the drivers need to be sorted:
// script.js
const correctAnswers = [
"Michael Schumacher",
"Lewis Hamilton",
"Sebastian Vettel",
"Alain Prost",
"Ayrton Senna",
"Fernando Alonso",
];
In the checkAnswer function we push the users answer to an array and then compare with the correctAnswers.
// script.js
function checkAnswer() {
const li = document.querySelectorAll("#quiz li");
let answers = new Array();
li.forEach(function (text) {
answers.push(text.innerHTML);
});
if (JSON.stringify(correctAnswers) === JSON.stringify(answers)) {
alert("Correct :)");
} else {
alert("Try Again...");
}
}
Lastly we’ll add some basic styling and change the cursor style to indicate the list items are draggable.
/* style.css */
#quiz li {
display: block;
background-color: lightsteelblue;
padding: 10px;
border-bottom: 1px solid #fff;
cursor: move;
cursor: -webkit-grabbing;
}
#quiz li.sortable-chosen {
background-color: lightslategray;
}
Top comments (0)