Here is the current setup I have: http://www.bootply.com/sfLr2AJ7EU
The issue I am facing is with moving the image (id) boxes horizontally. While I have managed to make it work vertically, attempting to do so horizontally has been unsuccessful. The image can be moved, but dropping it in place is challenging. Additionally, when picking up the image with the mouse, it is grabbed about 6 CM away from the cursor.
Below are the jQuery and CSS code:
$(function () {
$("#sortable").sortable({
revert: true
});
});
ul.thumbnails {
overflow: auto;
list-style-image: none;
list-style-position: outside;
list-style-type: none;
padding: 0px;
margin: 0px; }
ul.thumbnails ul {
overflow: auto;
list-style-image: none;
list-style-position: outside;
list-style-type: none;
padding: 0px;
margin: 0px; }
ul.thumbnails li.group_title {
float: none; }
ul.thumbnails li {
margin: 0px 12px 12px 0px;
float: left; }
ul.thumbnails li .thumbnail {
padding: 6px;
border: 1px solid #dddddd;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none; }
ul.thumbnails li .thumbnail img {
-webkit-user-drag: none; }
ul.thumbnails li .thumbnail.selected {
background: #0088cc; }
And here is the HTML code:
<ul id="sortable" class="thumbnails">
<id id="output0">
<li>
<div class="thumbnail selected">
<img class="img-responsive" src="http://placehold.it/52&text=1" width="52" height="52">
</div>
</li>
</id>
<id id="output1">
<li>
<div class="thumbnail">
<img class="img-responsive" src="http://placehold.it/52&text=2" width="52" height="52">
</div>
</li>
</id>
<id id="output2">
<li>
<div class="thumbnail">
<img class="img-responsive" src="http://placehold.it/52&text=3" width="52" height="52">
</div>
</li>
</id>
<id id="output3">
<li>
<div class="thumbnail">
<img class="img-responsive" src="http://placehold.it/52&text=4" width="52" height="52">
</div>
</li>
</id>
</ul>