Vue.js @dragleaveでdragleaveイベントを取得する方法

2023年1月2日

環境
Windows 10 Home 64bit
Vue.js 5.0.8
Google Chrome 108.0.5359.125（Official Build）（64 ビット）
yarn 1.22.19

構文
v-on:dragleave="イベント名"
@dragleave="イベント名"
イベント名: function (e) {処理コード}
「v-on:dragleave」を使用してdragleaveイベントを取得します。

使用例

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="utf-8">
  <title>dragleaveイベントサンプル</title>
  <script src="https://unpkg.com/vue@next"></script>

</head>
<body>
<div id="app" >
      <h2>{{val}}</h2>
        <div>
　　　　　  study skill 
       </div> 
      <div @dragleave="cft" >
        become smart
      </div>
  </div>
  <script>

    const result = {
      data() {
        return {
          val:''
        }
      },
      methods: {
        cft: function (e) {
          this.val = 'マウスがドラッグされました'
        }
      }
    }

    Vue.createApp(result).mount('#app')

  </script>
</body>

</html>

実行結果
要素文字「study skill」をドラッグして離れると「マウスがドラッグされました」というテキストを表示します。

Vue.js

Posted by arkgame