Question

我正在尝试构建一个允许用户执行故事映射的应用程序。关于这是什么的一点注意事项：你有一堆粘滞便笺，你可以制作一张所有用户任务和目标的地图，并将其放在一块板上。

我必须设置允许的东西。优选地，可以放置元件并对其进行分类的独立网格允许我也改变网格的大小。

到目前为止我做了什么：

我使用了可拖动和可排序的jQuery UI库。我可以对列表进行排序，连接列表，从数据库中动态呈现视图。一切都非常实用。

这是JSFiddle的link

HTML

<!-- <div style="margin: 30px;"> -->
<div class="container" style="display: table;">
  <div class="row" style="display: table-row; ">
    <div class="sort-me-header" style="display: table-cell;">
      <div class="sticky" style="background-color: orange;">
        <b>Card Header</b> Put any text in here.
      </div>
    </div>
    <div class="sort-me-header" style="display: table-cell;">
      <div class="sticky" style="background-color: orange;">
        <b>Card Header</b> Put any text in here.
      </div>
    </div>
    <div class="sort-me-header" style="display: table-cell;">
      <div class="sticky" style="background-color: orange;">
        <b>Card Header</b> Put any text in here.
      </div>
    </div>
    <div class="sort-me-header" style="display: table-cell;">
      <div class="sticky" style="background-color: orange;">
        <b>Card Header</b> Put any text in here.
      </div>
    </div>
  </div>
  <div class="row" style="display: table-row;">
    <div class="sort-me-header" style="display: table-cell;">
      <div class="sticky" style="background-color: pink;">
        <b>Card Header</b> Put any text in here.
      </div>
    </div>
    <div class="sort-me-header" style="display: table-cell;">
      <div class="sticky" style="background-color: pink;">
        <b>Card Header</b> Put any text in here.
      </div>
    </div>
    <div class="sort-me-header" style="display: table-cell;">
    </div>
    <div class="sort-me-header" style="display: table-cell;">
      <div class="sticky" style="background-color: pink;">
        <b>Card Header</b> Put any text in here.
      </div>
    </div>
  </div>
  <hr>
  <div class="row" style="display: table-row;">
    <div class="sort-me-alpha" style="display: table-cell;">
      <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" style="display: table-cell;">
      <div class="sticky">
        <b>Card n</b> Put any text in here.
      </div>
    </div>
    <div class="sort-me-gamma" style="display: table-cell;">
      <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 class="sticky">
        <b>Card 5</b> Put any text in here.
      </div>
    </div>
  </div>
</div>

使用Javascript / jQuery的

  $(document).ready(function () {

$('.sort-me-alpha').sortable({
  connectWith: '.sort-me-gamma, .sort-me-beta, .sort-me-header',
  placeholder: "testclass",
  forcePlaceholderSize: true
});

$('.sort-me-beta').sortable({
  connectWith: '.sort-me-gamma, .sort-me-alpha, .sort-me-header',
  placeholder: "testclass",
  forcePlaceholderSize: true
});

$('.sort-me-gamma').sortable({
  placeholder: "testclass",
  forcePlaceholderSize: true,
  connectWith: '.sort-me-alpha, .sort-me-beta, .sort-me-header'
});

$('.sort-me-header').sortable({
  placeholder: "testclass",
  forcePlaceholderSize: true,
  connectWith: '.sort-me-alpha, .sort-me-beta, .sort-me-gamma, .sort-me-header',
  receive: function (event, ui) {
    var $list = $(this);

    if ($list.children().length > 1) {
      $(ui.sender).sortable('cancel');
    }
  }
});
});

在示例中，前两行（橙色和粉红色）是我的标题。每张卡都放在一个单独的可排序列表中。这些列表只带一张卡。我这样做是因为如果你看黄牌，它们就是连接列表，如果我要从中间移动一张牌，下面的牌就会自动出现并取而代之。我知道这是内置行为，我想覆盖它。我尝试了另一个stackoverflow用户，并通过呈现发生的空卡获得成功。但对于我想要实现的长期目标而言，这并不是相当优雅。另一个限制是我不能排序前两行。他们只能接受一张卡，一张卡只能离开该占位符。因此，在强迫某种行为的方式中，我正在妥协另一种行为。

任何人都可以在这里指导我或更好地将我转发到更符合我需求并符合我要求的API /库？

具有拖放和排序类别的网格

0 个答案: