やりたいこと
- マウスでdiv要素などをドラッグで動かす
- 要素のクリックしたところを持てるようにする
現状
- クリックしたら動くようになっている
- 右と下に行くときの挙動がおかしい
- マウスに要素の左上が来るようになっている
コード
html
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="utf-8"> 5 <title>Vue.js App</title> 6 <link rel="stylesheet" href="./div_main.css"> 7</head> 8<body> 9 <div id="app"> 10 <div id="back" @mousemove="getXY"> 11 <comp v-for="item in list" :key="item.id" v-bind="item" @getid="getID"></comp> 12 </div> 13 {{ID}} {{move}} 14 </div> 15 16 <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script> 17 <script src="./div_main.js"></script> 18</body> 19</html>
javascript
1Vue.component('comp', { 2 template: `<p :style="{left: left, top: top, 'font-size': fsize}" @click="clicked">{{ text }}</p>`, 3 props: {id: Number, left: String, top: String, fsize: String, text: String}, 4 methods: { 5 clicked() { 6 this.$emit('getid', this.id) 7 } 8 } 9}) 10 11new Vue({ 12 el: '#app', 13 data: { 14 list: [ 15 {id: 0, left: '100px', top: '100px', 'fsize': '50px', text: 'ここに書いてね'}, 16 {id: 1, left: '150px', top: '150px', 'fsize': '30px', text: 'ここに書いてね'} 17 ], 18 ID: 0, 19 move: false 20 }, 21 methods: { 22 getID(id) { 23 this.ID = id 24 if (this.move) { 25 this.move = false 26 } else { 27 this.move = true 28 } 29 }, 30 getXY(event) { 31 if (this.move) { 32 this.list[this.ID].left = event.offsetX + 'px' 33 this.list[this.ID].top = event.offsetY + 'px' 34 } 35 } 36 } 37})
css
1#back { 2 width: 500px; 3 height: 500px; 4 position: relative; 5 background-color: lightgray; 6} 7 8p { 9 position: absolute; 10 margin: 0px; 11 cursor: move; 12}
よろしくお願いします。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。