Split.jsでdrag中に処理をする方法

今回は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中にリアルタイムで幅を取得したい時