Trying to implement a draggable list that can be sorted using jQuery has been successful so far. However, when attempting to convert this list into a grid layout using CSS, the functionality of dragging and sorting stops working.
The HTML code is as follows:
<ul id="sortable2">
<li class="ui-state-highlight">A</li>
<li class="ui-state-highlight">B</li>
<li class="ui-state-highlight">C</li>
<li class="ui-state-highlight">D</li>
</ul>
<ul id="sortable">
<li class="ui-state-default">1</li>
<li class="ui-state-default">2</li>
<li class="ui-state-default">3</li>
</ul>
The script on the page is:
$(function() {
$("#sortable").sortable();
$("#sortable2 li").draggable({
connectToSortable: "#sortable",
helper: "clone"
});
});
Additional CSS was added to style both UL elements as grids:
#sortable {
list-style-type: none;
margin: 0;
padding: 0;
width: 450px;
}
#sortable li {
margin: 3px 3px 3px 0;
padding: 1px;
float: left;
width: 100px;
height: 90px;
font-size: 4em;
text-align: center;
}
#sortable2 {
list-style-type: none;
margin: 0;
padding: 0;
width: 450px;
}
#sortable2 li {
margin: 3px 3px 3px 0;
padding: 1px;
float: left;
width: 100px;
height: 90px;
font-size: 4em;
text-align: center;
}
Seeking solutions or suggestions for this issue. Any ideas?
The libraries being used are jquery-ui.css, jquery-ui.js, and jquery.min.js.
Thank you!