问题描述
我需要创建一个类似于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/[email protected]/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/[email protected]/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>解决方法
暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！
如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@）