Vue3 の Draggable を CDN で呼びたいのにがやり方が分からん全国の女子高生集まれ

こんだけいろいろ調べて試しているのに動かないのマ～？

と全国の女子高生達が困っているはず。

ろくな情報ヒットしないもんな。Node.js でやるのばっか。

ちょっと試したいだけだとか、ちょっとサイトで使いたいだけなのにビルドとかマジウザイわな。

今日は機嫌が良いからおっちゃんがちゃちゃっと教えたる。

普段だったら「甘えんな！！」つってドラゴンスクリューから四の字に行くと見せかけての STF を極めるとこだがな。

枕も済んだところで、早速コード。

doctype html
html(lang='ja')
  head
    title Vue3 Sortable Test
  body
    script(src='https://unpkg.com/vue@3.2.45/dist/vue.global.prod.js')
    script(src='https://cdn.jsdelivr.net/npm/vue-draggable-next@2.1.1/dist/vue-draggable-next.global.min.js')
    style
      :scss
        [v-cloak] {
          display: none;
        }
        .item {
          border: 1px solid #ccc;
          padding: 1rem;
          margin: .5rem;
          border-radius: .5rem;
          .handle {
            cursor: grabbing;
            margin-right: .5rem;
          }
        }
    #app(v-cloak)
      draggable(:list='items' @change='sorted' handle='.handle')
        .item(v-for='item in items')
          span.handle ■
          span {{ item.name }}
    script(type='module').
      Vue.createApp({
        data() {
          return {
            items: [
              { name: 'HOGE 1' },
              { name: 'HOGE 2' },
              { name: 'HOGE 3' },
            ],
          }
        },
        components: {
          draggable: VueDraggableNext.VueDraggableNext
        },
        methods: {
          sorted() {
            console.log(this.items)
          }
        }
      }).mount('#app')

ビルドウザいつっといて、pug だの scss だの使っているのは愛嬌。これ以外で書くと守護霊の怒りで体がビリビリ痺れるからしゃーない。

まぁそこは読み替えてくれ。大体わかんだろ(投げやり)。

とりあえず、vue と vue.draggable.next を CDN から呼ぶ。

script(src='https://unpkg.com/vue@3.2.45/dist/vue.global.prod.js')
script(src='https://cdn.jsdelivr.net/npm/vue-draggable-next@2.1.1/dist/vue-draggable-next.global.min.js')

CDN で UMD 版の Vue を呼んだ場合、Vue で呼べる。
vue.draggable.next は VueDraggableNext.VueDraggableNext でコンポーネントとして使える。

Vue.createApp({
  data() {
    return {
      items: [
        { name: 'HOGE 1' },
        { name: 'HOGE 2' },
        { name: 'HOGE 3' },
      ],
    }
  },
  components: {
    draggable: window['VueDraggableNext'].VueDraggableNext
  },
  methods: {
    sorted() {
      console.log(this.items)
    }
  }
}).mount('#app')

並び替えると、sorted が呼ばれる。並び替えると this.items も勝手に並び替わる。とっても素敵。

handle は Vue2 版だと options で指定していたが、それじゃ効かない。handle 属性として指定する。

そもそもなんで handle 指定すんの？と思うかもしれないが、これやらないとスマホで Draggable が操作をすげぇ邪魔してくる。
スクロールが出来なかったりボタンが押せなかったり。なのでドラッグ出来る部分を絞った方が良い。

draggable(:list='items' @change='sorted' handle='.handle')
  .item(v-for='item in items')
    span.handle ■
    span {{ item.name }}

以上！

この記事が気に入ったらチャンネル登録といいねボタン押してね！

じゃぁね～～～バーハハーイキーン。