Javascript ドラッグ アンド ドロップのプロトタイプのいくつかの問題 (コードを 1 行ずつ分析することで、ドラッグ アンド ドロップの原理を簡単に理解できる)_JavaScript スキル

今日は最後のドラッグ プロトタイプの問題をいくつか解決します。以下の問題点は何でしょうか？

全員が問題を確認できるように、前号の Javascript コードを添付します。

<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;

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

    };

   };
  </script>

1. 現在のドラッグ中にマウスを速く動かすと、 マウスが div から外れ、この時点では div がマウスに追従しないことがわかります。

では、なぜこの問題が発生するのでしょうか?

その理由は実際には非常に簡単で、mousemove イベントを div に追加しているため、マウスが div から離れると、その時点では Mousemove はトリガーされなくなります。

解決策: イベントはドキュメントに読み込まれます。マウスは何があってもページ内にあるため、何があってもマウス移動がトリガーされ、問題なく素早く移動できます。

次に、それに応じてコードを変更します。

<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;
    // 事件加载document 上
     document.onmousemove = function(ev) {
      var oEvent = ev || event;
      oDiv.style.left = oEvent.clientX - disX+'px';
      oDiv.style.top = oEvent.clientY - disY+'px';
     };
     oDiv.onmouseup = function() {
      document.onmousemove = null;
      oDiv.onmouseup = null; 
     };

    };

   };
  </script>

そうすれば、この問題は解決できます。

2. すぐにドラッグする問題は解決しましたが、この位置にマウスを移動すると、問題があるかどうかを確認してください。

マウスが div 上にないことがはっきりとわかります。この時点でマウスを持ち上げると、戻った後もマウスが移動することがわかります。

これはまたバグです!

実際、この問題は上記の問題と同じです。解決策は非常に簡単です。マウスアップをドキュメントに追加してみましょう。

document.onmouseup = function() { 
      document.onmousemove = null; 
      document.onmouseup = null; 
     };

このように、今の位置に移動すれば前のバグは発生せず、早く移動すれば問題ありません。すべてが正常です。

3. ブラウザの互換性の問題を見てみましょう

実際、Firefox の下位バージョンではこのような問題があります

。初めてドラッグすると、正しく表示されます。一度ドラッグして、押したまま移動すると、その後ろにこの影があることがわかります。どうしたの？

実際にドラッグしているのは空の div です。Firefox にはバグがあるため、div にコンテンツを追加するとどうなるでしょうか

今度は問題がなくなったことがわかるでしょう。

つまり、Firefox のバグは空の div にのみ発生します。

解決策:

これは実際には非常に簡単で、onmousedown でブラウザのデフォルト イベントが false を返さないようにするだけです。 なぜ onmousedown に追加するのでしょうか?

ドラッグがどのイベントから始まるかは、マウスが押されたときのonmousedownから始まりますよね。したがって、onmousedown でロードする必要があります。

実際、Firefox のバグをブロックするために return false を追加しただけです。

いくら引きずっても問題ありません。

コードを添付します:

<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;
     // 事件加载document 上
     document.onmousemove = function(ev) {
      var oEvent = ev || event;
      oDiv.style.left = oEvent.clientX - disX+'px';
      oDiv.style.top = oEvent.clientY - disY+'px';
     };
     document.onmouseup = function() {
      document.onmousemove = null;
      document.onmouseup = null;
     };

     return false;

    };

   };
  </script>

プログラムは完成しましたが、ユーザーエクスペリエンスにはまだいくつかの問題があります。

たとえば、ユーザーがこの div をブラウザの外にドラッグする可能性がありますが、それを解決するにはどうすればよいでしょうか?

それでは判定を加えてみましょう。 これは非常に簡単で、左から外に出ると

の場合、それは直接 0 に等しく、左から抜け出すことができなくなります。それから、上記も同様です。

では、右側から出られなくなるのを防ぐにはどうすればよいでしょうか? ? 絵を描くだけで一目瞭然です。 実際、ページの表示幅から div の幅を引くだけで計算できます。

これがいわゆる最大値であり、移動距離がこの最大値を超えているかどうかを判断してください。それでは以下同様です。

完全なコードを添付します:

<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;

          document.onmousemove = function(ev) {
            var oEvent = ev || event;
            // 存储div当前的位置
            var oDivLeft = oEvent.clientX - disX;
            var oDivTop = oEvent.clientY - disY;


            // 从左边拖出去了
            if (oDivLeft < 0) {
              oDivLeft = 0;
            } else if (oDivLeft > document.documentElement.clientWidth - oDiv.offsetWidth) {
              oDivLeft = document.documentElement.clientWidth - oDiv.offsetWidth;
            }

            if (oDivTop < 0) {
              oDivTop = 0;
            } else if (oDivTop > document.documentElement.clientHeight - oDiv.offsetHeight) {
              oDivTop = document.documentElement.clientHeight - oDiv.offsetHeight;
            }

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

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

これでドラッグ アンド ドロップは比較的完了しました。 O(∩_∩)O