Использование пользовательского интерфейса Jquery с сортировкой по css display: grid

Question

Я пытаюсь создать сортируемую сетку CSS, используя пользовательский интерфейс jquery.

    $( 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. Я понимаю этот дисплей: содержимое - это не столько дисплей, сколько органайзер для дочерних элементов, но я не понимаю, как это повлияет на сортировку jquery ui.

Answer 1

Я думаю, что на фундаментальном уровне CSS контент grid нельзя сортировать, перетаскивать или перемещать.

Примечание: свойства float, display: inline-block, display: table-cell, vertical-align и column-* не влияют на элемент сетки.

Я подозреваю, что из-за отсутствия этих свойств пользовательский интерфейс jQuery не может правильно управлять 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 Grid Layout и, в меньшей степени, в 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>