Sorting and Arranging

← Return
Click and Drop vs Drag and Drop
There are many situations where you might like to sort and arrange a list of items or images. One option is to use a 'drag and drop' procedure, but since my Javascript skills were not up to figuring that one out, I set up a much simpler 'click and drop' procedure, that still uses Javascript, but is understandable for a novice.
Example 1: Organize a list of names Click Here for Demo:
Example 2: Organize names with the option to select and delete Click Here for Demo
Example 3: Organize names with associated images Click here for Demo
Organize List of Names - Code
Download
CLICKDROP1/index.php ▾
<?php
session_start();
//Prevent to many submissions during session
if (isset ($_SESSION['clickdrop1-counter'])) {
$_SESSION['clickdrop1-counter'] ++;
}
else {
$_SESSION['clickdrop1-counter'] = 0;
}
include ("inc/header.php");
if ($_SESSION['clickdrop1-counter'] > 20) {
echo "<h4>Too many submissions during this session</h4>";
}
else {
echo "<h1>List of Cat Names</h1>";
$string = file_get_contents ("list.txt");
$array1 = explode (",", $string);
echo "<div class = 'half-column'>";
foreach ($array1 as $item1) {
echo "<div class = 'list'>";
echo $item1 ;
echo "</div>";
}
echo "</div><div class = 'half-column'>";
echo "<h3>Click <a href = 'organize-list.php'>HERE</a> to sort and organize this list ";
echo "</div>";
}
include ("inc/footer.php");
?>CLICKDROP1/list.txt ▾
Izzy,Tuna,Tanster,Ralph,Boris,Rosebud,Miss KittyCLICKDROP1/inc
footer.php ▾
<br><br><br>Copyright © <?php echo date('Y'); ?> Susan Rodgers, <a href = 'https://lilaavenue.com'>Lila Avenue</a><br><br>
</main>
<script src= 'inc/functions.js'></script>
</body>
</html> functions.js ▾
function slotClicked(id) {
//All slots, filled and empty
var slotarray = document.getElementsByClassName('slot');
if (slotarray[id].innerHTML !== "" ) {
//NON-EMPTY SLOT - item is saved and can be moved
nonEmptySlotClicked (id);
}
else {
//EMPTY SLOT - any previously saved items will be moved to selected location
emptySlotClicked (id);
}
}
function nonEmptySlotClicked(id){
//Column2 All slots, filled and empty
var slotarray = document.getElementsByClassName('slot');
//Column 2 - Input form checkboxes
var checkboxarray = document.getElementsByClassName('checkbox');
var saveditems = document.getElementById('saved-items').innerHTML;
var limit = slotarray.length;
var clickeditem = slotarray[id].innerHTML;
var newsaveditems = '';
//Change color of slot
if (document.getElementById(id).style.backgroundColor === 'blue') {
//Change color to back to grey
document.getElementById(id).style.backgroundColor = '#eee';
//remove item from saved items
newsaveditems = saveditems.replace (clickeditem + ',', '');
}
else {
//Add item to saved items
newsaveditems = saveditems + clickeditem + ',';
//Change color to blue
document.getElementById(id).style.backgroundColor = 'blue';
}
//Update saved resources in html
document.getElementById('saved-items').innerHTML = newsaveditems;
}
function emptySlotClicked (id) {
//Column2 All slots, filled and empty
var slotarray = document.getElementsByClassName('slot');
//Column 2 - Input form checkboxes
var checkboxarray = document.getElementsByClassName('checkbox');
var saveditems = document.getElementById('saved-items').innerHTML;
var limit = slotarray.length;
//make an array of saved items
var saveditemsArray = saveditems.split(',');
var savedlength = saveditemsArray.length;
//remove items with blue background from slot array
for ( i = 0; i < limit ; i++) {
if (slotarray[i].style.backgroundColor === 'blue') {
//remove contents of slot
slotarray[i].innerHTML = "";
checkboxarray[i].value = "";
}
}
//create array of non-empty slots
var updatedslotarray = new Array();
//Create updated slot array
for (i = 0; i < limit ; i++) {
if (i == id) {
//Place to start inserting
for (j = 0; j < savedlength; j++){
//insert saved items into updated slot array
if (saveditemsArray[j] !== ""){
//remove the comma
saveditemsArray[j] = saveditemsArray[j].replace (',' ,'');
updatedslotarray.push (saveditemsArray[j]);
}
}
}
else if (slotarray[i].innerHTML !== '') {
//Add remaining slot contents to updated slot array
updatedslotarray.push (slotarray[i].innerHTML);
}
}
//show updated resource list on page
//Show empty pink slot at top
document.getElementById('slots').innerHTML = "<div id = '0' class = 'slot pink' onclick = 'slotClicked(id)'></div><input class = 'checkbox' hidden type = 'checkbox' name = 'listarray[]' value = '' checked />" ;
//
var id = 1;
for (i = 0; i < updatedslotarray.length ; i++) {
if (updatedslotarray[i] !== "" ){
//Filled slot
document.getElementById('slots').innerHTML +=
"<div id = '" + id + "' class = 'slot' onclick = 'slotClicked(id)'>" + updatedslotarray[i] + "</div><input class = 'checkbox' hidden type = 'checkbox' name = 'listarray[]' value = '" + updatedslotarray[i] + "' checked />";
id++;
//empty slot
document.getElementById('slots').innerHTML +=
"<div id = '" + id + "' class = 'slot pink' onclick = 'slotClicked(id)'></div><input class = 'checkbox' hidden type = 'checkbox' name = 'listarray[]' value = '' checked />" ;
id++;
}
}
//Return saved resources list to empty
document.getElementById('saved-items').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 rel= 'stylesheet' type='text/css' href= 'inc/style.css'>
</head>
<body>
<main>
<a class = 'return' href = '../../sorting-and-arranging'>← Return</a> <br>
style.css ▾
body {
font-family: "Arial", sans-serif;
text-align: center;
margin: 0 auto;
line-height: 140%;
}
a {
text-decoration: none;
}
h1, h2 {
letter-spacing: 1px;
}
h3 {
text-align: center;
}
main {
text-align: center;
background-color: white;
width: 900px;
max-width: 100%;
display: block;
margin: 20px auto;
}
.box {
border: 1px solid #bbb;
padding: 20px 0;
}
.slot {
display: block;
padding: 5px;
border: 1px solid #bbb;
margin: 5px auto;
max-width: 100%;
font-size: .9em;
cursor: pointer;
background-color: #eee;
width: 160px;
}
.pink {
background-color: pink;
}
.content-column, .sidebar-column {
display: inline-block;
padding: 20px;
box-sizing: border-box;
vertical-align: top;
text-align: center;
max-width: 100%;
}
.content-column {
width: 75%;
}
.sidebar-column {
width: 25%;
}
.submitbutton, .adminbutton {
background-color: darkmagenta;
color: white;
padding: 10px;
border: 1px solid purple;
border-radius: 4px;
font-size: 1em;
font-weight: bold;
width: 120px;
cursor: pointer;
display: block;
margin: auto;
cursor: pointer;
}
.submitbutton:hover {
background-color: darkblue;
}
.adminbutton {
background-color: darkblue;
}
a.adminbutton:hover {
background-color: purple;
}
#saved-resources {
display: block;
}
.list {
padding: 10px;
background-color: #ddd;
margin: 5px auto;
display: block;
width: 160px;
}
@media only screen and (max-width: 700px) {
.content-column, .sidebar-column {
width: 100%;
}
}Organize and Select List of Names - Code
Download
CLICKDROP2/index.php ▾
<?php
session_start();
//Prevent to many submissions during session
if (isset ($_SESSION['clickdrop2-counter'])) {
$_SESSION['clickdrop2-counter'] ++;
}
else {
$_SESSION['clickdrop2-counter'] = 0;
}
include ("inc/header.php");
echo "<h1>List of Cat Names</h1>";
if ($_SESSION['clickdrop2-counter'] > 20 ){
echo "<h4>Too many submissions during this session</h4>";
}
else {
$string = file_get_contents ("list.txt");
$array1 = explode (",", $string);
echo "<div class = 'half-column'>";
foreach ($array1 as $item1) {
echo "<div class = 'list'>";
echo $item1 ;
echo "</div>";
}
echo "</div><div class = 'half-column'>";
echo "<h3>Click <a href = 'organize-list.php'>HERE</a> to update this list ";
echo "</div>";
}
include ("inc/footer.php");
?>CLICKDROP2/organize-list.php ▾
<?php
$string = file_get_contents ("list.txt");
$array1 = explode (",", $string);
$length = sizeof ($array1);
$limit = ($length * 2) + 1;
$listarray = array();
if ($_SERVER ["REQUEST_METHOD"] == "POST" ) {
if (isset($_POST['listarray'])) {
$listarray = $_POST['listarray'];
$listarray = array_filter ($listarray);
$string = implode (",", $listarray);
file_put_contents ("list.txt", $string);
$array1 = $listarray;
}
}
include ("inc/header.php");
?>
<h1>Organize List</h1>
<div class = 'box'>
<div class = 'third-column'>
<p><b>Available Items</b></p>
<p>Click to select<br>
<i>Outlined items currently on list</i></p>
<?php
include ('inc/display-available-items.php');
?>
</div><div class = 'third-column'>
<h2>LIST</h2>
<p>Click grey slot to select<br>
Click pink slot to insert</p>
<form method = 'post' action = 'organize-list.php'>
<div id= 'slots'>
<?php
//A checkbox array is created with odd numbered ides containing items from list and even numbered ides containing ''
$id = 0;
//Show initial empty slot - id 0, background color pink
echo "<div id = '" . $id . "' class = 'slot pink ' onclick = 'slotClicked(id)'></div>";
echo "<input class = 'checkbox' hidden type = 'checkbox' name = 'listarray[]' value = '' checked />" ;
$id = 1;
foreach ($array1 as $item) {
//Create 4 HTML elements:
//Create a div with a value from array1;
echo "<div id = '". $id . "' class = 'slot' onclick = 'slotClicked(id)'>" . $item;
echo "</div>";
//Create a checkbox with value = item
echo "<input class = 'checkbox' hidden type = 'checkbox' name = 'listarray[]' value = '" . $item . "' checked />" ;
$id++;
//Create an empty div - pink
echo "<div id = '" . $id . "' class = 'slot pink ' onclick = 'slotClicked(id)'></div>";
//Create a checkbox with value = ''
echo "<input class = 'checkbox' hidden type = 'checkbox' name = 'listarray[]' value = '' checked />" ;
$id++;
}
?>
</div>
<br><br><input class = 'submitbutton' type = 'submit' name = 'update' value='Update List'/>
</form>
</div><div class = 'third-column'>
<div class = 'deletebox' onclick = 'deleteBoxClicked()' >Click here to remove blue items </div><br><br>
<p><b>Saved Items:</b></p>
<div id = 'saved-items'></div>
<br><a class = 'adminbutton' href = 'index.php'>Display List</a>
</div>
</div>
<?php
include ("inc/footer.php");
?>
CLICKDROP2/list.txt ▾
Ralph,Miss Kitty,Izzy,Rosebud,Delilah,Boris,Tanster,Tuna,SqueekieCLICKDROP2/available.txt ▾
Tuna,Miss Kitty,Ralph,Rosebud,Izzy,Tanster,Boris,Delilah,Squeekie,Chocolate Chippy,Spice Girl,Scottie CLICKDROP2/inc
display-available-items.php ▾
<?php
$available = file_get_contents ('available.txt');
$availablearray = explode (',', $available);
$list = file_get_contents ("list.txt");
$listarray = explode (",", $list);
foreach ($availablearray as $id => $availableitem) {
if (in_array ($availableitem, $listarray)) {
echo "<div id = 'avail-" . $id . "' class = 'available highlighted' onclick = 'availableItemClicked(id)'>" . $availableitem;
}
else {
echo "<div id = 'avail-" . $id . "' class = 'available ' onclick = 'availableItemClicked(id)'>" . $availableitem;
}
echo "</div>";
}
?>
footer.php ▾
<br><br><br>Copyright © <?php echo date('Y'); ?> Susan Rodgers, <a href = 'https://lilaavenue.com'>Lila Avenue</a><br><br>
</main>
<script src= 'inc/functions.js'></script>
</body>
</html> functions.js ▾
function availableItemClicked(id) {
// Called when an item in Column 1 is clicked
var availablearray = document.getElementsByClassName('available');
//Save selected item
var saveditems = document.getElementById('saved-items').innerHTML;
var clickeditem = availablearray[id].innerHTML;
var newsaveditems = '';
//Item has already been selected - need to remove it from saved items
if (document.getElementById(id).style.backgroundColor === 'pink') {
document.getElementById(id).style.backgroundColor = '#eee';
newsaveditems = saveditems.replace (clickeditem + ',', '');
}
else {
newsaveditems = saveditems + clickeditem + ',';
document.getElementById(id).style.backgroundColor = 'pink';
}
//Update saved items in html
document.getElementById('saved-items').innerHTML = newsaveditems;
}
function slotClicked(id) {
//All slots, filled and empty
var slotarray = document.getElementsByClassName('slot');
if (slotarray[id].innerHTML !== "" ) {
//NON-EMPTY SLOT - item is saved and can be moved
nonEmptySlotClicked (id);
}
else {
//EMPTY SLOT - any previously saved items will be moved to selected location
emptySlotClicked (id);
}
}
function nonEmptySlotClicked(id){
//Column2 All slots, filled and empty
var slotarray = document.getElementsByClassName('slot');
//Column 2 - Input form checkboxes
var saveditems = document.getElementById('saved-items').innerHTML;
var clickeditem = slotarray[id].innerHTML;
var newsaveditems = '';
//Change color of slot
if (document.getElementById(id).style.backgroundColor === 'blue') {
//Change color to back to grey
document.getElementById(id).style.backgroundColor = '#eee';
//remove item from saved items
newsaveditems = saveditems.replace ( clickeditem + ',', '');
}
else {
//Add item to saved items
newsaveditems = saveditems + clickeditem + ',';
//Change color to blue
document.getElementById(id).style.backgroundColor = 'blue';
}
//Update saved items in html
document.getElementById('saved-items').innerHTML = newsaveditems;
}
function emptySlotClicked (id) {
//Column2 All slots, filled and empty
var slotarray = document.getElementsByClassName('slot');
//Column 2 - Input form checkboxes
var checkboxarray = document.getElementsByClassName('checkbox');
var saveditems = document.getElementById('saved-items').innerHTML;
var limit = slotarray.length;
//make an array of saved items
var saveditemsArray = saveditems.split(',');
var savedlength = saveditemsArray.length;
//remove items with blue background from slot array
for ( i = 0; i < limit ; i++) {
if (slotarray[i].style.backgroundColor === 'blue') {
//remove contents of slot
slotarray[i].innerHTML = "";
checkboxarray[i].value = "";
}
}
//create array of non-empty slots
var updatedslotarray = new Array();
//Create updated slot array
for (i = 0; i < limit ; i++) {
if (i == id) {
//Place to start inserting
for (j = 0; j < savedlength; j++){
//insert saved items into updated slot array
if (saveditemsArray[j] !== ""){
//remove the comma
saveditemsArray[j] = saveditemsArray[j].replace (',' ,'');
updatedslotarray.push (saveditemsArray[j]);
}
}
}
else if (slotarray[i].innerHTML !== '') {
//Add remaining slot contents to updated slot array
updatedslotarray.push (slotarray[i].innerHTML);
}
}
//Remove pink backgrounds in available list
var availablearray = document.getElementsByClassName('available');
for (i = 0; i< availablearray.length; i++){
availablearray[i].style.backgroundColor = '#eee';
}
//Show empty pink slot at top
document.getElementById('slots').innerHTML = "<div id = '0' class = 'slot pink' onclick = 'slotClicked(id)'></div><input class = 'checkbox' hidden type = 'checkbox' name = 'listarray[]' value = '' checked />" ;
//
var id = 1;
for (i = 0; i < updatedslotarray.length ; i++) {
if (updatedslotarray[i] !== "" ){
//Filled slot
document.getElementById('slots').innerHTML +=
"<div id = '" + id + "' class = 'slot' onclick = 'slotClicked(id)'>" + updatedslotarray[i] + "</div><input class = 'checkbox' hidden type = 'checkbox' name = 'listarray[]' value = '" + updatedslotarray[i] + "' checked />";
id++;
//empty slot
document.getElementById('slots').innerHTML +=
"<div id = '" + id + "' class = 'slot pink' onclick = 'slotClicked(id)'></div><input class = 'checkbox' hidden type = 'checkbox' name = 'listarray[]' value = '' checked />" ;
id++;
}
}
//Set saved items list to empty
document.getElementById('saved-items').innerHTML = "";
}
function deleteBoxClicked() {
//Column2 All slots, filled and empty
var slotarray = document.getElementsByClassName('slot');
//Column 2 - Input form checkboxes
var checkboxarray = document.getElementsByClassName('checkbox');
var limit = slotarray.length;
//Remove item with blue background
for (var i = 0; i < limit ; i++) {
if (slotarray[i].style.backgroundColor === 'blue') {
//remove contents of slot
slotarray[i].innerHTML = "";
checkboxarray[i].value = "";
slotarray[i].style.display = 'none';
}
}
//remove item from saved items
document.getElementById('saved-items').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 rel= 'stylesheet' type='text/css' href= 'inc/style.css'>
</head>
<body>
<main>
<a class = 'return' href = '../../sorting-and-arranging'>← Return</a> <br>
style.css ▾
body {
font-family: "Arial", sans-serif;
text-align: center;
margin: 0 auto;
line-height: 140%;
}
h1, h2 {
letter-spacing: 1px;
}
a {
text-decoration: none;
}
main {
text-align: center;
background-color: white;
width: 1100px;
max-width: 100%;
display: block;
margin: 20px auto;
}
.box {
border: 1px solid #bbb;
padding: 20px 0;
}
.slot, .available {
display: block;
padding: 5px;
border: 1px solid #bbb;
margin: 5px auto;
max-width: 100%;
font-size: .9em;
cursor: pointer;
background-color: #eee;
width: 160px;
}
.pink {
background-color: pink;
}
.highlighted {
border: 2px solid blue;
}
.deletebox {
color: white;
margin: 5px auto;
padding: 7px 12px;
font-size: 14px;
cursor: pointer;
text-align: center;
text-decoration: none;
background-color: blue;
width: 160px;
}
.content-column, .sidebar-column, .third-column {
display: inline-block;
padding: 20px;
box-sizing: border-box;
vertical-align: top;
text-align: center;
max-width: 100%;
}
.content-column {
width: 75%;
}
.sidebar-column {
width: 25%;
}
.third-column {
width: 33%;
}
.submitbutton, .adminbutton {
background-color: darkmagenta;
color: white;
padding: 10px;
border: 1px solid purple;
border-radius: 4px;
font-size: 1em;
font-weight: bold;
width: 120px;
cursor: pointer;
display: block;
margin: auto;
cursor: pointer;
}
.submitbutton:hover {
background-color: darkblue;
}
.adminbutton {
background-color: darkblue;
}
a.adminbutton:hover {
background-color: purple;
}
.list {
padding: 10px;
background-color: #ddd;
margin: 5px auto;
display: block;
width: 160px;
}
@media only screen and (max-width: 700px) {
.third-column, .content-column, .sidebar-column {
width: 100%;
}
}Organize Names and Images - Code
Download
CLICKDROP3/index.php ▾
<?php
session_start();
//Prevent to many submissions during session
if (isset ($_SESSION['clickdrop2-counter'])) {
$_SESSION['clickdrop3-counter'] ++;
}
else {
$_SESSION['clickdrop3-counter'] = 0;
}
include ("inc/header.php");
echo "<h1>List of Cat with Images</h1>";
if ($_SESSION['clickdrop3-counter'] > 20 ){
echo "<h4>Too many submissions during this session</h4>";
}
else {
$string = file_get_contents ("list.txt");
$array1 = explode (",", $string);
echo "<div class = 'half-column'>";
foreach ($array1 as $item1) {
echo "<div class = 'list'>";
echo $item1 ;
$imagefile = 'images/' . str_replace(' ', '-', $item1). '.jpg';
if (file_exists ($imagefile)){
echo "<br><img src = '" . $imagefile . "' alt = '" . $item1 . "' width= '80' /><br>";
}
echo "</div>";
}
echo "</div><div class = 'half-column'>";
echo "<h3>Click <a href = 'organize-list.php'>HERE</a> to update this list ";
echo "</div>";
}
include ("inc/footer.php");
?>
CLICKDROP3/organize-list.php ▾
<?php
$string = file_get_contents ("list.txt");
$array1 = explode (",", $string);
$length = sizeof ($array1);
$limit = ($length * 2) + 1;
$listarray = array();
if ($_SERVER ["REQUEST_METHOD"] == "POST" ) {
if (isset($_POST['listarray'])) {
$listarray = $_POST['listarray'];
$listarray = array_filter ($listarray);
$string = implode (",", $listarray);
$string = strip_tags ($string);
$string = htmlspecialchars ($string);
file_put_contents ("list.txt", $string);
$array1 = $listarray;
}
}
include ("inc/header.php");
?>
<h1>Organize List</h1>
<div class = 'box'>
<div class = 'third-column'>
<p><b>Available Items</b></p>
<p>Click to select<br>
<i>Outlined items currently on list</i></p>
<?php
include ('inc/display-available-items.php');
?>
</div><div class = 'third-column'>
<h2>LIST</h2>
<p>Click grey slot to select<br>
Click pink slot to insert</p>
<form method = 'post' action = 'organize-list.php'>
<div id= 'slots'>
<?php
//A checkbox array is created with odd numbered ides containing items from list and even numbered ides containing ''
$id = 0;
//Show initial empty slot - id 0, background color pink
echo "<div id = '" . $id . "' class = 'slot pink ' onclick = 'slotClicked(id)'></div>";
echo "<input class = 'checkbox' hidden type = 'checkbox' name = 'listarray[]' value = '' checked />" ;
$id = 1;
foreach ($array1 as $item) {
//Create 4 HTML elements:
//Create a div with a value from array1;
echo "<div id = '". $id . "' class = 'slot' onclick = 'slotClicked(id)'>" . $item;
$imagefile = 'images/' . str_replace(' ', '-', $item). '.jpg';
if (file_exists ($imagefile)){
echo "<br><img src = '" . $imagefile . "' alt = '" . $item . "' width= '80' /><br>";
}
echo "</div>";
//Create a checkbox with value = item
echo "<input class = 'checkbox' hidden type = 'checkbox' name = 'listarray[]' value = '" . $item . "' checked />" ;
$id++;
//Create an empty div - pink
echo "<div id = '" . $id . "' class = 'slot pink ' onclick = 'slotClicked(id)'></div>";
//Create a checkbox with value = ''
echo "<input class = 'checkbox' hidden type = 'checkbox' name = 'listarray[]' value = '' checked />" ;
$id++;
}
?>
</div>
<br><br><input class = 'submitbutton' type = 'submit' name = 'update' value='Update List'/>
</form>
</div><div class = 'third-column'>
<div class = 'deletebox' onclick = 'deleteBoxClicked()' >Click here to remove blue items </div><br><br>
<p><b>Saved Items:</b></p>
<div id = 'saved-items'></div>
<br><a class = 'adminbutton' href = 'index.php'>Display List</a>
</div>
</div>
<?php
include ("inc/footer.php");
?>
CLICKDROP3/list.txt ▾
Tuna,Miss Kitty,Ralph,Rosebud,IzzyCLICKDROP3/available.txt ▾
Tuna,Miss Kitty,Ralph,Rosebud,Izzy,Tanster,Boris,Delilah,Squeekie,Chocolate Chippy,Spice Girl,Scottie, CLICKDROP3/inc
display-available-items.php ▾
<?php
$available = file_get_contents ('available.txt');
$availablearray = explode (',', $available);
$list = file_get_contents ("list.txt");
$listarray = explode (",", $list);
foreach ($availablearray as $id => $availableitem) {
if (in_array ($availableitem, $listarray)) {
echo "<div id = 'avail-" . $id . "' class = 'available highlighted' onclick = 'availableItemClicked(id)'>" . $availableitem;
}
else {
echo "<div id = 'avail-" . $id . "' class = 'available ' onclick = 'availableItemClicked(id)'>" . $availableitem;
}
$imagefile = 'images/' . str_replace(' ', '-', $availableitem). '.jpg';
if (file_exists ($imagefile)){
echo "<br><img src = '" . $imagefile . "' alt = '" . $availableitem . "' width= '80' /><br>";
}
echo "</div>";
}
?> footer.php ▾
<br><br><br>Copyright © <?php echo date('Y'); ?> Susan Rodgers, <a href = 'https://lilaavenue.com'>Lila Avenue</a><br><br>
</main>
<script src= 'inc/functions.js'></script>
</body>
</html> functions.js ▾
function availableItemClicked(id) {
// Called when an item in Column 1 is clicked
var availablearray = document.getElementsByClassName('available');
//Save selected item
var saveditems = document.getElementById('saved-items').innerHTML;
var clickeditem = availablearray[id].innerHTML;
var newsaveditems = '';
//Item has already been selected - need to remove it from saved items
if (document.getElementById(id).style.backgroundColor === 'pink') {
document.getElementById(id).style.backgroundColor = '#eee';
newsaveditems = saveditems.replace (clickeditem + ',', '');
}
else {
newsaveditems = saveditems + clickeditem + ',';
document.getElementById(id).style.backgroundColor = 'pink';
}
//Update saved items in html
document.getElementById('saved-items').innerHTML = newsaveditems;
}
function slotClicked(id) {
//All slots, filled and empty
var slotarray = document.getElementsByClassName('slot');
if (slotarray[id].innerHTML !== "" ) {
//NON-EMPTY SLOT - item is saved and can be moved
nonEmptySlotClicked (id);
}
else {
//EMPTY SLOT - any previously saved items will be moved to selected location
emptySlotClicked (id);
}
}
function nonEmptySlotClicked(id){
//Column2 All slots, filled and empty
var slotarray = document.getElementsByClassName('slot');
//Column 2 - Input form checkboxes
var saveditems = document.getElementById('saved-items').innerHTML;
var clickeditem = slotarray[id].innerHTML;
var newsaveditems = '';
//Change color of slot
if (document.getElementById(id).style.backgroundColor === 'blue') {
//Change color to back to grey
document.getElementById(id).style.backgroundColor = '#eee';
//remove item from saved items
newsaveditems = saveditems.replace ( clickeditem + ',', '');
}
else {
//Add item to saved items
newsaveditems = saveditems + clickeditem + ',';
//Change color to blue
document.getElementById(id).style.backgroundColor = 'blue';
}
//Update saved items in html
document.getElementById('saved-items').innerHTML = newsaveditems;
}
function emptySlotClicked (id) {
var slotarray = document.getElementsByClassName('slot');
var limit = slotarray.length;
var checkboxarray = document.getElementsByClassName('checkbox');
var saveditems = document.getElementById('saved-items').innerHTML;
var saveditemsArray = saveditems.split(',');
var savedlength = saveditemsArray.length;
//remove items with blue background from slot array
for ( i = 0; i < limit ; i++) {
if (slotarray[i].style.backgroundColor === 'blue') {
//remove contents of slot
slotarray[i].innerHTML = "";
checkboxarray[i].value = "";
}
}
//create array of non-empty slots
var updatedslotarray = new Array();
//Create updated slot array
for (i = 0; i < limit ; i++) {
if (i == id) {
//Place to start inserting
for (j = 0; j < savedlength; j++){
//insert saved items into updated slot array
if (saveditemsArray[j] !== ""){
//remove the comma
saveditemsArray[j] = saveditemsArray[j].replace (',' ,'');
updatedslotarray.push (saveditemsArray[j]);
}
}
}
else if (slotarray[i].innerHTML !== '') {
//Add remaining slot contents to updated slot array
updatedslotarray.push (slotarray[i].innerHTML);
}
}
//Remove pink backgrounds in available list
var availablearray = document.getElementsByClassName('available');
for (i = 0; i< availablearray.length; i++){
availablearray[i].style.backgroundColor = '#eee';
}
//RECREATE SLOT ARRAY ON PAGE
//Show empty pink slot at top
document.getElementById('slots').innerHTML = "<div id = '0' class = 'slot pink' onclick = 'slotClicked(id)'></div><input class = 'checkbox' hidden type = 'checkbox' name = 'listarray[]' value = '' checked />" ;
//Continue adding new items from updated slot array
var id = 1;
for (i = 0; i < updatedslotarray.length ; i++) {
if (updatedslotarray[i] !== "" ){
//Filled slot
document.getElementById('slots').innerHTML +=
"<div id = '" + id + "' class = 'slot' onclick = 'slotClicked(id)'>" + updatedslotarray[i] + "</div><input class = 'checkbox ' hidden type = 'checkbox' name = 'listarray[]' value = '" + updatedslotarray[i] + "' checked />";
id++;
//empty slot
document.getElementById('slots').innerHTML +=
"<div id = '" + id + "' class = 'slot pink' onclick = 'slotClicked(id)'></div><input class = 'checkbox' hidden type = 'checkbox' name = 'listarray[]' value = '' checked />" ;
id++;
}
}
//Set saved items list to empty
document.getElementById('saved-items').innerHTML = "";
}
function deleteBoxClicked() {
//Column2 All slots, filled and empty
var slotarray = document.getElementsByClassName('slot');
//Column 2 - Input form checkboxes
var checkboxarray = document.getElementsByClassName('checkbox');
var limit = slotarray.length;
//Remove item with blue background
for (var i = 0; i < limit ; i++) {
if (slotarray[i].style.backgroundColor === 'blue') {
//remove contents of slot
slotarray[i].innerHTML = "";
checkboxarray[i].value = "";
slotarray[i].style.display = 'none';
}
}
//remove item from saved items
document.getElementById('saved-items').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 rel= 'stylesheet' type='text/css' href= 'inc/style.css'>
</head>
<body>
<main>
<a class = 'return' href = '../../sorting-and-arranging'>← Return</a> <br>
style.css ▾
body {
font-family: "Arial", sans-serif;
text-align: center;
margin: 0 auto;
line-height: 140%;
}
a {
text-decoration: none;
}
h1, h2 {
letter-spacing: 1px;
}
main {
text-align: center;
background-color: white;
width: 1100px;
max-width: 100%;
display: block;
margin: 20px auto;
}
.box {
border: 1px solid #bbb;
padding: 20px 0;
}
.slot, .available {
display: block;
padding: 5px;
border: 1px solid #bbb;
margin: 5px auto;
max-width: 100%;
font-size: .9em;
cursor: pointer;
background-color: #eee;
width: 160px;
}
.pink {
background-color: pink;
}
.highlighted {
border: 2px solid blue;
}
.deletebox {
color: white;
margin: 5px auto;
padding: 7px 12px;
font-size: 14px;
cursor: pointer;
text-align: center;
text-decoration: none;
background-color: blue;
width: 160px;
}
.content-column, .sidebar-column, .third-column {
display: inline-block;
padding: 20px;
box-sizing: border-box;
vertical-align: top;
text-align: center;
max-width: 100%;
}
.content-column {
width: 75%;
}
.sidebar-column {
width: 25%;
}
.third-column {
width: 33%;
}
.submitbutton, .adminbutton {
background-color: darkmagenta;
color: white;
padding: 10px;
border: 1px solid purple;
border-radius: 4px;
font-size: 1em;
font-weight: bold;
width: 120px;
cursor: pointer;
display: block;
margin: auto;
cursor: pointer;
}
.submitbutton:hover {
background-color: darkblue;
}
.adminbutton {
background-color: darkblue;
}
a.adminbutton:hover {
background-color: purple;
}
.list {
padding: 10px;
background-color: #ddd;
margin: 5px auto;
display: block;
width: 160px;
}
@media only screen and (max-width: 700px) {
.content-column, .sidebar-column, .third-column {
width: 100%;
}
}CLICKDROP3/images
Boris.jpg ▾
��� JFIF ��&Exif II*
� � , � � � � ( 1 � 2 � i� %� r � gThumb 3.4.3 samsung SAMSUNG-SM-G930A H H G930AUCU4CRI2 2018:10:28 17:14:34 �� ~ �� � "� '� � � 0220� � � � � �
� � � �
� �
� � � � � �
� � |� b � � 0100� � � � , � T � � � � � � � H
� d 2018:10:28 17:14:34 2018:10:28 17:14:34 � � � d i���d
� d � d 0100 Z @ P D12QSJK01SM R98 0100 � � "