console.log("sort.js!!");

window.onload = (e)=>{
	console.log("onload!!");

     // 1, SortableJS   
    const div1 =  document.getElementById("terms_def");
    div1.onmousedown = function () { 
	const elem = document.getElementById("term-box");
	Sortable.create(elem, {
	    animation: 150,
	    onStart:  onStartEvent,  // 2-1, ドラッグ開始時
	    onEnd:    onEndEvent,    // 2-2, ドラッグ終了時
	    onChange: onChangeEvent, // 2-3, ドラッグ変化時
	    onSort:   onSortEventTerm    // 2-4, 並び替え終了時
	});
    };

    const div2 =  document.getElementById("infers_def");
    div2.onmousedown = function () {
	const elem = document.getElementById("infer-box");
	Sortable.create(elem, {
	    animation: 150,
	    onStart:  onStartEvent,  // 2-1, ドラッグ開始時
	    onEnd:    onEndEvent,    // 2-2, ドラッグ終了時
	    onChange: onChangeEvent, // 2-3, ドラッグ変化時
	    onSort:   onSortEventInfer    // 2-4, 並び替え終了時
	});
    };
}

function onStartEvent(e){
    console.log("onStart!!");
   
}

function onEndEvent(e){
	console.log("onEnd!!");
}

function onChangeEvent(e){
    console.log("onChange!!");
   
}

function onSortEventTerm(e){
	console.log("onSort!!");
	// 3, 並び替え後のエレメントを確認
	const items = e.target.querySelectorAll("li.term-box-list");
	for(let i=0; i<items.length; i++){
		console.log(items[i].getAttribute("id"));
	}
}

function onSortEventInfer(e){
	console.log("onSort!!");
	// 3, 並び替え後のエレメントを確認
	const items = e.target.querySelectorAll("li.infer-box-list");
	for(let i=0; i<items.length; i++){
		console.log(items[i].getAttribute("id"));
	}
}