アドベントカレンダー以降、SVGを徐々に触りはじめ、スゴく楽しいです。
荒削りなコードでリファクタリングすべき箇所はいっぱいありますが、最近やりたかった四角形の両端がつまむエリアになっていて、大きさを変更できるというパーツを自作しました。
React、Vueどちらのサンプルでも良かったのですが、同じようなエントリを中々見つけることができなかったので投稿しておきます。
もともとはReactでCodepenにあったコードをサンプルにしました。
See the Pen React SVG drag and drop by Sean Lynch (@techniq) on CodePen.
できたもの
See the Pen Vue Draggable SVG by sakapun (@sakapun) on CodePen.
知らなかったこと
mousedownしたらmousemoveのイベントをDOMに貼ること
カーソルの動きが早すぎて対象にmousemoveを貼ると追い越して動かなくなってしまいがちです。
同様にサンプルではmouseupを大きめの対象に貼っていましたが、それだとバグることがありました。
touchmoveのポジションのとり方がめんどくさい
event.touches[0].clientXとしなきゃいけないのは知りませんでした。
知ってたけど紹介したいこと
eventを引数として渡す時は特別な$eventを渡してあげます。
よくわかりきってないこと
offsetXとかclientXとpageXとどれを使えば良いのか分かってない。
微妙に10pxほどずれるのを計算指定しているけど、良くないことなと思っているが未解決
最後に一言
今まで図形の描画ってライブラリを使うものだと思ってましたけど、簡単なものなら自作できるようになってきました。
ReactでもVueでも、SVGってグリグリ動かせて楽しいですね！