SortableJS 套件複習

先來上個簡單的範例

HTML:

<div id="example1" class="list-group col">
				<div class="list-group-item">Item 1</div>
				<div class="list-group-item">Item 2</div>
				<div class="list-group-item">Item 3</div>
				<div class="list-group-item">Item 4</div>
				<div class="list-group-item">Item 5</div>
				<div class="list-group-item">Item 6</div>
</div>

JS:

var el = document.getElementById('example1');
var sortable = new Sortable(el, {
    animation: 150,
    //這邊class名稱怎麼設 底下css就怎麼打
    ghostClass: 'blue-background-class',
    onUpdate: function (/**Event*/evt) {
		console.log(evt);
	  },
});

CSS:

這邊要調一下背景顏色

.blue-background-class{
  background-color: #C8EBFB!important;
}

這款排序套件可以幫忙我們進行排序，就不用寫一堆底層的原生方法去排序，只要new一下，還能取得各種event!!

Codepen範例

# SortableJS 套件複習

SortableJS 套件複習