今回はSplit.jsのonDrag説明です、なのでSplit.jsの基本実装は割愛させて頂きます
- 基本実装についてはdocumentを参考にしてください。
https://github.com/nathancahill/split/tree/master/packages/splitjs
onDragについて
- onDragというプロパティに関数を渡す。
- この関数の引数には、Splitしているelementのsizeの割合が入って来ます(今回はsizesとする)
var split = Split(elements, {
sizes: sizes,
gutterSize: 4,
// onDragに関数を渡してあげる
onDrag: (sizes) => { console.log(sizes); }, // [89.02959490659764, 10.970405093402363]
});
実際に動かしてみる
- このような感じで、sizesがdrag中にconsoleに出ているのがわかります
取得したsizesからwidthを計算
- sizesは割合なので、下記のような研鑽を行う(例:分割の一つ目)
// elementは例
var splitElementWidth = (element.offsetWidth / 100) * sizes[0]; // 342
まとめ
下記の場合に便利だと思います！参考になれば幸いです🥳
- drag中に何か処理をしたい時
- drag中にリアルタイムで幅を取得したい時
Discussion