ToDoリストにドラック&ドロップ機能を実装してみた

今回は前回作ったtodoリストにドラック&ドロップ機能を実装してみた

ドラック&ドロップ

≻https://blog.ver001.com/javascript-dragdrop-sort/
https://www.ipentec.com/document/javascript-list-sortable-item
https://ja.javascript.info/mouse-drag-and-drop

更にドラック&ドロップを実装して順番を変える

記事を参考にそのまま書いてみた

document.querySelectorAll('.drag-list li').forEach (elm => {
	elm.ondragstart = function () {
		event.dataTransfer.setData('text/plain', event.target.id);
	};
	elm.ondragover = function () {
		event.preventDefault();
		this.style.borderTop = '2px solid blue';
	};
	elm.ondragleave = function () {
		this.style.borderTop = '';
	};
	elm.ondrop = function () {
		event.preventDefault();
		let id = event.dataTransfer.getData('text/plain');
		let elm_drag = document.getElementById(id);
		this.parentNode.insertBefore(elm_drag, this);
		this.style.borderTop = '';
	};
});

ほぼコピペに近いが一応書いてみた
初めてみるメソッドが多い.....
この時に起きた問題が
・クリックできない
・vscodeにeventが非推奨だと言われる

・クリック出来ない問題
原因を探索
1..listを#listに修正

2.追加ボタンをクリックされた時の処理のshowTodoいかに入れてみたらsetDataが未定義だと言われた。
setDataについて調べてみる→
≻https://developer.mozilla.org/ja/docs/Web/API/DataTransfer/setData
単純なミス

3．draggableが機能してるか確認
デベロッパーツールで確認したらついてたが動かなかった
一応htmlでliにdraggable属性をつけてみて動くか確認した所動かなった
だからdraggableについて調べてみる
そしたらdarggableはjqのライブラリjquery UIにもあるとわかったが今回はhtml属性のdraggableを使いたいと思う。
調べたところ概ね間違っていなさそう
リストには

newItem.setAttribute("draggable",true)

でdraggable属性を追加した。
これがないとドラックしようとしたら複数のリストが一緒に動いてしまい正しく作動しなかった。

4．答えをコピペして弄ってみる
そしたらidを振っていないとドラック&ドロップしても反映されない（ドラック&ドロップは出来る）

そうするとCSSのcursor:pointerによって左右されている事がわかった。
これでdraggableについても完結した

しかしドラックが出来てもドロップが出来ない。

正しい方にはドラックした時に青線が出てきているが、自分が書いたものには出てこないので、そこに問題があると思う。

idを振っていなかった。
今回はリストの番号に使った変数を再利用した

      newItem.setAttribute("id",count2)

まだ出来なかったが、確認した所```querySelectorAllが間違っていたので修正したら青線で出て無事に変更することが出来た。

それからドラック&ドロップしたときに番号も変更できるようにしたい。
ドラック&ドロップしたときにshowTodosで出来るかもしれないのでやってみる。
しかしドラック&ドロップ関数の最後に追加したら青線も出なくなってしまった。

削除ボタンを押してからドラック&ドロップが出来なくなった。

追加ボタンの所に書いてあったのをshowTodosの最後に持ってきたら使えるようになった。

もし追加or削除ボタンで更新したくないなら

前のバージョンで配列に入れないリストを作ればいけると思う。

draggableについて
https://www.pazru.net/html5/DragDrop/010.html

4．text/plainとは

・なぜeventは非推奨なのか
単純に引数にeventを記述すれば問題なくなった

https://developer.mozilla.org/ja/docs/Web/API/Event/preventDefault

draggableとは

https://developer.mozilla.org/ja/docs/Web/HTML/Global_attributes/draggable
論理型ではなく、列挙型属性とは？

ドラック&ドロップしてdoingとdoneを分ける

時間がある時に実装してみたいです

画面いっぱいにドラック&ドロップ（順番など関係なし）
https://q-az.net/elements-drag-and-drop/