ネイティブjsは9マスグリッドのドラッグアンドドロップを実現します

ネイティブJSを使用して9つの正方形のグリッドを記述し、9つのグリッドの位置をドラッグして変更する効果を実現します。参考までに、具体的な内容は次のとおりです。

効果のデモンストレーション

具体的なアイデアの分析とコード:

図1:

コード：

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
 <メタ文字セット="UTF-8">
 <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
 <title>ドキュメント</title>
 <!-- 
  考え:
   1. スタイル設定: スタイル内のレイアウトには配置を使用するのが最適です。そうしないと、後でコードをドラッグアンドドロップするのが面倒になります。
    （ここでは親コンテナの具体的な位置は設定しません。親コンテナの具体的な位置を設定する場合は、移動時に状況に応じて上と左の値を計算する必要があります）
   2. 親コンテナボックスのコンテンツは、jsコードを使用して生成するのが最適で、使用やスタイルの追加に便利です。2-1: (ループで子要素を生成)
     子要素が使用する配置レイアウトは、各行の上部の値が同じで、各列の左側の値が同じであることは簡単にわかります。したがって、子要素を生成するためにループするには、3*3 のネストされたループを使用して記述し、各行のスタイルを設定できます。
    2-2: (ループによって生成されたラベルにランダムな色とテキストを追加する)
     ランダムな色を実装するために rgb() を使用します。テキストは ASCII コードまたは文字列連結を使用して生成できます。ここでは ASCII コードを使用します。
    PS: 基本的なスタイルが設定されたので、次のステップはドラッグイベント3を設定し、各要素にイベントを追加することです。ここでは、onmousedown、onmousemove、onmouseupの3つのイベントが必要です。
    3-1: (まず、onmousedownイベントを押します)
     対応する子要素を押すと、マウスから押されたターゲットの境界線までの距離を取得し、要素を複製する必要があります。
     この要素をプレースホルダーとして親コンテナーに挿入します。(クローンされたノードは HTML 構造の最後に配置されることに注意してください。処理されない場合、後でバグが発生します!!!)
    3-2: (次に、移動イベント onmousemove を処理します)
     子要素ブロックを押して移動する場合、追従移動を実現するためにターゲットの上部と左側の値を設定する必要があるため、マウスから可視ウィンドウまでの距離を取得する必要があります。ターゲットの上部と左側の値 = マウスから可視ウィンドウまでの距離 - マウスからターゲットの端までの距離 (ここでは境界線はありません。必要に応じて境界線の幅を減算します)。
     追伸: 
      ここにバグがあります! ！ ！ ！ドラッグすると、デフォルトのイベント（選択されたテキスト）が発生します。 それを放すと、onmousemove イベントをオフにしても、ターゲットは移動し続けます。したがって、ここではデフォルトのイベントを防ぐ必要があります。
    3-3: (最後に onmouseup イベントを処理します) これも最も重要なステップです。 ！ ！ ！
     中心的なアイデア:
       マウスが持ち上げられたときに、現在移動しているターゲットの中心点と各サブ要素の中心点の間の距離を計算する必要があります。
       最も近いものがそれと交換されます (ここで 3-1 で説明したバグがあり、事前に対処する必要があることに注意してください)。
     具体的なプロセス:
      3-3-1:
       まず、図 1 に示すように、ループしてドラッグ ターゲットの中心点と各子要素の中心点の間の距離を計算する必要があります。 (表示ウィンドウの左余白からのドラッグ対象の距離 - 表示ウィンドウの左余白からの子要素の距離) square + (表示ウィンドウの上余白からのドラッグ対象の距離 - 表示ウィンドウの上余白からの子要素の距離)
       四角。最後に、平方根を取って中心点までの距離を取得します (3-1 のバグを修正し、移動ラベルを構造の最後に配置して、ループ中に除外する必要があることに注意してください。そうしないと、最も近いポイントが毎回そのポイント自体になります)。
      3-3-2:
       必要な距離をすべて取得するためにループを実行し、これらの距離を配列に格納し、特定のラベルの比較を容易にするために別の配列をバックアップとして定義します。
       配列の 1 つをソートし、バックアップ配列内の最小値のインデックスを検索します。このインデックスは、対応する子要素です。
      3-3-3:
       次に、最も近い子要素の左と上の値を対象要素に与え、次に、複製されたラベルの左と上の値を最も近い子要素に与え、最後に複製されたラベルを削除します。ここでもまだバグが残ります。 ！ ！ラベルを押さずにマウスを離すと、エラーが報告されます。これは、onmouseup イベントが直接実行されるため、onmouseup イベントを削除する必要があります -->
  <スタイル>
  *{マージン: 0;パディング: 0;}
  .father{位置: 相対;}
  .father div{位置: absolute;幅: 100px;高さ: 100px;境界線の半径: 10px;テキストの配置: center;行の高さ: 100px;フォントサイズ: 30px;カーソル: ポインター;}
  </スタイル>
</head>
<本文>
 <div class="父"></div>
 <スクリプト>
  // 3*3 ループで子 div 要素を生成し、それらの配置値を設定します // 固定マージン値を設定します var mT = 15;
  var mL = 15;
  var asc = 65; //ASCII コード値 var oFather = document.querySelector('.father');
  (var i = 0; i < 3; i++){
   (var j = 0; j < 3; j++){
    var oDiv = document.createElement('div'); //子要素を作成 oFather.appendChild(oDiv);
    oDiv.style.left = j * (oDiv.offsetWidth + mL) + 'px';
    oDiv.style.top = i * (oDiv.offsetHeight + mT) + 'px';
    // ランダムな色の設定 oDiv.style.background = 'rgb('+parseInt(Math.random()*256) + "," +parseInt(Math.random()*256) + ","+parseInt(Math.random()*256)+')';
    // 文字を追加 oDiv.innerText = String.fromCharCode(asc++);
   }
  }
  // 理解しやすいように、イベントは外部に記述され、内部でタグ ループを生成できます/* var oItem = document.querySelectorAll('.father>div');
  このメソッドは静的コレクションを取得し、最初のページロードのコンテンツのみを取得します。このメソッドを使用して子要素を取得するとバグが発生します */
  var oItem = oFather.children;
  for(var k = 0; k<oItem.length; k++){
   oItem[k].onmousedown = function(e){
    var evt = e || イベント;
    // マウスからターゲット境界までの距離を取得します。var x = e.offsetX;
    var y = e.offsetY;
    var tagNode = this;
    // ターゲットタグを複製します var cloneNode = tagNode.cloneNode();
    cloneNode.style.border = '1px 破線 #fff';
    oFather.appendChild(クローンノード);
    タグノード.style.zIndex = 1;
    // アイデアで述べたように、ここではクローンされたノードとドラッグされたノードを交換する必要があるバグがあります oFather.replaceChild(cloneNode, tagNode);
    oFather.appendChild(タグノード);
    document.onmousemove = function(e){
     var evt = e || イベント; 
     var l = evt.clientX - x;
     var t = evt.clientY - y;
     tagNode.style.left = l + 'px';
     タグNode.style.top = t + 'px';
     // バグを防ぐためにデフォルトのイベントを禁止する
     false を返します。
    }
    document.onmouseup = 関数(){
     // マウスを持ち上げた後、最も近いものを決定して交換します。var oldArr = [];
     var newArr = [];
     for(var l = 0; l<oItem.length - 1; l++){
      var disX = tagNode.offsetLeft - oItem[l].offsetLeft;
      var disY = tagNode.offsetTop - oItem[l].offsetTop;
      // ピタゴラスの定理 var dis = Math.sqrt( Math.pow(disX,2) + Math.pow(disY,2) );
      古いArr.push(dis);
      newArr.push(dis);
     }
     // oldArr を小さいものから大きいものの順にソートします。oldArr.sort(function(a,b){return ab});
     var minIndex = newArr.indexOf(oldArr[0]);

     console.log('oldArr' 、 oldArr、 'newArr' 、 newArr);

     // 移動ターゲットに最も近い要素を配置します。 tagNode.style.top = oItem[minIndex].style.top;
     tagNode.style.left = oItem[minIndex].style.left;
     // クローンを最も近い位置に配置します oItem[minIndex].style.top = cloneNode.style.top;
     oItem[minIndex].style.left = cloneNode.style.left;

     //クローンされたノードを削除します oFather.removeChild(cloneNode);

     ドキュメント.onmousemove = null;
     ドキュメント.onmouseup = null;
    }
    false を返します。
   }
  }
 </スクリプト>
</本文>
</html>

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません: