javascript - jQuery Sortable - 在从列表中删除的项目上保留空白

Question

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

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

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

这是代码片段(点击打开)。

$(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>

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

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

Answer 1

请

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

您应该使用:

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

属性visibility:hidden 保持空间原样。

要删除元素，只需使用 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>)')

要获取 childnumber，请使用点击事件并在创建 HTML 代码时设置包含每个卡中的 ID 的属性，例如 id=card-number-[putherevalue]