I'm currently working on creating a sortable CSS grid using jQuery UI.
$( function() {
$( "#sortable" ).sortable({
handle: "handle"
});
}); gridHolder{
display:grid;
background:tan;
grid-template-columns:1fr 1fr 1fr 2fr;
}
gridHeader > *{
padding:10px;
background:yellow;
border:thin solid black;
}
gridContent , gridHeader{
display:contents;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<gridHolder id="sortable">
<gridHeader>
<handle>Handle</handle>
<name>Name</name>
<address>Address</address>
<phone>Phone</phone>
</gridHeader>
<gridContent>
<handle>Handle</handle>
<name>Adam</name>
<address>111 Main St</address>
<phone>123-4567</phone>
</gridContent>
<gridContent>
<handle>Handle</handle>
<name>Bob</name>
<address>222 Brown Ave</address>
<phone>987-6543</phone>
</gridContent>
<gridContent>
<handle>Handle</handle>
<name>Carl</name>
<address>333 East Ave</address>
<phone>555-1343</phone>
</gridContent>
</gridHolder>The problem I'm facing is that the sortable feature doesn't seem to work properly with the combination of CSS grid and the display: contents property. I understand that display: contents is more of an organizer for child elements rather than a traditional display property, but I'm unsure why it's affecting the jQuery UI sortable functionality.