个人中心
gpt4 book ai didi

jquery - 如何让表格单元格格式的 DIV 中的两个 UL 与顶部齐平？

转载 作者：行者123 更新时间：2023-11-28 15:23:00 25 4
gpt4 key购买 nike 

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 的顶部齐平；它的顶部似乎与右侧空表格单元格的底部松散(或完全)对齐。背景不同的初始图片如下:

A staggered view of parts of the table

如果两个 UL 都有至少一个 LI，那么它们会根据需要对齐到顶部。如果最后一个 LI 被拖过来，会出现闪烁效果。所需的齐平外观是:

The desired effect, which appears when both lists have at least one item.

我想设置一些东西，以便两个 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/

25 4 0
文章推荐： javascript - AngularJS 密码确认 noMatch 工作但表单 $ 无效？
文章推荐： ios - 单击按钮时用动画隐藏/显示 uiimageview
文章推荐： JavaScript 有条件返回 "undefined"
文章推荐： javascript - AngularJS ng-repeat 查询过滤器不显示嵌套对象
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com