Bootstrap 4 Advanced Components : drag and drop items with Sortable.js

Bootstrap 4 Advanced Components : Clear button v2 for input field

by Sahil Kashyap

HTML

<link rel="stylesheet" href="https://daemonite.github.io/material/css/material.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
<script src="https://daemonite.github.io/material/js/material.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/RubaXa/Sortable/Sortable.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div class="container">
  <div class="row mt-4">
    <div class="col">
      <div class="jumbotron">
        <h1>Drag and Drop items for Bootstrap 4 - Advanced Components</h1>
        <p class="lead">by djibe.</p>
        <p class="text-muted">(thx to BS4 + Daemonite Material Design + Sortable.js)</p>
        <p>
          Plugin for BS4 to be able to drag and drop elements with the screen. <a href="https://github.com/RubaXa/Sortable" target="_blank">Sortable.js</a> does all the job without jQuery.
        </p>
        <h2>
          Tutorial
        </h2>
        <ol>
          <li>Add this lines to your html, below boostrap.bundle.js<br>
            <code>&lt;script src="https://cdn.jsdelivr.net/gh/RubaXa/Sortable/Sortable.min.js"></code>
          </li>
          <li>
            Initialize Sortable<br>
            <code>
              Sortable.create(demo1, {
  animation: 100,
  group: 'list-1',
  draggable: '.list-group-item',
  handle: '.list-group-item',
  sort: true,
  filter: '.sortable-disabled',
  chosenClass: 'active'
});
            </code>
          </li>
          <li><a href="https://github.com/RubaXa/Sortable" target="_blank">Read full documentation</a></li>
        </ol>
        <h2>
          Demo
        </h2>
        <p>
          Try to drag and drop items within lists or between lists.
        </p>
        <ul class="list-group"...

JavaScript

Sortable.create(demo1, {
  animation: 100,
  group: 'list-1',
  draggable: '.list-group-item',
  handle: '.list-group-item',
  sort: true,
  filter: '.sortable-disabled',
  chosenClass: 'active'
});

Sortable.create(demo2, {
  group: 'list-1',
  handle: '.list-group-item'
});