主页 / user-2943218

Carsten Løvbo Andersen's questions

Martin Hope
Carsten Løvbo Andersen
Asked: 2024-10-07 01:58:04 +0800 CST
  • 5

我对 jquery-ui sortable 的占位符有疑问。

我正在尝试对集合进行排序div，并添加将其放置到何处的占位符。

目前，占位符似乎“卡”在顶部。可能是我的 CSS，但我似乎找不到问题所在

我试图按照jquery ui中的示例进行操作

演示

$(function() {
  $('#sortable').sortable({
    placeholder: 'ui-state-highlight',
  }).disableSelection();
});
.form_elements {
  width: 100%;
}

.form_elements ._element {
  width: 100%;
  display: block;
}

.form_elements ._element ._tu {
  float: left;
  width: 80px;
}

.form_elements ._element ._tu input[type=checkbox] {
  scale: 0.8;
  border-color: var(--bs-gray-500);
  float: left;
}

.form_elements ._element ._tu .number {
  float: right;
  padding-right: 15px;
  color: #6e6e6e;
}

.form_elements ._element ._elementContent {
  width: calc(100% - 80px);
  min-height: 10px;
  background-color: #fff;
  border: 1px solid #eaedf0;
  margin-bottom: 15px;
  float: left;
  padding: 10px;
}

.form_elements ._element ._elementContent .line {
  width: 100%;
}

.form_elements ._element ._elementContent .line.lh16 {
  line-height: 18px;
}

.form_elements ._element ._elementContent .line .icon {
  float: left;
  color: #6e6e6e;
  padding-right: 5px;
}

.form_elements ._element ._elementContent .line .icon i {
  font-size: 18px;
}

.form_elements ._element ._elementContent .line .title {
  float: left;
  color: #6e6e6e;
  font-size: 16px;
}

.form_elements ._element ._elementContent .line .rs {
  float: right;
  display: none;
}

.form_elements ._element ._elementContent .line .rs .settings {
  float: left;
  margin-right: 10px;
  font-size: 18px;
  cursor: pointer;
}

.form_elements ._element ._elementContent .line .rs .clone {
  float: left;
  margin-right: 10px;
  font-size: 18px;
  cursor: pointer;
}

.form_elements ._element ._elementContent .line .rs .move {
  float: left;
  font-size: 18px;
  cursor: pointer;
}

.form_elements ._element ._elementContent:hover .rs {
  display: block !important;
}

.ui-state-highlight {
  height: 50px;
  /* Adjust to match the height of your items */
  margin: 5px 0;
  /* Make sure to give some space to see where it will be dropped */
  border: 2px dashed #ccc;
  /* To visually distinguish the placeholder */
  background-color: rgba(240, 240, 240, 0.5);
  box-sizing: border-box;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script
  src="https://code.jquery.com/ui/1.13.3/jquery-ui.js"
  integrity="sha256-J8ay84czFazJ9wcTuSDLpPmwpMXOm573OUtZHPQqpEU="
  crossorigin="anonymous"></script>
<div class="form_elements ui-sortable" id="sortable">
  <div class="_element" data-index="1">
    <div class="_tu">
      <input type="checkbox" class="form-check-input" />
      <div class="number">2.</div>
    </div>
    <div class="_elementContent">
      <div class="line lh16">
        <div class="icon">
          <i class="fa fa-hashtag"></i>
        </div>
        <div class="title">Number</div>
        <div class="rs">
          <div class="settings">
            <i class="flaticon-clipboard"></i>
          </div>
          <div class="clone">
            <i class="flaticon-background"></i>
          </div>
          <div class="move">
            <i class="flaticon2-resize"></i>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="_element" data-index="2">
    <div class="_tu">
      <input type="checkbox" class="form-check-input" />
      <div class="number">3.</div>
    </div>
    <div class="_elementContent">
      <div class="line lh16">
        <div class="icon">
          <i class="fa fa-hashtag"></i>
        </div>
        <div class="title">Number</div>
        <div class="rs">
          <div class="settings">
            <i class="flaticon-clipboard"></i>
          </div>
          <div class="clone">
            <i class="flaticon-background"></i>
          </div>
          <div class="move">
            <i class="flaticon2-resize"></i>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="_element" data-index="3">
    <div class="_tu">
      <input type="checkbox" class="form-check-input" />
      <div class="number">4.</div>
    </div>
    <div class="_elementContent">
      <div class="line lh16">
        <div class="icon">
          <i class="flaticon2-sort-alphabetically"></i>
        </div>
        <div class="title">Text</div>
        <div class="rs">
          <div class="settings">
            <i class="flaticon-clipboard"></i>
          </div>
          <div class="clone">
            <i class="flaticon-background"></i>
          </div>
          <div class="move">
            <i class="flaticon2-resize"></i>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="_element" data-index="0" style="">
    <div class="_tu">
      <input type="checkbox" class="form-check-input" />
      <div class="number">1.</div>
    </div>
    <div class="_elementContent">
      <div class="line lh16">
        <div class="icon">
          <i class="flaticon2-sort-alphabetically"></i>
        </div>
        <div class="title">Text</div>
        <div class="rs">
          <div class="settings">
            <i class="flaticon-clipboard"></i>
          </div>
          <div class="clone">
            <i class="flaticon-background"></i>
          </div>
          <div class="move">
            <i class="flaticon2-resize"></i>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

jquery
Martin Hope
Carsten Løvbo Andersen
Asked: 2024-02-04 19:20:48 +0800 CST
  • 6

我目前正在 Angular 应用程序中开发一项功能，其中涉及自定义多选下拉组件。目标是允许用户从此下拉列表中选择多个项目，然后通过拖放对这些选定的项目重新排序。
然而，我遇到了一些无法解决的挑战：

  1. 不正确的放置索引：每当拖放一个项目时，无论预期的放置位置如何，它最终都会被放置在列表的开头（索引 0）。
  2. 静态占位符：指示项目将被放置的位置的占位符不会随着拖动的项目一起移动，这使得用户很难理解项目在释放时将被放置在哪里。我花了相当多的时间尝试调试和修复这些问题，但没有成功。我正在向社区寻求任何可以帮助我克服这些障碍的建议、见解或解决方案。

这是我在 StackBlitz 上的项目的简化版本的链接，它演示了我面临的问题：StackBlitz 示例

任何有关如何解决这些问题的建议或指导将不胜感激。预先感谢您的时间和帮助！

angular