使用Jquery UI可排序的css显示:网格

Question

我正在尝试使用jquery UI创建一个可排序的css网格。

$( 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>

https://jsfiddle.net/Lj9wnh7x/6/

我遇到的问题是，sortable似乎无法正确使用css网格和display:contents属性。我理解display:contents与其说是一个显示，不如说是一个子元素的组织者，但我看不出它会如何影响jquery-ui-sortable。

Answer 1

我认为，在基本的CSS级别上，grid内容无法排序、拖动或移动。

注意：float、display: inline-block、display: table-cell、vertical-align和column-*属性对网格项没有影响。

我怀疑缺少这些属性会导致jQuery UI无法正确管理DnD。

这是我测试的，遵循正确的HTML/CSS语法，但它仍然不起作用：

$(function() {
$("#sortable").sortable({
handle: ".handle",
items: "> div.gridContent"
});
$("#sortable").disableSelection();
});

.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;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="gridHolder" id="sortable">
<div class="gridHeader">
<handle>Handle</handle>
<name>Name</name>
<address>Address</address>
<phone>Phone</phone>
</div>
<div class="gridContent">
<div class="handle">Handle</div>
<div class="name">Adam</div>
<div class="address">111 Main St</div>
<div class="phone">123-4567</div>
</div>
<div class="gridContent">
<div class="handle">Handle</div>
<div class="name">Jenny</div>
<div class="address">222 Brown St</div>
<div class="phone">867-5309</div>
</div>
<div class="gridContent">
<div class="handle">Handle</div>
<div class="name">Carl</div>
<div class="address">222 Brown St</div>
<div class="phone">555-1212</div>
</div>
</div>

仍在做一些研究，看看情况是否如此。

更新

在CSS网格布局中以及在较小程度上在CSS Flexbox中需要注意的另一个问题是压平标记的诱惑。正如我们所发现的，要使一个项成为网格项，它需要是网格容器的直接子项。因此，如果在网格容器中有一个<ul>元素，则该ul将成为网格项，而子<li>元素则不会。

查看更多信息。

因此，这是结构关系，孩子和父母，造成了一个问题。这是另一个正在发挥作用的例子。

$(function() {
$("#sortable").sortable({
handle: "handle"
});
$("#sortable").disableSelection();
});

#sortable {
list-style-type: none;
margin: 0;
padding: 0;
}
.gridHolder {
background: tan;
}
.gridHolder li {
display: grid;
grid-template-columns: 1fr 1fr 1fr 2fr;
}
.gridHeader * {
float: left;
padding: 10px;
background: yellow;
border: thin solid black;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<ul class="gridHolder" id="sortable">
<li class="gridHeader row">
<handle>Handle</handle>
<name>Name</name>
<address>Address</address>
<phone>Phone</phone>
</li>
<li class="gridContent">
<handle>Handle</handle>
<name>Adam</name>
<address>111 Main St</address>
<phone>123-4567</phone>
</li>
<li class="gridContent">
<handle>Handle</handle>
<name>Bob</name>
<address>222 Brown Ave</address>
<phone>987-6543</phone>
</li>
<li class="gridContent">
<handle>Handle</handle>
<name>Carl</name>
<address>333 East Ave</address>
<phone>555-1343</phone>
</li>
</ul>