Javascript ドラッグアンドドロッププロトタイプ-jsチュートリアル-php.cn

Javascript ドラッグアンドドロッププロトタイプ

PHPz

リリース： 2018-09-29 16:15:13

オリジナル

1246 人が閲覧しました

この記事では主に Javascript のドラッグアンドドロップのプロトタイプを紹介します (コードを 1 行ずつ分析することで、ドラッグアンドドロップの原理を簡単に理解できます)。必要な方は

の原理を参照してください。ドラッグアンドドロップ: 実際には、これはマウスであり、左上隅からの距離は変わりません。下の写真を見てみましょう:

この赤い点はマウスです。

ドラッグ-ドラッグとは、実際にはマウスの位置からオブジェクトの位置を計算することを意味します。これは非常に単純ですが、非常に意図的です。では、この距離はどうやって求めるのでしょうか？ ?

マウスの位置とオブジェクトの位置の違いは距離ですよね？そして、この対角線は水平線と垂直線から構成されます。

プログラムの実行方法を見てみましょう。

<p id="p1"></p>

ログイン後にコピー

実は彼が変えたのは、とあるpの左上で、その後動き始めました。その方法には絶対的な位置付けがあるはずですよね？

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

ログイン後にコピー

ここにはいくつかのステップがあります。 1. マウスを下に向ける 2. マウスを上に向ける 3. マウスを動かす

<script type="text/javascript">
   window.onload = function() {
    var op = document.getElementById("p1");
    var disX = 0;
    var disY = 0;
    op.onmousedown = function(ev) {
     var oEvent = ev || event; // 浏览器兼容
     disX = oEvent.clientX - op.offsetLeft; // 横向的位置就是鼠标的位置-p的位置
     disY = oEvent.clientY - op.offsetTop;
    };

    op.onmousemove = function(ev) {
      var oEvent = ev || event;
      op.style.left = oEvent.clientX - disX+&#39;px&#39;; // 当前鼠标的位置-disX
      op.style.top = oEvent.clientY - disY+&#39;px&#39;;
     };
   };
  </script>

ログイン後にコピー

写真を見て話してください:

var opLeft = oEvent.clientX - disX;

ログイン後にコピー

写真はそれを非常に明確に示しています

マウスアップ今は効果を見ないでください。。

クリックしなくてもマウスが追いかけてくるのはなぜでしょうか。 ? ?

mousemove を見てみましょう: Javascript では、開始する前にマウスを押す必要があるとは誰も規定していませんよね? マウスを押すかどうかに関係なく、この Mousemove は発生し続けるため、問題はここから発生します。。マウスを押し下げる前は、マウスをその上に移動しても反応しないはずですが、マウスを押したときにのみ反応します。

したがって、この Mousemove は、出現したらすぐに追加するのではなく、マウスが押されるまで待ってから、mousemove を追加するようにしてください。

ちなみにmouseupを追加すると、その役割が反映されます。関数は op.onmousemove = null; 移動イベントを削除します。

それ以外の場合、マウスを持ち上げると、オブジェクトは引き続き追従します。 op.onmouseup = null; ゴミを残さないと、マウスを上げても意味がありません。

変更されたコードを見てみましょう。

<script type="text/javascript">
   window.onload = function() {
    var op = document.getElementById("p1");
    var disX = 0;
    var disY = 0;
    op.onmousedown = function(ev) {
     var oEvent = ev || event; // 浏览器兼容
     disX = oEvent.clientX - op.offsetLeft; // 横向的位置就是鼠标的位置-p的位置
     disY = oEvent.clientY - op.offsetTop;

     op.onmousemove = function(ev) {
      var oEvent = ev || event;
      op.style.left = oEvent.clientX - disX+&#39;px&#39;; // 当前鼠标的位置-disX
      op.style.top = oEvent.clientY - disY+&#39;px&#39;;
     };
     op.onmouseup = function() {
      op.onmousemove = null;
      op.onmouseup = null; // 不留垃圾,鼠标抬起本来也就没有用了
     };

    };

   };
  </script>

ログイン後にコピー

これで、単純なドラッグアウトが作成されました。もちろん、解決しなければならない小さな問題がまだいくつかあります。

しかし、何はともあれ、ドラッグアンドドロップのプロトタイプはすでにあります。

上記はこの章の全内容です。その他の関連チュートリアルについては、JavaScript ビデオチュートリアルをご覧ください。