How to Dynamically Reorder Element Position in JavaScript

Submitted by razormist on Monday, June 12, 2023 - 23:21.

How to Dynamically Reorder Element Position in JavaScript

Introduction

In this tutorial we will create a How to Dynamically Reorder Element Position in JavaScript. This tutorial purpose is to teach how you can reorder an element position. This will tackle all the important functionality that will reorder you current element. I will provide a sample program to show the actual coding of this tutorial.

This tutorial is simple and easy to understand just follow the instruction I provided and you can do it without a problem. This program can be use to any system or application if you to have a reorder function. I will give my best to provide you the easiest way of creating this program Reorder Element Position. So let's do the coding.

Before we get started:

Here is the link for the template that i used for the layout design https://getbootstrap.com/.

Creating The Interface

This is where we will create a simple interface for our application. This code will only display the html list and button to trigger an event. To create this simply copy and write it into your text editor, then save it as index.html.

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1"/>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
	</head>
<body onload="displayItem();">
	<nav class="navbar navbar-default">
		<div class="container-fluid">
			<a class="navbar-brand">Sourcecodester</a>
		</div>
	</nav>
	<div class="col-md-3"></div>
	<div class="col-md-6 well">
		<h3 class="text-primary">How to Dynamically Reorder Element Position</h3>
		<hr style="border-top:1px dotted #ccc;"/>
		<div class="col-md-12">
		<button class="btn btn-primary" type="button" onclick="reOrder()">Reorder</button>
		<br /><br />
		<div id="result"></div>
		</div>
	</div>
<script src="script.js"></script>	
</body>
</html>

Creating JavaScript Function

This is where the main function of the application is. This code reorder your current element when you click the button To do this just copy and write these block of codes inside the text editor and save it as script.js.

function displayItem(){
	var arr = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"];
	var html = "";
	for(var i=0; i<arr.length; i++){
		html += "<div width='200' height='200' style='border:1px solid #000; padding:30px; margin:15px; font-size:50px; float:left;'>"+arr[i]+"</div>";
	}
	html += "<br style='clear:both;'/>";
 
	document.getElementById('result').innerHTML = html;
}
 
function reOrder(){
	var arr = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"];
	var html = "";
	arrayRear(arr).forEach(function(item){
		html += "<div width='200' height='200' style='border:1px solid #000; padding:30px; margin:15px; font-size:50px; float:left;'>"+item+"</div>";
	})
	html += "<br style='clear:both;'/>";
 
	document.getElementById('result').innerHTML = html;
}
 
function arrayRear(arr) {
    for (var i = 0, rear = [], randomIndex = 0; i < arr.length; i++) {
        randomIndex = Math.floor(Math.random() *  arr.length);
        while (rear.indexOf(arr[randomIndex]) !== -1) {
            randomIndex = Math.floor(Math.random() *  arr.length);
        }
       rear.push(arr[randomIndex]);
    }
 
	return rear;
}

In the code provided we just created only one method called reOrder(), this function will immediately randomize the element position after your trigger the event. The code uses loops to loop through the index position of the elements. Then we use the random() and indexOf() to randomize the exact index position of the elements.

Output:

The How to Dynamically Reorder Element Position in JavaScript source code that I provide can be download below. Please kindly click the download button.

There you have it we successfully created How to Dynamically Reorder Element Position in JavaScript. I hope that this simple tutorial help you to what you are looking for. For more updates and tutorials just kindly visit this site. Enjoy Coding!

More Tutorials for JavaScript Language

JavaScript Tutorials

Add new comment

177 views

How to Dynamically Reorder Element Position in JavaScript