Click and Drop Sorting
An Alternative to Drag and Drop
This application is a simple javascript alternative to a drag and drop application. The code is in PHP with 2 Javascript functions - one that is called wihen a list item is selected and the other when the item is inserted into a new position. For this example, the items to be sorted are are elements in a comma-separated text file.Try the Demo
Files and Folders for this demo:
View Code
Files:
footer.php ▾
<br><br><br>Copyright © <?php echo date('Y'); ?> Susan Rodgers, <a href = 'https://lilaavenue.com'>Lila Avenue</a><br><br>
<script src= 'functions.js'></script>
</main>
</body>
</html> functions.js ▾
function selectBlock(id) {
var array1 = document.getElementsByClassName('sort');
if (array1.length > 0) {
if (id in array1) {
if ( array1[id].innerHTML !== "" && document.getElementById('open-slot').innerHTML === "" ) {
document.getElementById('open-slot').innerHTML = array1[id].innerHTML;
array1[id].innerHTML = "";
}
}
}
}
function insertBlock(id) {
//array1 - Upper boxes have class of 'sort'
var array1 = document.getElementsByClassName('sort');
//array2 - Lower boxes have class = 'sort2'
var array2 = document.getElementsByClassName('sort2');
//array3 - All boxes have class of 'sort3'
var array3 = document.getElementsByClassName('sort3');
//array4 - Input fields have class of 'sort4'
var array4 = document.getElementsByClassName('sort4');
var newarray = new Array;
//check that there is a value in open slot
if (document.getElementById('open-slot').innerHTML !== "") {
array2[id].innerHTML = document.getElementById('open-slot').innerHTML;
//move non-empty values into newarray - check both upper and lower boxes
newarray[0] = "";
var j = 1;
var i;
for (i = 0; i < array3.length; i++) {
if (i === 0) {
newarray[j] = "";
}
else {
if (array3[i].innerHTML !== "" ) {
newarray[j] = array3[i].innerHTML;
j++;
}
}
}
//return values to array1
for (i = 0; i < array1.length; i++) {
array1[i].innerHTML = newarray[i];
}
//copy to array4
for (i = 0; i < array4.length; i++) {
array4[i].value = newarray[i];
}
//set open slot to empty
document.getElementById('open-slot').innerHTML = "";
array2[id].innerHTML = "";
}
}
header.php ▾
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Click and Drop</title>
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Elsie" rel="stylesheet">
<link rel= 'stylesheet' type='text/css' href= 'style.css'>
</head>
<body>
<main>
<a class = 'return' href = '../../index.php?page=click-and-drop-sorting'>← Return to Project</a>
<h2>List of Cats</h2> index.php ▾
<?php
include ("header.php");
$string = file_get_contents ("list.txt");
$array1 = explode (",", $string);
foreach ($array1 as $item1) {
echo "<div class = 'list'>";
echo $item1 ;
echo "</div>";
}
echo "<br><br><a class = 'button' href = 'organize-list.php'>Organize List</a>";
include ("footer.php");
?> list.txt ▾
Ralph,Tuna,Rosebud, Izzy,Miss Kitty,Boris,Tanster organize-list.php ▾
<?php
include ("header.php");
$string = file_get_contents ("list.txt");
$array1 = explode (",", $string);
if ($_SERVER ["REQUEST_METHOD"] == "POST" ) {
if (isset($_POST['sortedarray'])) {
$sortedarray = $_POST['sortedarray'];
$string = implode (",", $sortedarray);
$string = trim ($string, ",");
file_put_contents ("list.txt", $string);
$array1 = array_values (array_filter ($sortedarray));
}
}
?>
<div class = 'half-column'>
<form method = 'post' action = 'organize-list.php'>
<?php
array_unshift($array1 , '');
foreach ($array1 as $id => $item1){
echo "<div id = '" . $id . "' >";
echo "<div class = 'sort sort3' onclick = 'selectBlock(" . $id . ")'>" . $item1 . "</div>";
echo "<div class = 'sort2 sort3' onclick = 'insertBlock(". $id . ")'></div>";
echo "<input class = 'hidden sort4' type = 'checkbox' name = 'sortedarray[]' value = '" . $item1 . "' checked />" ;
echo "</div>";
}
?>
<br><br><input type = 'submit' name = 'update' value='Update List'/>
</form>
</div><div class = 'half-column'>
<h3>Organize List</h3><br>
(Click a nane in a shaded block,<br> then click a white block to insert)<br>
<h4>Item to Insert:</h4>
<div id = 'open-slot'></div>
<br><br>
<a class = 'button' href = 'index.php'>View List</a>
</div>
<?php include ("footer.php");
style.css ▾
body {
font-family: "Lato", sans-serif;
text-align: center;
font-size: 1em;
margin: 0 auto;
background-color: #356335;
line-height: 170%;
}
h1, h2 {
font-family: 'Elsie', cursive;
letter-spacing: 1px;
}
main {
text-align: center;
background-color: white;
}
.sort, .sort2, .sort3 {
display: block;
padding: 5px;
border: 1px solid #bbb;
margin: 5px auto;
max-width: 100%;
width: 120px;
cursor: pointer;
}
.sort {
background-color: #eee;
}
.sort2 {
padding-top: 10px;
padding-bottom: 10px;
}
.sort3 {
}
.hidden {
display:none;
}
.select-image {
cursor: pointer;
}
main {
width: 900px;
max-width: 100%;
display: block;
margin: auto;
}
.half-column {
display: inline-block;
width: 50%;
padding: 20px;
box-sizing: border-box;
vertical-align: top;
}
a.button:hover {
color: purple;
}
input {
background-color: darkmagenta;
color: white;
padding: 10px;
border: 1px solid purple;
border-radius: 4px;
font-size: 1em;
font-weight: bold;
width: 120px;
}
.button {
width: 120px;
background-color: #37376f;
border: 1px solid black;
border-radius: 4px;
padding: 10px;
margin: 20px auto;
text-decoration: none;
display: block;
}
a.button {
color: white;
font-weight: bold;
font-size: 1em;
font-weight: bold;
}
.list {
padding: 10px;
background-color: #ddd;
margin: 5px auto;
display: block;
width: 160px;
}
