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>

当我将 Card N 移动到任何其他列表时，由于列表不再存在，我无法将其恢复。

此外，如果我将 Card 3 移动到任何其他列表， Card 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使用on click事件并在创建HTML代码时设置包含每张卡中ID的属性，例如id=card-number-[putherevalue]

jQuery Sortable - 保留列表

1 个答案: