Buefy Draggable Sortable

Demo

by jorgeluis

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/themes/base/jquery-ui.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/buefy/0.9.4/buefy.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/buefy/0.9.4/buefy.min.css">
<div class="demo content">
    <ul id="sortable">
        <li class="ui-state-default">Policy 1</li>
        <li class="ui-state-default">Policy 2</li>
        <li class="ui-state-default">Policy 3</li>
        <li class="ui-state-default">Policy 4</li>
    </ul>    
</div>

CSS

.demo ul { list-style-type: none; margin: 0; padding: 0; margin-bottom: 10px; }
.demo li { margin: 5px; padding: 5px; }

.draggable { height: 3em; }

.desc { margin-bottom: 2em; font-size: small;}
.desc h2 { border: solid gray; border-width: 0 0 1px 3px}
ul.note {margin-left: 2em;}
ul.note li {list-style-type: disc}

JavaScript

$(function() {
    $("#sortable").sortable({
        revert: true,
		stop: function (e, t) {        
            alert($(this).data('index'));
        },
        receive: function (ev, ui) {                  
            var $target = ($(this).data().uiSortable  || $(this).data().sortable).currentItem;
                
		    var $source = $(ui.sender);                
           $target.data('index',$source.data('index'));
        }
    });
    $("ul, li").disableSelection();
});