トゥートの並び順をフリップするボタンを作成

index.html

@@ -47,6 +47,7 @@ <h1><a href="./">mastogetter</a></h1>
           </span>
         </p>
       </div>
+      <input id="flip" type="button" value="flip"></input>
       <div id="cards">
       </div>
     </div>

js/common.js

@@ -193,10 +193,10 @@ export function handleDrop(e) {
 	let node_index = -1;
 	for (let i = 0; i < children.length; i++) {
 		if (children[i] === src) {
-			src_index = i - 1;
+			src_index = i;
 		}
 		if (children[i] === node) {
-			node_index = i - 1;
+			node_index = i;
 		}
 	}
 	if (src_index < 0) {

js/index.js

@@ -80,10 +80,31 @@ function addCard() {
 			.reverse()[0]
 	);
 
+	if ($("cards").hasChildNodes() && $("cards").firstChild.nodeName === "#text") {
+		$("cards").removeChild($("cards").firstChild);
+	}
 	$("cards").appendChild(clone);
 	impl.genPermalink();
 }
 
+function flipCards() {
+	const cards = $("cards");
+	if (!cards) return;
+	let card_nodes = [];
+	while (cards.hasChildNodes()) {
+		if (cards.firstChild.nodeName !== "#text") {
+			card_nodes.push(cards.firstChild);
+		}
+		cards.removeChild(cards.firstChild);
+	}
+	if (card_nodes.length === 0) return;
+	while (card_nodes.length > 0) {
+		cards.appendChild(card_nodes.pop());
+	}
+	impl.card_list.reverse();
+	impl.genPermalink();
+}
+
 function copyPermalink() {
 	if (isEmptyPermalink()) {
 		alertUsageNoPermalink();
@@ -125,4 +146,7 @@ impl.ready(() => {
 	$("copylink").addEventListener("click", () => {
 		copyPermalink();
 	});
+	$("flip").addEventListener("click", () => {
+		flipCards();
+	});
 });