Vue.jsはテキストボックスのコンポーネントの使用をドラッグ&ドロップできます。


テキストボックスをドラッグ&ドロップすることで、ユーザーがテキストボックスにオプションをドラッグして入力を決定することができます。このようなコンポーネントは、より直感的にすべてのオプションを見ることができ、複数の入力と共通のオプションのセットとすることができます。似たようなコンポーネントは3 D Windroseアプリ、Graph Maker Appなど複数のアプリにも使われています。

登録コンポーネント
テキストボックスのコンポーネントをドラッグ&ドロップすることができます(つまり、パッケージのこの部分のコードCtrl+C and Ctrl+V)を登録します。

<script type="text/x-template" id="drag-and-drop-text-box-template">
…
</script>
<script>
Vue.component("drag-and-drop-text-box", {
 template: "#drag-and-drop-text-box-template",
…
</script>
コンポーネントを追加
カスタムラベル<drag-and-drop-text-box></drag-and-drop-text-box>を直接使用して、テキストボックスのドラッグ&ドロップ可能コンポーネントを追加します。

<drag-and-drop-text-box :columns="columns“ :input="input"></drag-and-drop-text-box>
ソースコード
Github
以上はVue.jsのテキストボックスのコンポーネントの詳細な内容を詳細に説明しました。Vueについてはテキストボックスのコンポーネントをドラッグ&ドロップすることができます。他の関連記事に注目してください。