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内容无法排序，拖动或移动。

注意：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>

使用可通过CSS显示排序的Jquery UI：网格

1 个答案: