Demo

Code

                      
<div class="row" data-plugin="dragula"
  data-containers='["handle-dragula-left", "handle-dragula-right"]'
  data-handleClass="dragula-handle">
  <div class="col-md-6">
    <div class="bg-light p-2 p-lg-4">
      <h5 class="mt-0">Part 1</h5>
      <div id="handle-dragula-left" class="py-2">
  
        <div class="card mb-0 mt-2">
          <div class="card-body">
            <div class="media align-items-center">
              
              <div class="media-body">
                <h5 class="mb-1 mt-1">Louis K. Bond</h5>
                <p class="mb-0"> Founder & CEO </p>
              </div> <!-- end media-body -->
              <span class="dragula-handle"></span>
            </div> <!-- end media -->
          </div> <!-- end card-body -->
        </div> <!-- end col -->
  
        <div class="card mb-0 mt-2">
          <div class="card-body">
            <div class="media align-items-center">
              
              <div class="media-body">
                <h5 class="mb-1 mt-1">Dennis N. Cloutier</h5>
                <p class="mb-0"> Software Engineer </p>
              </div> <!-- end media-body -->
              <span class="dragula-handle"></span>
            </div> <!-- end media -->
          </div> <!-- end card-body -->
        </div> <!-- end col -->
  
      </div> <!-- end company-list-1-->
    </div> <!-- end div.bg-light-->
  </div> <!-- end col -->
  
  <div class="col-md-6">
    <div class="bg-light p-2 p-lg-4">
      <h5 class="mt-0">Part 2</h5>
      <div id="handle-dragula-right" class="py-2">
        <div class="card mb-0 mt-2">
  
          <div class="card-body p-3">
            <div class="media align-items-center">
              
              <div class="media-body">
                <h5 class="mb-1 mt-1">James M. Short</h5>
                <p class="mb-0"> Web Developer </p>
              </div> <!-- end media-body -->
              <span class="dragula-handle"></span>
            </div> <!-- end media -->
          </div> <!-- end card-body -->
        </div> <!-- end col -->
  
        <div class="card mb-0 mt-2">
          <div class="card-body p-3">
            <div class="media align-items-center">
              
              <div class="media-body">
                <h5 class="mb-1 mt-1">Gabriel J. Snyder</h5>
                <p class="mb-0"> Business Analyst </p>
              </div> <!-- end media-body -->
              <span class="dragula-handle"></span>
            </div> <!-- end media -->
          </div> <!-- end card-body -->
        </div> <!-- end col -->
  
      </div> <!-- end company-list-2-->
    </div> <!-- end div.bg-light-->
  </div> <!-- end col -->
  
  </div> <!-- end row -->
                      
                    

Required Files

                      
  <script src="assets/vendors/dragula/dragula.min.js"></script>
  <script src="assets/js/pages/dragula.init.js"></script>