使用可排序的 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 可排序。

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> 元素不会。

See More.

所以这是结构关系，孩子和父母，这导致了这里的问题。这是另一个有效的示例。

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