jquery - 使用 Jquery UI 可排序和 css 显示 : grid

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/

我遇到的问题是可排序似乎无法与 css 网格和 display:contents 属性一起正常工作。 我知道 display:contents 与其说是显示，不如说是子元素的组织者，但我看不出它会如何影响 jquery ui 可排序。

Answer 1

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

Note: float, display: inline-block, display: table-cell, vertical-align and column-* properties have no effect on a grid item.

我怀疑缺少这些属性会导致 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>

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

更新

Another issue to be aware of in CSS Grid Layout and to a lesser extent in CSS Flexbox, is the temptation to flatten markup. As we have discovered, for an item to become a grid item it needs to be a direct child of the grid container. Therefore, where you have a <ul> element inside a grid container, that ul becomes a grid item – the child <li> elements do not.

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>