我需要创建一个类似于trello主视图的视图。哪里有可排序的类别和任务我想通过可分拣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>handle选项可以指定拖动位置。您可以像下面的代码段一样设置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>