<!doctype html>
<html lang="en">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Sortable - Display as grid</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
#sortable { list-style-type: none; margin: 0; padding: 0; width: screen.width; }
#sortable li { margin: 3px 3px 3px 0; padding: 1px; float: left; width: 100px; height: 90px; font-size: 4em; text-align: center; }
</style>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.2/jquery.ui.touch-punch.min.js"></script>
<script>
$( function() {
$('sortable').sortable({});
$( "#sortable" ).sortable();
$( "#sortable" ).disableSelection();
} );
</script>
<ul id="sortable">
<li id="item-1">
<a href="http://www.google.ca">
<img src="https://www.agentpestcontrol.net/wp-content/uploads/2016/07/icon_google-1-100x100.png"
alt=""> </a>
</li>
<li id="item-2”>
<a href="http://www.youtube.ca">
<img src="https://static1.squarespace.com/static/574e6d1b2b8dde5e3e9b9e61/t/576734b5b8a79b23388635ff/1466381888970/YouTube"> </a>
</li>
<li id="item-3”>
<a href="http://www.peelschools.org/Pages/default.aspx">
<img src=" http://www.peelschools.org/parents/register/PublishingImages/reg-regyourchild.jpg"
alt=""> </a>
</li>
<li id="item-4”>
<img src="https://sites.google.com/site/edwitlib/_/rsrc/1474581019221/home/google%20classroom.png"
alt=""> </a>
</li>
<li id="item-5”>
<a href="https://www.desmos.com/calculator">
<img src=" http://www.ipadvsoli.si/wp-content/uploads/2014/11/desmos_logo.png"
alt=""> </a>
</li>
<li id="item-6”>
<a href="https://www.icloud.com">
alt=""> </a>
</li>
<li id="item-7”>
alt=""> </a>
</li>
<li id="item-8”>
<a href="https://www.mathway.com/Algebra">
alt=""> </a>
</li>
<li id="item-9”>
alt=""> </a>
</li>
<li id="item-10”>
<a href="http://schools.peelschools.org/sec/rickhansen/Pages/default.aspx">
<img src="http://file2.answcdn.com/answ-cld/image/upload/w_200,h_200,c_fill,g_face:center,q_60/v1401250991/kdndmkvvunmmjm4mgtw6.png"style="max-height: 100px; max-width: 100px;"
alt="">
</a>
</li>
<li id="item-11”>
<a href="https://translate.google.ca">
<img src="https://screenshots.en.sftcdn.net/en/scrn/315000/315520/google-translate-550c411fc8f42-100x100.png"
alt=""> </a>
</li>
<li id="item-12”>
<a href="https://www.google.ca/maps/@43.600998,-79.6838765,15z">
<img src="http://www.agenciainformativaudem.com/wp-content/uploads/2015/10/new-google-maps-logo-107x107.png"
alt=""> </a>
</li>
<li id="item-13”>
<a href="http://www.dictionary.com">
alt=""> </a>
</li>
<li id="item-14”>
<a href="http://www.thesaurus.com">
alt=""> </a>
</li>
<li id="item-15”>
<a href="http://www.onelook.com/reverse-dictionary.shtml">
<img src="https://assets.materialup.com/uploads/239808bd-7d26-410b-96e0-7258e19dd2b5/j1sfzwBAFM-Oi_m_SC2tpK7NmtF6S8HPNptYdKmhzCKGMNDkTzUzYGIfN-xNyyhm1sY=w300"style="max-height: 100px; max-width: 100px;"
alt=""> </a>
</li>
<li id="item-16”>
<a href="http://www.zamzar.com">
<img src="http://i.utdstc.com/icons/120/zamzar.png"style="max-height: 100px; max-width: 100px;"
alt=""> </a>
</li>
<li id="item-17”>
<img src="http://followads.com/wp-content/uploads/2016/03/images-100x100.png"
alt=""> </a>
</li>
<li id="item-18”>
<a href="http://www.derivative-calculator.net">
<img src="http://lh4.ggpht.com/5utZtqoOSGkW8V3Ak4vFIedjP61IeBcuWY3gCdMrlEmtyj82K53gmRbZ_5zWAHYGm-tn=w100"
alt=""> </a>
</li>
<li id="item-19”>
alt=""> </a>
</li>
<li id="item-20”>
<img src="https://screenshots.en.sftcdn.net/en/scrn/69682000/69682746/google-sheets-05-100x100.png"
alt=""> </a>
</li>
<li id="item-21”>
<img src="http://c9.la2.download.9appsinstall.com:7080/group1/M02/D5/B4/qIYBAFh0H5-ATFaZAAAJBhttCx0627.png"
alt=""> </a>
</li>
<li id="item-22”>
<a href="https://scholar.google.ca">
<img src="https://researcholic.files.wordpress.com/2015/03/my-google-scholar.jpg"
alt=""> </a>
</li>
<li id="item-23”>
<a href="https://sites.google.com/khalsa.com/essayhelper">
<img src="http://c4.la2.download.9appsinstall.com:7080/group1/M02/A0/52/qIYBAFhA7XaAYwQ-AAAEcGeEUHI936.png"
alt=""> </a>
</li>
<li id="item-24”>
<a href="https://www.facebook.com">
alt=""> </a>
</li>
<li id="item-25”>
<a href="http://turnitin.com">
<img src="http://www.wiredprof.com/100/images/turnitin_logo.jpg"
alt=""> </a>
</li>
<li id="item-26”>
<a href="https://myblueprint.cahttps://myblueprint.ca">
<img src="http://cannexus.ca/wp-content/uploads/2017/01/blueprint.png"
alt=""> </a>
</li>
</ul>
<button id="save">Save</button>