Shopify Draggable 的可排序示例答案

【问题标题】：Sortable example with Shopify DraggableShopify Draggable 的可排序示例
【发布时间】：2020-10-19 09:31:22
【问题描述】：

我需要创建一个类似于 trello 主视图的视图。我有可排序的类别和任务我想通过 Sortable API 对展位进行排序。

当我将类别可排序激活时，当我尝试对任务进行排序时，它也会尝试对关联类别进行排序。我明白为什么会这样做，但是如何排除呢？这可能与 Shopify Dragable api 有关吗？ https://shopify.github.io/draggable/

我是 Draggable api 的新手，我的问题的代码示例：

//task sortable
const sortable = new Draggable.Sortable(document.querySelectorAll('ul'), {
            draggable: 'li',
        });

<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>
<script src="https://cdn.jsdelivr.net/npm/@shopify/draggable@1.0.0-beta.11/lib/draggable.bundle.js"></script>


<html>
<head></head>
<body>
<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" 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" 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" 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" 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>

现在可以使用任务和类别排序

//task sortable
const sortable = new Draggable.Sortable(document.querySelectorAll('ul'), {
            draggable: 'li',
        });

//cat sortable
const sortableCat = new Draggable.Sortable(document.querySelectorAll('.main-div'), {
          draggable: '.category-swap',
});

<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>
<script src="https://cdn.jsdelivr.net/npm/@shopify/draggable@1.0.0-beta.11/lib/draggable.bundle.js"></script>


<html>
<head></head>
<body>
<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" 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" 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" 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" 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>

【问题讨论】：

标签： bootstrap-4 jquery-ui-sortable draggable adminlte

【解决方案1】：

handle 选项可以指定拖动的位置。您可以像下面的sn-p一样设置handle: ".card-header"来排除关联类别的排序。

见：https://github.com/Shopify/draggable/tree/master/src/Draggable#options

//task sortable 
const sortable = new Draggable.Sortable(
    document.querySelectorAll("ul"), 
    { draggable: "li" }
);

//cat sortable
const sortableCat = new Draggable.Sortable(
    document.querySelectorAll(".main-div"),
    { draggable: ".category-swap", handle: ".card-header" }
);

<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>
<script src="https://cdn.jsdelivr.net/npm/@shopify/draggable@1.0.0-beta.11/lib/draggable.bundle.js"></script>

<html>
<head></head>
<body>
    <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" 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" 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" 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" 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>

【讨论】：