ホームページ

ウェブフロントエンド

jsチュートリアル

Javascript ドラッグアンドドロップの高度なアプリケーション (コードを 1 行ずつ分析し、ドラッグアンドドロップの原理を簡単に理解できるようにします)_JavaScript スキル

Javascript ドラッグアンドドロップの高度なアプリケーション (コードを 1 行ずつ分析し、ドラッグアンドドロップの原理を簡単に理解できるようにします)_JavaScript スキル

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 04:18 PM

前のドラッグの周囲に何かがある場合にどのような問題が発生するか見てみましょう? 高度なブラウザでは問題ありません。IE7 でテストしてみると問題が発生します。写真の通り

テキストが選択されていることがはっきりとわかります。そして、このユーザーエクスペリエンスは非常に悪く、使用するのが不便です。ちなみに、以前に return false を追加しましたが、これを削除すると、Chrome でも同じ問題が発生します。つまり、この return false は、Chrome ff IE9 などのブラウザの問題を解決できることを意味します。

実際、私たちの開発では、ページ上に 1 つの div だけを配置することはできません。Baidu マップなど、他の場所を選択することはできません。
では、どうすればそのような抗力を実現できるのでしょうか? IE7の問題は解決できるのでしょうか？

解決策:

これを解決するには、ちょっとしたトリックを使用できます。このトリックは IE6 ～ 8 でのみサポートされており、他のブラウザでは return false を使用するだけで十分なので、実際に問題を解決できます。どのようなテクニックがあるのか見てみましょう

イベント攻略です！！簡単な説明と添付のコード

<title></title>
    <script type="text/javascript">
      window.onload=function(){
        var oBtn=document.getElementById("btn");
        oBtn.onclick=function(){
          alert(1);
        };

        // 网页上所有地方的上的事件都集中到一个按钮身上 IE 专用
        oBtn.setCapture(); // 点击哪里都是弹a
      }
    </script>
  </head>
  <body>
    <input type="button" id="btn" value="按钮" />
  </body>

ログイン後にコピー

実際には、ページ上のすべての場所からのイベントが 1 つの点に集中します。ページ上の任意の場所をクリックすると、setCapture() の関数がポップアップします。

すべてのイベントを 1 つのボタンに集中して処理します。！ IEのみ対応です！！

それでは、前のコードを変更する方法を見てみましょう。。。。

まず、すべてのドキュメントを div に戻します。マウスのドラッグが速くなるため、div をドラッグする方が簡単だということを思い出してください。そのため、ドキュメントにイベントを追加します。

今これを行う必要はありません。前の div に setCapture() を追加して効果を確認してください。

<body>
    IE 7 中的文字会被选中 ，
    <br />如果不加return false chrome ff 也会有这样的问题 asdsadad
    <br />
    <div id="div1">
      asdsadad asdsadad asdsadad
    </div>
    asdsadadasdsadadasdsadad
  </body>

ログイン後にコピー

<style type="text/css">
      #div1 {
        width: 200px;
        height: 200px;
        background: red;
        position: absolute;
      }
    </style>

ログイン後にコピー

<script type="text/javascript">
     // 拖拽空div 低版本的火狐有bug
   window.onload = function() {
    var oDiv = document.getElementById("div1");
    var disX = 0;
    var disY = 0;
    oDiv.onmousedown = function(ev) {
     var oEvent = ev || event;
     disX = oEvent.clientX - oDiv.offsetLeft;
     disY = oEvent.clientY - oDiv.offsetTop;
     oDiv.onmousemove = function(ev) {
      var oEvent = ev || event;
      var oDivLeft = oEvent.clientX - disX;
      var oDivTop = oEvent.clientY - disY;

      oDiv.style.left = oDivLeft + 'px';
      oDiv.style.top = oDivTop + 'px';
     };

     oDiv.onmouseup = function() {
      oDiv.onmousemove = null;
      oDiv.onmouseup = null;
     };
     oDiv.setCapture();
     return false; // 阻止默认事件,解决火狐的bug
    };
   };
  </script>

ログイン後にコピー

現時点では、Div をドラッグするときに実際にマウスでドラッグするという問題は発生しません。実際、setCapture() を追加すると、Web ページ全体のすべてのイベントがこの div に収集されます。

実際、現在、このテキストは選択されません。なぜ？ Web ページ上のテキストや画像のイベントはすべて div にあるため、イベントを取得できなくなります。したがって、当然選ばれません。

もちろん、別の質問がありますか? ? ? ?それらの単語を選択しようとすると、選択できないことがわかります。

どうするか、イベントは div に集中しています。。。 !!!!

実際、この setCapture() はロックのようなもので、イベントはすべて div 上にあります。これで、対応するものが releaseCapture();

になります。

releaseCapture(); はキャプチャを解放します。実際には、マウスを上げたときに追加するだけです。

window.onload = function() {
    var oDiv = document.getElementById("div1");
    var disX = 0;
    var disY = 0;
    oDiv.onmousedown = function(ev) {
     var oEvent = ev || event;
     disX = oEvent.clientX - oDiv.offsetLeft;
     disY = oEvent.clientY - oDiv.offsetTop;
     oDiv.onmousemove = function(ev) {
      var oEvent = ev || event;
      var oDivLeft = oEvent.clientX - disX;
      var oDivTop = oEvent.clientY - disY;

      oDiv.style.left = oDivLeft + 'px';
      oDiv.style.top = oDivTop + 'px';
     };

     oDiv.onmouseup = function() {
      oDiv.onmousemove = null;
      oDiv.onmouseup = null;
      oDiv.releaseCapture();
     };
     oDiv.setCapture();
     return false; // 阻止默认事件,解决火狐的bug
    };
   };

ログイン後にコピー

テキスト選択の問題は解決できるようになりました。実際、この setCapture() は互換性がなく、他のブラウザに入れるのは間違いです。

今回と前回のコードをマージするだけなので、互換性があると判断するだけです。最後に、コンパイルされたコードが添付されます

<script type="text/javascript">
      window.onload = function() {
        var oDiv = document.getElementById("div1");
        var disX = 0;
        var disY = 0;
        oDiv.onmousedown = function(ev) {
          var oEvent = ev || event;
          disX = oEvent.clientX - oDiv.offsetLeft;
          disY = oEvent.clientY - oDiv.offsetTop;

          if (oDiv.setCapture) {
            oDiv.onmousemove = mouseMove;

            oDiv.onmouseup = mouseUp;

            oDiv.setCapture(); // IE 7 下文字就不会被选中 其实就是文字或图片得不到事件
          } else {
            document.onmousemove = mouseMove;
            document.onmouseup = mouseUp;
          }

          function mouseMove(ev) {
            var oEvent = ev || event;
            var oDivLeft = oEvent.clientX - disX;
            var oDivTop = oEvent.clientY - disY;
            oDiv.style.left = oDivLeft + 'px';
            oDiv.style.top = oDivTop + 'px';
          }

          function mouseUp(ev) {
            this.onmousemove = null;
            this.onmouseup = null;
            if (oDiv.releaseCapture) {
              oDiv.releaseCapture(); // 释放捕获
            }
          }
          return false; // 阻止默认事件,解决火狐的bug
        };
      };
    </script>

ログイン後にコピー

はい、終わりましたO(∩_∩)Oははは〜

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

ホットツール

ホットトピック

Gmailメールのログイン入り口はどこですか？

7338

Java チュートリアル

1627

CakePHP チュートリアル

1352

Laravel チュートリアル

1265

PHP チュートリアル

1210

Related knowledge

JavaScriptの文字列文字を交換します Mar 11, 2025 am 12:07 AM

JavaScript文字列置換法とFAQの詳細な説明この記事では、javaScriptの文字列文字を置き換える2つの方法について説明します：内部JavaScriptコードとWebページの内部HTML。 JavaScriptコード内の文字列を交換します最も直接的な方法は、置換（）メソッドを使用することです。 str = str.replace（ "find"、 "置換"）; この方法は、最初の一致のみを置き換えます。すべての一致を置き換えるには、正規表現を使用して、グローバルフラグGを追加します。 str = str.replace（/fi

カスタムGoogle検索APIセットアップチュートリアル Mar 04, 2025 am 01:06 AM

このチュートリアルでは、カスタムGoogle検索APIをブログまたはWebサイトに統合する方法を示し、標準のWordPressテーマ検索関数よりも洗練された検索エクスペリエンスを提供します。驚くほど簡単です！検索をyに制限することができます

独自のAjax Webアプリケーションを構築します Mar 09, 2025 am 12:11 AM

それで、あなたはここで、Ajaxと呼ばれるこのことについてすべてを学ぶ準備ができています。しかし、それは正確には何ですか？ Ajaxという用語は、動的でインタラクティブなWebコンテンツを作成するために使用されるテクノロジーのゆるいグループ化を指します。 Ajaxという用語は、もともとJesse Jによって造られました

例JSONファイルの例 Mar 03, 2025 am 12:35 AM

この記事シリーズは、2017年半ばに最新の情報と新鮮な例で書き直されました。このJSONの例では、JSON形式を使用してファイルに単純な値を保存する方法について説明します。キー価値ペア表記を使用して、あらゆる種類を保存できます

8見事なjQueryページレイアウトプラグイン Mar 06, 2025 am 12:48 AM

楽なWebページレイアウトのためにjQueryを活用する：8本質的なプラグイン jQueryは、Webページのレイアウトを大幅に簡素化します。この記事では、プロセスを合理化する8つの強力なjQueryプラグイン、特に手動のウェブサイトの作成に役立ちます

＆＃x27; this＆＃x27; JavaScriptで？ Mar 04, 2025 am 01:15 AM

コアポイントこれは通常、メソッドを「所有」するオブジェクトを指しますが、関数がどのように呼び出されるかに依存します。現在のオブジェクトがない場合、これはグローバルオブジェクトを指します。 Webブラウザでは、ウィンドウで表されます。関数を呼び出すと、これはグローバルオブジェクトを維持しますが、オブジェクトコンストラクターまたはそのメソッドを呼び出すとき、これはオブジェクトのインスタンスを指します。 call（）、apply（）、bind（）などのメソッドを使用して、このコンテキストを変更できます。これらのメソッドは、与えられたこの値とパラメーターを使用して関数を呼び出します。 JavaScriptは優れたプログラミング言語です。数年前、この文はそうでした