jsステップ12-17 jqueryマウスの左ボタン押下ドラッグ機能を実現
12932 ワード
jsステップ12-17 jqueryマウスの左ボタン押下ドラッグ機能を実現
一、まとめ
一言でまとめると、リスナーのオブジェクトはドキュメントでなければなりません.マウスを押してmousemoveイベントを実行し、マウスを放してmousemoveイベントのバインドをキャンセルします.divのオフセットはpageXとpageYです.
1、どうして直接divにmousemoveを入れてはいけませんか.
これではdivを選択して移動する必要があります.また、移動が速くなるとマウスがdivから離れ、移動できません.
2、グローバルドラッグを実現するためにリスニングが必要なイベントオブジェクトは誰ですか?
document
3、イベントをドラッグするとdivの位置座標は何ですか?
pageXとpageY
4、マウスの左クリック時にドラッグ効果をトリガーするにはどうすればいいですか?
documentにmousedownイベントを追加する
5、mousedownイベントだけを追加するか、マウスクリックは確かに追従し、マウスを離すか、それとも追従するか、私たちはどのようにこの問題を解決しますか?
マウスの放したdivが動く問題を解決するmouseupイベントを追加します
二、jqueryはドラッグ機能を実現する
1、関連知識
ドラッグ機能
実例説明:簡単なドラッグ要素の機能を実現する.
ケースポイント:このケース自体は簡単ですが、キーボードイベントとイベントオブジェクトを統合しています.
2、コード
一、まとめ
一言でまとめると、リスナーのオブジェクトはドキュメントでなければなりません.マウスを押してmousemoveイベントを実行し、マウスを放してmousemoveイベントのバインドをキャンセルします.divのオフセットはpageXとpageYです.
1、どうして直接divにmousemoveを入れてはいけませんか.
これではdivを選択して移動する必要があります.また、移動が速くなるとマウスがdivから離れ、移動できません.
19 $(document).mousemove(function(e){
20 $('#div1').offset({ 21 left:e.pageX, 22 top:e.pageY 23 }) 24 })2、グローバルドラッグを実現するためにリスニングが必要なイベントオブジェクトは誰ですか?
document
19 $(document).mousemove(function(e){
20 $('#div1').offset({ 21 left:e.pageX, 22 top:e.pageY 23 }) 24 })3、イベントをドラッグするとdivの位置座標は何ですか?
pageXとpageY
20 $('#div1').offset({ 21 left:e.pageX, 22 top:e.pageY 23 })4、マウスの左クリック時にドラッグ効果をトリガーするにはどうすればいいですか?
documentにmousedownイベントを追加する
18 $(document).mousedown(function(){
19 $(document).mousemove(function(e){ 20 $('#div1').offset({ 21 left:e.pageX, 22 top:e.pageY 23 }) 24 })5、mousedownイベントだけを追加するか、マウスクリックは確かに追従し、マウスを離すか、それとも追従するか、私たちはどのようにこの問題を解決しますか?
マウスの放したdivが動く問題を解決するmouseupイベントを追加します
16 <script>
17 $(function(){ 18 $(document).mousedown(function(){ 19 $(document).mousemove(function(e){ 20 $('#div1').offset({ 21 left:e.pageX, 22 top:e.pageY 23 }) 24 }) 25 $(document).mouseup(function(){ 26 $(document).off('mousemove') 27 }) 28 }) 29 30 }) 31 script>二、jqueryはドラッグ機能を実現する
1、関連知識
ドラッグ機能
実例説明:簡単なドラッグ要素の機能を実現する.
ケースポイント:このケース自体は簡単ですが、キーボードイベントとイベントオブジェクトを統合しています.
2、コード
1 DOCTYPE html>
2 <html lang="en">
3 <style>
4 style>
5 <head>
6 <meta charset="UTF-8">
7 <title> title>
8 <script type="text/javascript" src="jquery-3.1.1.min.js">script>
9 <style type="text/css">
10 div{width: 100px;height: 100px;border-radius: 50px;background: orange;position: absolute;}
11 style>
12 style>
13 head>
14 <body>
15 <div id="div1">div>
16 <script>
17 $(function(){
18 $(document).mousedown(function(){
19 $(document).mousemove(function(e){
20 $('#div1').offset({
21 left:e.pageX,
22 top:e.pageY
23 })
24 })
25 $(document).mouseup(function(){
26 $(document).off('mousemove')
27 })
28 })
29
30 })
31 script>
32 body>
33 html>