Q&A
> 下記のような形でmousedown, mouseover, mouseupのマウスイベントを利用して実装してみたがうまく実装できなかった。
イベントの中身はどのようなものだったのですか？
前提
Angular 12
TypeScript 4.3.5
selectタグでmultiple属性を付与すると、マウスを押したままドラッグすると複数選択できるフォームを実装できます。
このフォームをdivタグとTypesscriptのイベントを使用してどうにか実装できないか検討しています。
html
1<select multiple> 2 <option value="値Ａ">選択肢Ａ</option> 3 <option value="値Ｂ">選択肢Ｂ</option> 4 <option value="値Ｃ">選択肢Ｃ</option> 5</select>
行なったこと
・ 下記のような形でmousedown, mouseover, mouseupのマウスイベントを利用して実装してみたがうまく実装できなかった。
<div (mouseover)="mouseover($event)"> <div value="値Ａ">選択肢Ａ</div> <div value="値Ｂ">選択肢Ｂ</div> <div value="値Ｃ">選択肢Ｃ</div> </div>
何かご存知の方、もしくは実装したことがある方などなんでも良いのでコメント頂けるとありがたいです。
追記
失礼致しました。正確な実装はこちらになります。
View側
HMML
1<div *ngFor="let value of array"> 2 <div (mouseover)="mouseover(value)">{{ value }}</div> 3</div>
Component側
コンポーネント側では以下のプロパティとメソッドを定義しています。
array = ['選択肢A', '選択肢B', '選択肢C']; mouseover(event: any) { console.log(event); }
イベントが発火した場合、メソッドが受け取るものはこのようになります。
回答1件
0
ベストアンサー
実装したことありますが、まあ面倒ですね。
親のdiv要素で mousedown, mousemove, mouseup のイベントを聞き、
- mousedown で選択開始アイテムを記録し、選択モードを開始する
- mousemove で現在のアイテムから選択開始アイテムの間を選択状態にする
- mouseup などで選択開始アイテムをクリアし、選択モードを終了する
というのが基本的な動作ですが、他にもイロイロと考慮することがあります。
mouseup以外にも様々な条件で選択モードを終了する必要があります。たとえばマウスボタンを押したままブラウザウィンドウのフォーカスがなくなるとか。
ドラッグ中に選択範囲を縮めたときにもともとの選択状態を復元するなら、選択開始時点の状態を保存しておく必要があります。
アイテムがたくさんあってスクロール可能なら、マウスポインタが端まで来たら自動スクロールさせた方が自然な動きでしょう。
投稿2021/10/27 16:04
編集2021/10/27 16:10
総合スコア20878
ご回答ありがとうございます。難しそうですが、一度実装してみます。
選択モードの開始や終了はフラグのようなもので実装するイメージでしょうか？
下記のようなものをイメージしております。
・mousudownでenableSelect = true, mouseupでenableSelect = falseのようにフラグを実装する。
・enableSelect = true であればmousemoveの処理が実行される
そんな感じで大丈夫だと思います。
ありがとうございます。
>マウスポインタが端まで来たら自動スクロールさせる
上記実装はどのように行なったのか教えて頂きたいです。。
> 上記実装はどのように行なったのか
私以外の知見も得られるように、新しい質問を作りましょう。
ありがとうございます。投稿いたしましたので、ご確認頂けたらと思います。
https://teratail.com/questions/366788?modal=q-comp
あなたの回答
tips
プレビュー
