Vue.jsでドラッグして幅を可変させたい。

Question

前提・実現したいこと

今Vue.jsを使用してフロントを作成しています。
その際にドラッグで境界幅を可変出来る仕組みを作ろうと考えています。
イメージとしてはコードペンのような感じです。(CSSとHTMLの欄の間が可変出来る)

<template>
  <div id="board">
    <div class="box1">
      <div class="text-center"><span><font size="2">板1</font></span></div>
    </div>
    <div class="box2">
      <div class="text-center"><span><font size="2">板2</font></span></div>
    </div>
    <div class="box3">
      <div class="text-center"><span><font size="2">板3</font></span></div>
    </div>
  </div>
</template>

JavaScriptの部分で悩んでます。
画面初心者の為、知識をお借り頂ければと思います。
宜しくお願い致します。

Answer 1

下記のライブラリ見つけましたので参考にされてはどうでしょうか?

https://nathancahill.github.io/Split.js/

Comments

[r_sk]

お返事遅くなり申し訳ございません。
こんな曖昧な質問内容なのに答えてくださりありがとうございます！
確かにこれだと求めている機能を実現出来そうです。
ありがとうございました！