I want to make a jquery sortable dashboard for my users. The dashboard has blocks with different sizes. However if I move small blocks on the right of a big block, they sort correct, but the other side of the block they don’t.
preview dashboard
How can I fill the empty space with for example item 6?
Here’s my jsfiddle: Jsfiddle
<code>$(".grid")
.sortable({
connectWith: "li",
tolerance: "intersect",
opacity: 0.8,
dropOnEmpty: true,
revert: true,
placeholder: "placeholder",
forcePlaceholderSize: true,
refreshPositions: true,
forceHelperSize: true,
})
.disableSelection()</code>
<code>$(".grid")
.sortable({
connectWith: "li",
tolerance: "intersect",
opacity: 0.8,
dropOnEmpty: true,
revert: true,
placeholder: "placeholder",
forcePlaceholderSize: true,
refreshPositions: true,
forceHelperSize: true,
})
.disableSelection()</code>
$(".grid")
.sortable({
connectWith: "li",
tolerance: "intersect",
opacity: 0.8,
dropOnEmpty: true,
revert: true,
placeholder: "placeholder",
forcePlaceholderSize: true,
refreshPositions: true,
forceHelperSize: true,
})
.disableSelection()<code>body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
.grid {
margin: auto;
padding: 0;
width: 555px;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
overflow: hidden;
}
.grid li {
list-style: none;
border: 1px solid #CCC;
background: #F6F6F6;
font-family: "Tahoma";
color: #1C94C4;
margin: 5px;
padding: 5px;
height: 22px;
line-height: 80px;
float: left;
width: 254px;
height: 80px;
text-align: center;
}
#banner-message {
background: #fff;
border-radius: 4px;
padding: 20px;
font-size: 25px;
text-align: center;
transition: all 0.2s;
margin: 0 auto;
width: 300px;
}
button {
background: #0084ff;
border: none;
border-radius: 5px;
padding: 8px 14px;
font-size: 15px;
color: #fff;
}
#banner-message.alt {
background: #0084ff;
color: #fff;
margin-top: 40px;
width: 200px;
}
#banner-message.alt button {
background: #fff;
color: #000;
}</code>
<code>body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
.grid {
margin: auto;
padding: 0;
width: 555px;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
overflow: hidden;
}
.grid li {
list-style: none;
border: 1px solid #CCC;
background: #F6F6F6;
font-family: "Tahoma";
color: #1C94C4;
margin: 5px;
padding: 5px;
height: 22px;
line-height: 80px;
float: left;
width: 254px;
height: 80px;
text-align: center;
}
#banner-message {
background: #fff;
border-radius: 4px;
padding: 20px;
font-size: 25px;
text-align: center;
transition: all 0.2s;
margin: 0 auto;
width: 300px;
}
button {
background: #0084ff;
border: none;
border-radius: 5px;
padding: 8px 14px;
font-size: 15px;
color: #fff;
}
#banner-message.alt {
background: #0084ff;
color: #fff;
margin-top: 40px;
width: 200px;
}
#banner-message.alt button {
background: #fff;
color: #000;
}</code>
body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
.grid {
margin: auto;
padding: 0;
width: 555px;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
overflow: hidden;
}
.grid li {
list-style: none;
border: 1px solid #CCC;
background: #F6F6F6;
font-family: "Tahoma";
color: #1C94C4;
margin: 5px;
padding: 5px;
height: 22px;
line-height: 80px;
float: left;
width: 254px;
height: 80px;
text-align: center;
}
#banner-message {
background: #fff;
border-radius: 4px;
padding: 20px;
font-size: 25px;
text-align: center;
transition: all 0.2s;
margin: 0 auto;
width: 300px;
}
button {
background: #0084ff;
border: none;
border-radius: 5px;
padding: 8px 14px;
font-size: 15px;
color: #fff;
}
#banner-message.alt {
background: #0084ff;
color: #fff;
margin-top: 40px;
width: 200px;
}
#banner-message.alt button {
background: #fff;
color: #000;
}<code><script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<section>
<h2>Sortable Grid</h2>
<ul class="grid">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li style="height: 200px; display: list-item;">Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li style="height: 200px; display: list-item;">Item 7</li>
<li>Item 8</li>
</ul>
</section></code>
<code><script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<section>
<h2>Sortable Grid</h2>
<ul class="grid">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li style="height: 200px; display: list-item;">Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li style="height: 200px; display: list-item;">Item 7</li>
<li>Item 8</li>
</ul>
</section></code>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<section>
<h2>Sortable Grid</h2>
<ul class="grid">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li style="height: 200px; display: list-item;">Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li style="height: 200px; display: list-item;">Item 7</li>
<li>Item 8</li>
</ul>
</section>3