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

今日は、ドラッグしたオブジェクトが特定のdiv外にドラッグされないようにする方法と、ドラッグ吸着機能について見ていきます

前回述べたように、ドラッグは視覚領域の外にはドラッグできません。これに基づいて、親の外にドラッグされないように親 div を追加します。原理は以前と同じで簡単です。

HTML コード:

<div id="div2">
      <div id="div1">

      </div>
    </div>

CSSコード:

<style type="text/css">
      #div1 {
        width: 100px;
        height: 100px;
        background: red;
        position: absolute;
      }
      #div2 {
        width: 400px;
        height: 300px;
        background: #CCCCCC;
        position: relative;
      }
    </style>

JavaScript コード:

<script type="text/javascript">
       // 拖拽空div 低版本的火狐有bug
      window.onload = function() {
        var oDiv = document.getElementById("div1");
        var oDiv2 = document.getElementById("div2");
        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 > oDiv2.offsetWidth - oDiv.offsetWidth) {
              oDivLeft = oDiv2.offsetWidth - oDiv.offsetWidth;
            }

            if (oDivTop < 0) {
              oDivTop = 0;
            } else if (oDivTop > oDiv2.offsetHeight - oDiv.offsetHeight) {
              oDivTop = oDiv2.offsetHeight - 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>

レンダリングは次のとおりです:

シンプルにしてください。

次のステップは、自動的に吸収させる方法です。

実際、これは誰でもよく使います。たとえば、PS に小さなウィンドウがあり、ページの端にドラッグすると、自動的にそれに吸着されます。

ドラッグ アンド ドロップにどのようにしてそのような機能があるのでしょうか?

これは、実際に運動について話したときにも触れましたが、タクシーに乗るのと同じように、運転手に目的地に近い場所で停止するように頼むことはできません。

手順は同じで、値が近づいたら直接値を代入するだけです。ドラッグしたオブジェクトが左から 50px のときに、左に到達したと考え、値 0 を割り当てると、自動的に左にくっつきます。

原理は非常に単純です。コードがそれをどのように実装しているかを見てみましょう。いくつかの変更を加えてください

<script type="text/javascript">
      window.onload = function() {
        var oDiv = document.getElementById("div1");
        var oDiv2 = document.getElementById("div2");
        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;
            var oDivLeft = oEvent.clientX - disX;
            var oDivTop = oEvent.clientY - disY;


            // 当left 小于50 就自动归0 这样实现吸附
            if (oDivLeft < 50) {
              oDivLeft = 0;
            } else if (oDivLeft > oDiv2.offsetWidth - oDiv.offsetWidth) {
              oDivLeft = oDiv2.offsetWidth - oDiv.offsetWidth;
            }

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

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

          document.onmouseup = function() {
            document.onmousemove = null;
            document.onmouseup = null;
          };
          return false; 
        };
      };
    </script>

次回は、より責任があり便利な高度なアプリケーションについて説明します。ドラッグ アンド ドロップ機能が改善されました。

たとえば、画像をドラッグしてテキストを選択します。たとえば、現在のドラッグ アンド ドロップ ページには div が 1 つしかありませんが、通常の開発では決して遭遇することはありません。

実際、ページ上に何かがある場合、このドラッグ アンド ドロップではどのような問題が発生しますか? ? ?

次回解決しますよ〜お楽しみに