Jquery UI 可排序占位符未显示在阻止列表中答案

【问题标题】：Jquery UI sortable placeholder not showing up in block listJquery UI 可排序占位符未显示在阻止列表中
【发布时间】：2023-03-09 12:43:01
【问题描述】：

我在 ul 中有一些项目显示为内联块。我可以使用 jquery ui 的 sortable 对它们进行排序，但是占位符没有显示出来。

$(document).ready(function() {
  $('#sortableList').sortable({
    refreshPositions: true,
    opacity: 0.6,
    scroll: true,
    containment: 'parent',
    placeholder: 'placeholder',
    tolerance: 'pointer'
  }).disableSelection();
});

.sequencer {
   height: 110px;
   width: 600px;
   overflow-y: hidden;
   overflow-x: hidden;
 }
 .sequencer ul {
   white-space: nowrap;
   overflow-x: scroll;
   overflow-y: hidden;
 }
 .sequencer li {
   display: inline-block;
   padding-right: 10px;
   padding-left: 10px;
   text-align: center;
 }
 .sequencer img {
   display: block;
   height: 50px;
 }
 .placeholder {
   background: #f3f3f3;
   visibility: visible;
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.js"></script>
<div class='sequencer'>
  <ul id='sortableList'>
    <li>
      <img src='http://images.wikia.com/reddithistory/images/1/10/3-rage-face.png' />rage1</li>
    <li>
      <img src='http://images.wikia.com/reddithistory/images/1/10/3-rage-face.png' />rage2</li>
    <li>
      <img src='http://images.wikia.com/reddithistory/images/1/10/3-rage-face.png' />rage3</li>
    <li>
      <img src='http://images.wikia.com/reddithistory/images/1/10/3-rage-face.png' />rage4</li>
    <li>
      <img src='http://images.wikia.com/reddithistory/images/1/10/3-rage-face.png' />rage5</li>
  </ul>
</div>

【问题讨论】：

标签： javascript jquery jquery-ui jquery-ui-sortable

【解决方案1】：

如果您将 height 和 width 设置为占位符，您的占位符将可见。

用你的代码检查 jsfiddle：jsfiddle

【讨论】：

【解决方案2】：

由于您拖动的项目没有明确的高度，您应该使用选项

forcePlaceholderSize.

如果为 true，则强制占位符具有大小。

无需手动指定占位符的尺寸。

$(document).ready(function() {
  $('#sortableList').sortable({
    refreshPositions: true,
    opacity: 0.6,
    scroll: true,
    containment: 'parent',
    placeholder: 'placeholder',
    tolerance: 'pointer',
    forcePlaceholderSize: true // <--- add this
  }).disableSelection();
});

.sequencer {
  height: 110px;
  width: 600px;
  overflow-y: hidden;
  overflow-x: hidden;
}
.sequencer ul {
  white-space: nowrap;
  overflow-x: scroll;
  overflow-y: hidden;
}
.sequencer li {
  display: inline-block;
  padding-right: 10px;
  padding-left: 10px;
  text-align: center;
}
.sequencer img {
  display: block;
  height: 50px;
}
.placeholder {
  background: #f3f3f3;
  visibility: visible;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.js"></script>
<div class='sequencer'>
  <ul id='sortableList'>
    <li>
      <img src='http://images.wikia.com/reddithistory/images/1/10/3-rage-face.png' />rage1</li>
    <li>
      <img src='http://images.wikia.com/reddithistory/images/1/10/3-rage-face.png' />rage2</li>
    <li>
      <img src='http://images.wikia.com/reddithistory/images/1/10/3-rage-face.png' />rage3</li>
    <li>
      <img src='http://images.wikia.com/reddithistory/images/1/10/3-rage-face.png' />rage4</li>
    <li>
      <img src='http://images.wikia.com/reddithistory/images/1/10/3-rage-face.png' />rage5</li>
  </ul>
</div>

JSFiddle

【讨论】：

【解决方案3】：

为占位符添加高度宽度和不透明度，然后它会正常工作

【讨论】：