Блог

Главная - Вопросы по программированию - Сортируемый пример с Shopify перетаскиваемый

Сортируемый пример с Shopify перетаскиваемый

#bootstrap-4 #jquery-ui-sortable #draggable #adminlte

#bootstrap-4 #jquery-ui-сортируемый #перетаскиваемый #adminlte

Вопрос:

Мне нужно создать представление, похожее на основное представление trello. Там, где у меня есть сортируемые категории и задачи, я хочу отсортировать стенд через сортируемый API.

Когда я включаю сортировку категорий, когда я пытаюсь сортировать задачи, он пытается также сортировать связанные категории. Я понимаю, почему это так, но как исключить? Возможно ли это сделать с помощью Shopify Dragable api? https://shopify.github.io/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>

Ответ №1:

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>