Is there a way to swap the positions of the left and right boxes using the sortable() function from jQuery UI? It seems to work fine for numbers 1 and 2, but not for switching the boxes.
$(".sort-me").sortable({
connectWith: ".connectedSortable"
});.title {
background: red;
}
.storename {
background: blue;
}
.row {
margin-top: 1rem;
margin-bottom: 1rem;
}
/* metatag generator relevant */
...
... (CSS code continues) ...
...
... <link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/js/all.min.js"></script>
<div class="container">
<!-- Title -->
<div class="row">
<div draggable="true" class="sort-me title connectedSortable">
<div class="col-md-3">
<div class="mg-item-inner">
...
... (HTML code continues) ...
... Here is the link to the code on jsFiddle
What could be causing the issue with sorting the boxes? Could it possibly be a CSS problem?