问题描述
我需要创建一个类似于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'),});
//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>