Как выполнить плавное перетаскивание, используя сортируемую библиотеку Js - PullRequest
Новая
       40

Как выполнить плавное перетаскивание, используя сортируемую библиотеку Js

0 голосов
/ 22 апреля 2020

У меня есть фрагмент кода, где я хочу перетащить элемент из столбцов и строк, используя сортируемую Js библиотеку "https://sortablejs.github.io/Sortable/".

Однако перетаскивание происходит, но при каждом refre sh я должен нажимать на столбец, чтобы выполнить события перетаскивания, и если мне нужно перенести элемент в новый столбец, то сначала нужно щелкнуть другой столбец.

Как сортировать элементы без предварительного щелчка по столбцу. 

$(".kanban-board").on('click', e => {
    e.preventDefault();
    let $target = $(e.target);
    let $sortListId = $target.parents(".temp-card-list .card-list").attr("Id");
    
    let listId = document.getElementById($sortListId);
    new Sortable(listId,{
        group: 'shared',
        swapThreshold: 1,
        ghostClass: 'blue',
        animation: 150,
    });
})
.temp-card-list {
  display: flex;
  overflow: hidden;
  height: 100%;
  width: 19rem !important;
  flex: 0 0 auto;
  flex-direction: column;
}
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css">
 <link rel="stylesheet" href="https://pingendo.com/assets/bootstrap/bootstrap-4.0.0-alpha.6.css" type="text/css"> 

<div class="container-fluid mt-3" style="height: 100%">
  <div class="kanban-board d-flex" style="height: 100%; overflow-x: auto;">

    <div class="col temp-card-list" style="">
      <div class="">
        <h3>Col 1</h3>
      </div>
      <div id="list-1" class="card-list pr-2" style="overflow-y: auto; min-height-5rem; height: 100%;">
        <div class="card card-body mb-2 p-2">
          <p>Col 1 - First Card</p>
        </div>

        <div class="card card-body mb-2 p-2">
          <p>Col 1 - Second Card</p>
        </div>
      </div>
    </div>

    <div class="col temp-card-list" style="">
      <div class="">
        <h3>Col 2</h3>
      </div>
      <div class="card-list pr-2" id="list-2" style="overflow-y: auto; min-height-5rem; height: 100%;">
        <div class="card card-body mb-2 p-2">
          <p>Col 2 - First Card</p>
        </div>

        <div class="card card-body mb-2 p-2">
          <p>Col 2 - Second Card</p>
        </div>
      </div>
    </div>
  </div>
</div>

<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.10.1/Sortable.min.js"></script>

Код ссылки: "codepen.io/Tejeshwar_51/pen/zYvNreL".

...