jQuery 可排序 - 在从列表中删除的项目上保持空白 space

Question

我正在尝试制作一个板，用户可以在其中移动便签，其中包含数据。

我目前正在使用可排序 jQuery 库。它按照设计的方式工作，但我想稍微修改一下功能。当我从列表中删除一个项目时，我想要一个空的 space 留在它的位置。例如，如果我要从列表中删除第一项，则不应将其余项目向上移动并取空 space。

同样，当我在列表中只有一个项目并将其删除时，我无法将任何内容添加回该列表，因为列表消失了。我也想阻止这种情况发生。

这是片段（点击打开）。

$(document).ready(function() {

$('.sort-me-alpha').sortable({
  connectWith: '.sort-me-gamma',
  receive: function (event, ui) {
    if ($(ui.item).hasClass('special')) {
      ui.sender.sortable('cancel');
    }
  }
});

$('.sort-me-beta').sortable({
  connectWith: '.sort-me-gamma',
  receive: function (event, ui) {
    if (!$(ui.item).hasClass('special')) {
      ui.sender.sortable('cancel');
    }
  }
});

$('.sort-me-gamma').sortable({
  appendTo: document.body,
  items: '.sticky',
  placeholder: "testclass",
  connectWith: '.sort-me-alpha, .sort-me-beta',
  receive: function (event, ui) {
    //console.log(event, ui.item);
    //ui.item.remove(); // remove original item
  }
});

});

  .sort-me {
    /* background-color: #3498db; */
    min-height: 30px;
    margin: 10px;
    padding: 10px;
    width: auto;
    vertical-align: top;
    display: inline-block;
  }

  .sort-me-alpha {
    /* background-color: #3498db; */
    min-height: 30px;
    margin: 10px;
    padding: 10px;
    width: auto;
    vertical-align: top;
    display: inline-block;
  }

  .sort-me-gamma {
    /* background-color: #3498db; */
    min-height: 30px;
    margin: 10px;
    padding: 10px;
    width: auto;
    vertical-align: top;
    display: inline-block;
  }

  .sort-me-beta {
    /* background-color: #3498db; */
    min-height: 30px;
    margin: 10px;
    padding: 10px;
    width: fixed;
    vertical-align: top;
    display: inline-block;
  }

  .testclass {
    background-color: gray;
    border: 2px solid gray;
    width: 100%;
    height: 100%;
  }

  .sticky {
    /* position: absolute; */
    right: 0;
    z-index: 150;
    /* transform: rotate(5deg); */
    width: 200px;
    min-height: 150px;
    margin: 10px 10px 10px;
    padding: 10px;
    /* font-family: "Comic Sans MS", "Comic Sans", "Chalkboard SE", "Comic Neue", cursive; */
    font-size: 14px;
    color: #000;
    background: rgba(255, 255, 51, 0.8);
    box-shadow: -2px 2px 2px rgba(0, 0, 0, 0.3);
  }

  .sticky:before,
  .sticky:after {
    content: "";
    display: block;
    position: absolute;
    width: 16px;
    height: 16px;
    top: 0;
    right: 0;
  }

  .sticky:before {
    border-top: solid 8px #fff;
    border-right: solid 8px #fff;
    border-left: solid 8px transparent;
    border-bottom: solid 8px transparent;
  }

  .sticky:after {
    border-bottom: solid 8px #dddd33;
    border-left: solid 8px #dddd33;
    border-right: solid 8px transparent;
    border-top: solid 8px transparent;
  }

  .ui-helper {
    width: 100% !important;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>


<div class="container">
  <div class="sort-me-alpha">
    <div class="sticky">
      <b>Card 1</b> Put any text in here.
    </div>
    <div class="sticky">
      <b>Card 2</b> Put any text in here.
    </div>
  </div>
  <div class="sort-me-beta">
    <div class="sticky">
      <b>Card n</b> Put any text in here.
    </div>
  </div>
  <div class="sort-me-gamma">
    <div class="sticky">
      <b>Card 3</b> Put any text in here.
    </div>
    <div class="sticky">
      <b>Card 4</b> Put any text in here.
    </div>
  </div>
</div>

当我将 Card N 移至任何其他列表时，我无法将其取回，因为该列表已不复存在。

此外，如果我将 Card 3 移动到任何其他列表，Card 4 会出现并取而代之，我知道这一点是默认行为，但我可以覆盖它吗？

Answer 1

每个问题一个问题。我会回答第一个。

你应该使用：

$("#sticky-id").css('visibility','hidden');

属性 visibility:hidden 保持 space 原样。

要删除元素，只需使用 remove() 而不是触摸可见性。

如果要在列表中添加元素，请使用：

remove: function(event, ui) {
    console.log(event);
    console.log('removed'); 
    $('.sort-me-gamma').prepend('<div class="sticky">' + '<b> I am a dummy card </b>' + '</div>' );
}

如果您想要一个通用函数来执行此操作，您将需要：

.insertAfter('#list :nth-child(<give childnumber here>)')

并在创建 HTML 代码时使用点击事件并设置包含每张卡片 ID 的属性，例如 id=card-number-[putherevalue]

jQuery 可排序 - 在从列表中删除的项目上保持空白 space

jQuery Sortable - Keep empty space on item remove from list

javascript

jquery

jquery-ui

jquery-ui-sortable