<div id="elements-container" class="drag-drop">
    <div class="drag-element">
        <a href="#!" class="edit"><span class="mdi ico-more-vert"  aria-hidden="true"></span></a>
        <h3 class="drag-area">
            Role 1
            <span class="mdi ico-keyboard-arrow-right" aria-hidden="true"></span>
        </h3>
    </div>
    <div class="drag-element">
        <a href="#!" class="edit"><span class="mdi ico-more-vert"  aria-hidden="true"></span></a>
        <h3 class="drag-area">
            Role 2
            <span class="mdi ico-keyboard-arrow-right" aria-hidden="true"></span>
        </h3>
    </div>
    <div class="drag-element">
        <a href="#!" class="edit"><span class="mdi ico-more-vert"  aria-hidden="true"></span></a>
        <h3 class="drag-area">
            Role 3
            <span class="mdi ico-keyboard-arrow-right" aria-hidden="true"></span>
        </h3>
    </div>
    <div class="drag-element">
        <a href="#!" class="edit"><span class="mdi ico-more-vert"  aria-hidden="true"></span></a>
        <h3 class="drag-area">
            Role 4
            <span class="mdi ico-keyboard-arrow-right" aria-hidden="true"></span>
        </h3>
    </div>
</div>

<!-- Load drag element Js -->
<script src="assets/backend/js/vendors/drag-arrange.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $('.drag-element').arrangeable({dragSelector: '.drag-area'});
    });
</script>