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

3314 ワード

今回はSplit.jsのonDrag説明です、なのでSplit.jsの基本実装は割愛させて頂きます

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に出ているのがわかります
    Gyazo

取得したsizesからwidthを計算

  • sizesは割合なので、下記のような研鑽を行う(例:分割の一つ目)
   // elementは例
var splitElementWidth = (element.offsetWidth / 100) * sizes[0]; // 342

まとめ

下記の場合に便利だと思います!参考になれば幸いです🥳

  • drag中に何か処理をしたい時
  • drag中にリアルタイムで幅を取得したい時