jQuery(function() {
jQuery(".collection").sortable({});
jQuery('li', jQuery('.collection')).draggable({
'connectToSortable': '.collection',
'cancel': 'a.ui-icon',
'revert': 'invalid',
'containment': 'document',
'cursor': 'move'
});
});body {
background-color: silver;
font-family: Verdana, Georgia;
}
div.main {
margin-left: auto;
margin-right: auto;
width: 740px;
}
div.table {
display: table;
width: 740px;
}
div.td {
display: table-cell;
margin-top: 0;
width: 50%;
}
div.tr {
display: table-row;
}
ul.collection {
background-color: white;
list-style: none;
padding-left: 0;
min-height: 100px;
padding-left: 0;
width: 200px;
}
ul.collection>li {}
ul#selection {
right: 0;
}
ul#source {}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="/stylesheets/page.css" />
</head>
<body>
<div class="main">
<div class="table">
<div class="tr">
<div class="td">
<ul id="source" class="collection">
<li class="draggable">Everything</li>
<li class="draggable">Nonfiction</li>
<li class="draggable">Fiction</li>
<li class="draggable">Poetry</li>
</ul>
</div>
<div class="td">
<ul id="selection" class="collection">
</ul>
</div>
</div>
</div>
<script src="/javascripts/jquery.js"></script>
<script src="/javascripts/jquery-ui.js"></script>
<script>
jQuery(function() {
jQuery(".collection").sortable({});
jQuery('li', jQuery('.collection')).draggable({
'connectToSortable': '.collection',
'cancel': 'a.ui-icon',
'revert': 'invalid',
'containment': 'document',
'cursor': 'move'
});
});
</script>
</div>
</body>
</html>此脚本旨在使 LI 可在两个 UL 之间拖动。运行时，左侧表格单元格样式 DIV 中填充的 UL 不会与表格样式 DIV 的顶部齐平；它的顶部似乎与右侧空表格单元格的底部松散(或完全)对齐。背景不同的初始图片如下:
如果两个 UL 都有至少一个 LI，那么它们会根据需要对齐到顶部。如果最后一个 LI 被拖过来，会出现闪烁效果。所需的齐平外观是:
我想设置一些东西，以便两个 UL 都位于它们的模拟表格单元格的顶部，无论它们是填充的还是空的。
最佳答案
通过在 div.td 上使用 vertical-align: top 垂直对齐 table-cell元素。这将告诉 table-cell stick 到顶部。
请看下面的演示:
jQuery(function() {
jQuery(".collection").sortable({});
jQuery('li', jQuery('.collection')).draggable({
'connectToSortable': '.collection',
'cancel': 'a.ui-icon',
'revert': 'invalid',
'containment': 'document',
'cursor': 'move'
});
});body {
background-color: silver;
font-family: Verdana, Georgia;
}
div.main {
margin-left: auto;
margin-right: auto;
width: 740px;
}
div.table {
display: table;
width: 740px;
}
div.td {
display: table-cell;
margin-top: 0;
width: 50%;
vertical-align: top;
}
div.tr {
display: table-row;
}
ul.collection {
background-color: white;
list-style: none;
padding-left: 0;
min-height: 100px;
padding-left: 0;
width: 200px;
}
ul.collection>li {}
ul#selection {
right: 0;
}
ul#source {}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="/stylesheets/page.css" />
</head>
<body>
<div class="main">
<div class="table">
<div class="tr">
<div class="td">
<ul id="source" class="collection">
<li class="draggable">Everything</li>
<li class="draggable">Nonfiction</li>
<li class="draggable">Fiction</li>
<li class="draggable">Poetry</li>
</ul>
</div>
<div class="td">
<ul id="selection" class="collection">
</ul>
</div>
</div>
</div>
<script src="/javascripts/jquery.js"></script>
<script src="/javascripts/jquery-ui.js"></script>
<script>
jQuery(function() {
jQuery(".collection").sortable({});
jQuery('li', jQuery('.collection')).draggable({
'connectToSortable': '.collection',
'cancel': 'a.ui-icon',
'revert': 'invalid',
'containment': 'document',
'cursor': 'move'
});
});
</script>
</div>
</body>
</html>关于jquery - 如何让表格单元格格式的 DIV 中的两个 UL 与顶部齐平？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45737634/