20140215【JS】li要素をドラッグ＆ドロップで入れ替える
お題
li要素をドラッグ＆ドロップで入れ替える
プログラム概要
li要素をドラッグ＆ドロップで入れ替える
ソース
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>hoge</title>
</head>
<body>
<ul>
<li id="li1" draggable="true">hoge1</li>
<li id="li2" draggable="true">hoge2</li>
<li id="li3" draggable="true">hoge3</li>
</ul>
<script>
setupDraggableElement(document.getElementById('li1'));
setupDraggableElement(document.getElementById('li2'));
setupDraggableElement(document.getElementById('li3'));
function setupDraggableElement(element){
element.addEventListener('dragstart', handleDragStart);
element.addEventListener('drop', handleDrop);
element.addEventListener('dragenter', cancelEvent);
element.addEventListener('dragover', cancelEvent);
}
function handleDragStart(e){
e.dataTransfer.setData('text', e.target.id);
}
function cancelEvent(e){
e.preventDefault();
}
function handleDrop(e){
var sourceId = e.dataTransfer.getData('text');
var source = document.getElementById(sourceId);
var sourceHTML = source.innerHTML;
var target = e.currentTarget;
var targetHTML = target.innerHTML;
target.innerHTML = sourceHTML;
source.innerHTML = targetHTML;
e.preventDefault();
}
</script>
</body>
</html>
実行結果
入れ替え前
hoge1とhoge3をドラッグ&ドロップで入れ替えると...
