JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="wrapper wrapper-content animated fadeInRight">
  <div class="row">
    <div class="col-lg-6">
      <div class="ibox">
        <div class="ibox-title">
          <h5>Element 1</h5>
        </div>
        <div class="ibox-content">
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-lg-6">
        <div class="ibox">
          <div class="ibox-title">
            <h5>Element 2</h5>
          </div>
          <div class="ibox-content">
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-lg-6">
      <div class="ibox">
        <div class="ibox-title">
          <h5>Element 3</h5>
        </div>
        <div class="ibox-content">
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-lg-6">
      <div class="ibox">
        <div class="ibox-title">
          <h5>Element 4</h5>
        </div>
        <div class="ibox-content">
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-lg-6">
      <div class="ibox">
        <div class="ibox-title">
          <h5>Element 5</h5>
        </div>
        <div class="ibox-content">
        </div>
      </div>
    </div>
  </div>
</div>

JavaScript

function WinMove() {
    var element = "[class*=col]";
    var handle = ".ibox-title";
    var connect = "[class*=col]";
    $(element).sortable(
        {
            handle: handle,
            connectWith: connect,
            tolerance: 'pointer',
            forcePlaceholderSize: true,
            opacity: 0.8
        })
        .disableSelection();
}

$(document).ready(function() {
  WinMove()
})