moveable : 選択した図形に対して js を適用する

moveable は、ある class （前のページでは root ）に対して要素の回転・拡大ができるのですが、root という要素が複数あると最初のものに対してしか適用されません。

いくつかの図形があって、それをマウスクリックで選択するとその図形に対して moveable が適用されるということをやりたいのですが、そのためには選択された要素に対して js を適用する必要があります。

最近は jQuery はあまり人気がないようですが、私は便利だと思っているので使っています。
もちろん、JavaScript でも可能と思いますが、慣れている jQuery で実行しました。

<div class="illust"><img src="illusts/elev01.png" alt=""></div>
<div class="illust"><img src="illusts/reces01.png" alt=""></div>
<div class="illust"><img src="illusts/erosion01.png" alt=""></div>
<div class="illust"><img src="illusts/conv01.png" alt=""></div>

jQuery(function(){
	$(".illust").on("click", function(){
		$(".illust").removeClass("root");
		$(this).addClass("root");
		$.getScript("static/js/index.js");
	});
});

このようにすると、ある図形をクリックするとすべての root という class が除去されて、新しくclass が追加されて、それに対して moveable が動くようになるはずですが、どういうわけか removeClass は実行されている感じがしません。

つまり、クリックしたすべての図形に対して moveable が適用されている感じです。それはそれで構わないのでそのまま使うことにします。

Uncaught SyntaxError: redeclaration of const move

static/js/index.js は最初は以下のようになっていました。

const move = new Moveable(document.body, {
	target: document.querySelector(".root"),
	draggable: true,
	rotatable: true,
	scalable:true,
});
move.on("drag", ({ target, transform }) => {
	target.style.transform = transform;
});
move.on("rotate", ({ target, transform }) => {
	target.style.transform = transform
});
move.on("scale", ({ target, transform }) => {
	target.style.transform = transform
});

しかしこのままでは、「Uncaught SyntaxError: redeclaration of const move」というエラーが出て動きません。

そのまま読めば、move という定数を再宣言しているのはダメということでしょうか。

そこで、上のコードから最初の行の const を削除したら動くようになりました。