ドラッガブル
直接編集 #UI 実現のために必要。
ネタ
Safariでどうするか
Safari 13でようやくPointer Event APIが生えた!
座標修正の方法
領域外のドラッグ
setPointerCaptureで一発だが、外に出てしまった要素は当たり前だけど二度とつかめなくなるので注意
Pointer event API
GSAP(TweenMax系)で楽をする
https://greensock.com/draggable
サンプル(Vue.js と GSAPを同時利用)
https://codesandbox.io/s/vue-template-f69xs?fontsize=14
ThrowプロパティとSnapが有用(かつフルスクラッチはきつ)そう
GSAPとVueがtransform属性を上書きし合う形にしたので行儀は悪い
このDOMはTweenLiteからしか触らないようにしたほうが良さそうだけど、そこまでやるとゴリゴリやるのと結局変わらない行数になりそう
資料
http://www.petercollingridge.co.uk/tutorials/svg/interactive/dragging/