在Dragula上的两个容器上启用拖动

问题描述

我是Dragula的新手。我需要能够拖动任务，还必须能够拖动类别卡。它必须类似于Trello视图。 Dragula有可能吗？

仅可拖动任务的工作示例（展开代码段即可正确查看）：

        let drake = dragula({
            isContainer: function (el) {
                return el.classList.contains('ul-container');
            },});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://adminlte.io/themes/v3/dist/css/adminlte.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.min.js"></script>


<html>
<head></head>
<body>
<script src='https://cdnjs.cloudflare.com/ajax/libs/dragula/3.7.3/dragula.min.js'></script>
<div class="row main-div">
  <div class="col-md-2 category-swap">
    <div class="card">
      <div class=" card-header">
        <h5 class="card-title">Cat 1</h5>
      </div>
      <ul class="todo-list ul-container" data-widget="todo-list">
        <li>Task 1</li>
        <li>Task 2</li>
        <li>Task 3</li>
        <li>Task 4</li>
      </ul>
    </div>
  </div>
  <div class="col-md-2 category-swap">
    <div class="card">
      <div class=" card-header">
        <h5 class="card-title">Cat 2</h5>
      </div>
      <ul class="todo-list ul-container" data-widget="todo-list">
        <li>Task 1</li>
        <li>Task 2</li>
        <li>Task 3</li>
        <li>Task 4</li>
      </ul>
    </div>
  </div>
  <div class="col-md-2 category-swap">
    <div class="card">
      <div class=" card-header">
        <h5 class="card-title">Cat 3</h5>
      </div>
      <ul class="todo-list ul-container" data-widget="todo-list">
        <li>Task 1</li>
        <li>Task 2</li>
        <li>Task 3</li>
        <li>Task 4</li>
      </ul>
    </div>
  </div>
  <div class="col-md-2 category-swap">
    <div class="card">
      <div class=" card-header">
        <h5 class="card-title">Cat 4</h5>
      </div>
      <ul class="todo-list ul-container" data-widget="todo-list">
        <li>Task 1</li>
        <li>Task 2</li>
        <li>Task 3</li>
        <li>Task 4</li>
      </ul>
    </div>
  </div>
</div>
</body>
</html>

无法使用“任务”和“类别”可拖动的示例（展开代码段即可正确查看）：

        let drake = dragula({
            isContainer: function (el) {
                return el.classList.contains('ul-container');
            },});

        let drake1 = dragula({
            isContainer: function (el) {
                return el.classList.contains('main-div');
            },});

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link href="https://adminlte.io/themes/v3/dist/css/adminlte.min.css" rel="stylesheet"/>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.min.js"></script>
    
        <html>
    <head></head>
    <body>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/dragula/3.7.3/dragula.min.js'></script>
    <div class="row main-div">
      <div class="col-md-2 category-swap">
        <div class="card">
          <div class=" card-header">
            <h5 class="card-title">Cat 1</h5>
          </div>
          <ul class="todo-list ul-container" data-widget="todo-list">
            <li>Task 1</li>
            <li>Task 2</li>
            <li>Task 3</li>
            <li>Task 4</li>
          </ul>
        </div>
      </div>
      <div class="col-md-2 category-swap">
        <div class="card">
          <div class=" card-header">
            <h5 class="card-title">Cat 2</h5>
          </div>
          <ul class="todo-list ul-container" data-widget="todo-list">
            <li>Task 1</li>
            <li>Task 2</li>
            <li>Task 3</li>
            <li>Task 4</li>
          </ul>
        </div>
      </div>
      <div class="col-md-2 category-swap">
        <div class="card">
          <div class=" card-header">
            <h5 class="card-title">Cat 3</h5>
          </div>
          <ul class="todo-list ul-container" data-widget="todo-list">
            <li>Task 1</li>
            <li>Task 2</li>
            <li>Task 3</li>
            <li>Task 4</li>
          </ul>
        </div>
      </div>
      <div class="col-md-2 category-swap">
        <div class="card">
          <div class=" card-header">
            <h5 class="card-title">Cat 4</h5>
          </div>
          <ul class="todo-list ul-container" data-widget="todo-list">
            <li>Task 1</li>
            <li>Task 2</li>
            <li>Task 3</li>
            <li>Task 4</li>
          </ul>
        </div>
      </div>
    </div>
    </body>
    </html>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

bootstrap-4 dragula