主页 / 问题 / 1321539
Accepted
Sire IMPACTUS
Asked:2022-08-26 18:05:16 +0000 UTC2022-08-26 18:05:16 +0000 UTC

如果块的高度为 0，则 UI Sortable 不会移动

  • 772

有几个带有项目的块。我正在尝试释放从一个块到另一个块的项目转移，但是出现了问题。如果其中一个块的高度为 0，则根本无法将元素插入那里。如何解决类似的问题？

这是可排序的代码：

$('.tasks-content-block').sortable({
            connectWith: '.tasks-status-items-block',
            items: '.component-task-item',
            dropOnEmpty: true,
            placeholder: "component-card-task-placeholder"
}).disableSelection();

在此处输入图像描述 在此处输入图像描述

javascript

1 个回答

  1. Best Answer

    你有这个块，实际上没有高度，因此你不能移动它。

    尝试将块设置为最小固定值，例如使用min-height.

    我无法重新创建您的示例，但我提供了自己的示例。

    我将尝试用一个例子来解释：

    在示例中：

    1. 细胞在移动。
    2. 第五个灰色单元格故意缺少文本，以便字符不会增加框的高度，但文本是隐含的（“第 5 项”）。块的高度等于0px，也就是说，该块实际上是不存在的，也不是可点击的。

    <!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Sortable - Handle empty lists</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <style>
  #sortable1, #sortable2, #sortable3 { list-style-type: none; margin: 0; float: left; margin-right: 10px; background: #eee; padding: 0px; width: 143px}
  #sortable1 li, #sortable2 li, #sortable3 li {margin: 5px; padding: 0px; width: 120px; border: 0px}
  </style>
  <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>
  <script>
  $( function() {
$( "ul.droptrue" ).sortable({
  connectWith: "ul"
});
 
$( "ul.dropfalse" ).sortable({
  connectWith: "ul",
  dropOnEmpty: false
});
 
$( "#sortable1, #sortable2, #sortable3" ).disableSelection();
  } );
  </script>
</head>
<body>
 
<ul id="sortable1" class="droptrue">
  <li class="ui-state-default">Item 1</li>
  <li class="ui-state-default">Item 2</li>
  <li class="ui-state-default">Item 3</li>
  <li class="ui-state-default">Item 4</li>
  <li class="ui-state-default"></li>
</ul>
 
<ul id="sortable2" class="dropfalse">
  <li class="ui-state-highlight">Item 1</li>
  <li class="ui-state-highlight">Item 2</li>
  <li class="ui-state-highlight">Item 3</li>
  <li class="ui-state-highlight">Item 4</li>
  <li class="ui-state-highlight">Item 5</li>
</ul>
 
<ul id="sortable3" class="droptrue">
</ul>
 
<br style="clear:both">
 
 
</body>
</html>

    现在，如果您添加min-height = 150px-> #sortable1 li, #sortable2 li, #sortable3 li {margin: 5px; padding: 0px; width: 120px; border: 0px, min-height: 150px;}，所有单元格都将显示并且可以正常工作：

    <!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Sortable - Handle empty lists</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <style>
  #sortable1, #sortable2, #sortable3 { list-style-type: none; margin: 0; float: left; margin-right: 10px; background: #eee; padding: 0px; width: 143px}
  #sortable1 li, #sortable2 li, #sortable3 li {margin: 5px; padding: 0px; width: 120px; border: 0px; min-height: 150px}
  </style>
  <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>
  <script>
  $( function() {
$( "ul.droptrue" ).sortable({
  connectWith: "ul"
});
 
$( "ul.dropfalse" ).sortable({
  connectWith: "ul",
  dropOnEmpty: false
});
 
$( "#sortable1, #sortable2, #sortable3" ).disableSelection();
  } );
  </script>
</head>
<body>
 
<ul id="sortable1" class="droptrue">
  <li class="ui-state-default">Item 1</li>
  <li class="ui-state-default">Item 2</li>
  <li class="ui-state-default">Item 3</li>
  <li class="ui-state-default">Item 4</li>
  <li class="ui-state-default"></li>
</ul>
 
<ul id="sortable2" class="dropfalse">
  <li class="ui-state-highlight">Item 1</li>
  <li class="ui-state-highlight">Item 2</li>
  <li class="ui-state-highlight">Item 3</li>
  <li class="ui-state-highlight">Item 4</li>
  <li class="ui-state-highlight">Item 5</li>
</ul>
 
<ul id="sortable3" class="droptrue">
</ul>
 
<br style="clear:both">
 
 
</body>
</html>

    或者要棘手的是，如果您需要块高度0 px，那么您可以将padding大小设置1 px为 ，但保持块高度不变。该块将几乎不可见，但可点击

    <!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Sortable - Handle empty lists</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <style>
  #sortable1, #sortable2, #sortable3 { list-style-type: none; margin: 0; float: left; margin-right: 10px; background: #eee; padding: 0px; width: 143px}
  #sortable1 li, #sortable2 li, #sortable3 li {margin: 5px; padding: 1px; width: 120px; border: 0px}
  </style>
  <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>
  <script>
  $( function() {
$( "ul.droptrue" ).sortable({
  connectWith: "ul"
});
 
$( "ul.dropfalse" ).sortable({
  connectWith: "ul",
  dropOnEmpty: false
});
 
$( "#sortable1, #sortable2, #sortable3" ).disableSelection();
  } );
  </script>
</head>
<body>
 
<ul id="sortable1" class="droptrue">
  <li class="ui-state-default">Item 1</li>
  <li class="ui-state-default">Item 2</li>
  <li class="ui-state-default">Item 3</li>
  <li class="ui-state-default">Item 4</li>
  <li class="ui-state-default"></li>
</ul>
 
<ul id="sortable2" class="dropfalse">
  <li class="ui-state-highlight">Item 1</li>
  <li class="ui-state-highlight">Item 2</li>
  <li class="ui-state-highlight">Item 3</li>
  <li class="ui-state-highlight">Item 4</li>
  <li class="ui-state-highlight">Item 5</li>
</ul>
 
<ul id="sortable3" class="droptrue">
</ul>
 
<br style="clear:both">
 
 
  </body>
</html>

    • 2

相关问题