Greetings! I have been attempting to achieve horizontal sorting for two divs but have encountered a couple of issues. Firstly, the divs do not align correctly upon initial page load and secondly, while they can be dragged around, the sortable functionality is not functioning as expected.
I tried modifying the jQuery example by including a float:left property on my two div elements.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Sortable - Default functionality</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: 60%; }
#sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; width:200px;cursor:pointer;}
#sortable li span { position: absolute; margin-left: -1.3em; }
</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>
$( function() {
$( "#myColumns" ).sortable();
$( "#sortable" ).disableSelection();
} );
</script>
</head>
<body>
<ul id="myColumns">
<li>
<div style="border:1px solid green;height:300px;width:200px;float:left;"></div>
</li>
<li>
<div style="border:1px solid red;height:300px;width:200px;float:left;"></div>
</li>
</ul>
</body>
</html>
Do you have any suggestions or solutions?
LATEST UPDATE I decided to try using bootstrap.css and here is the revised code that incorporates nested sortables in both horizontal and vertical orientations.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Sortable - Portlets</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="bootstrap.css">
<style>
.myCol {
height: 200px;
width: 250px;
border: 1px solid;
margin:20px;
padding:10px;
border-radius:5px;
overflow-y:auto;
background-color:#E6E6E6;
}
</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>
$(function() {
$("#myColumns").sortable({
handle:".handle"
});
$("#board1").sortable();
$("#board2").sortable();
$("#board3").sortable();
$("#board4").sortable();
$("#sortable").disableSelection();
});
</script>
</head>
<body>
<table>
<tR>
<td style="padding-top:10px;padding-left:40px;">
<div id="myColumns" class="row">
<div class="myCol">
<table width="100%">
<tr>
<td class="handle" bgcolor="gray">AA</td>
</tR>
<tr>
<td>
<ul id="board1">
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
</td>
</tr>
</table>
</div>
<div class="myCol">
<table width="100%">
<tr>
<td class="handle" bgcolor="gray">BB</td>
</tr>
<tr>
<td>
<ul id="board2">
<li>D</li>
<li>E</li>
<li>F</li>
</ul>
</td>
</tr>
</table>
</div>
<div class="myCol">
<table width="100%">
<tr>
<td class="handle" bgcolor="gray">CC</td>
</tr>
<tr>
<td>
<ul id="board3">
<li>G</li>
<li>H</li>
<li>I</li>
</ul>
</td>
</tr>
</table>
</div>
<div class="myCol">
<table width="100%">
<tr>
<td class="handle" bgcolor="gray">DD</td>
</tr>
<tr>
<td>
<ul id="board4">
<li>E</li>
<li>F</li>
<li>J</li>
</ul>
</td>
</tr>
</table>
</div>
</div>
</td>
</tR>
</table>
</body>
</html>