html
1<div class="resizeEl" id="resizeEl" @mousedown="resizeX" v-bind:style="{ width: ln_width + 'px' }"> 2</div>
typescript
1ln_width = 240 2 3resizeX(){ 4 let press:boolean 5 let start_x:number 6 $("#resizeEl").on("mousedown",function(e){ 7 press = true 8 start_x = e.clientX 9 }) 10 $(document).on("mouseup mouseleave",function(){ 11 press = false 12 }) 13 $("#resizeEl").on("mousemove",function(e){ 14 if(press){ 15 16 this.ln_width = 240 + (e.clientX - start_x ) 17 18 }}) 19}
マウスでドラッグして横幅をリサイズできる要素を作りたいのですが
データバインドがうまくいきません
値は入るのですが、なぜかhtml側に反映されません
マウスでホールドしてる間はデータバインドができないみたいなのがあるんでしょうか...
あと最初にクリックした時に実行されるはずの
$("#resizeEl").on("mousedown",function(e){
press = true
start_x = e.clientX
})
この部分が一回目のクリックでは実行されず、2回目のクリックから実行されます...
追記
この一連の関数を別ファイル(ビューモデル)に置いていたのですが、vueのmethodsに直接書いたら治りました。
ただ、一回目のクリックではやはりホールドできずダブルクリックしないとうまく動きません...
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2018/03/16 07:47
2018/03/16 08:37
退会済みユーザー
2018/03/16 08:40