Vue は div の高さをドラッグ可能にします

この記事では、divのドラッグ可能な高さを実現するためのVueの具体的なコードを参考までに共有します。具体的な内容は次のとおりです。

ここに、ページ div のドラッグ機能を実現できる既製のデモがありますが、効果が私の希望とは少し異なるため、実際のニーズに合わせて再度修正しました。まずは、現在のデモ効果を見てみましょう。

<テンプレート>
  <div id="eagleMapContainer" style="border: 1px solid red;overflow-y: auto;" title="">
    <div id="tz" @mousedown="dragEagle" style="border: 1px solid blue;">
      <div title="ドラッグしてサイズを変更" id="move_tz" style="border: 1px solid green;"></div>
    </div>
  </div>
</テンプレート>

<スクリプト>
  エクスポートデフォルト{
    名前: "eagleMap",
    データ（） {
      戻る {}
    },
    メソッド: {
      ドラッグイーグル: 関数(e) {
        var targetDiv = document.getElementById('eagleMapContainer'); 
        //クリックされたときにマップ コンテナーの幅と高さを取得します。
        var targetDivHeight = targetDiv.offsetHeight;
        var startX = e.clientX;
        var startY = e.clientY;
        var _this = これ;
        document.onmousemove = 関数 (e) {
          e.preventDefault();
          //マウスのドラッグの幅と高さを取得します。絶対値を取得します。var distX = Math.abs(e.clientX - startX);
          var distY = Math.abs(e.clientY - startY);
          // 上方向にドラッグ:
          (e.clientY < startY) の場合 {
            targetDiv.style.height = targetDivHeight + distY + 'px';
          }
          // 下にドラッグ:
          (e.clientX < startX && e.clientY > startY) の場合 {
            targetDiv.style.height = (targetDivHeight - distY) + 'px';
          }
          （parseInt（targetDiv.style.height）> = 300）の場合{
            targetDiv.style.height = 300 + 'px';
          }
          （parseInt（targetDiv.style.height）<= 150）の場合{
            targetDiv.style.height = 150 + 'px';
          }
        }
        document.onmouseup = 関数（）{
          ドキュメント.onmousemove = null;
        }
      }
    },
  };
</スクリプト>

<スタイルスコープ>
  #イーグルマップコンテナ{
    位置: 絶対;
    左: 13%;
    下: 10px;
    zインデックス: 200;
    オーバーフロー: 非表示;
    可視性: 可視;
    幅: 200ピクセル;
    高さ: 200px;
  }

  #tz {
    位置: 絶対;
    右: 1px;
    上: 1px;
    幅: 27px;
    高さ: 20px;
    カーソル:ne-resize;
    zインデックス: 200001;
    背景画像: url("");

  }

  #tz:ホバー{
    背景色: #666;
  }

  #move_tz {
    位置: 絶対;
    右: 0px;
    上: 0px;
    幅: 27px;
    高さ: 20px;
    カーソル:ne-resize;
    zインデックス: 100;
    背景画像: url("");
    背景位置: 0px 0px;
  }
</スタイル>

しかし、その効果は私が望んでいたものとは少し違ったので、少し修正する必要がありました。

私が望む効果は、小さな四角いリストが多数含まれる div があることです。スクロールが制限を超えて設定されているため、スクロールバーを使用して div にドラッグを追加し、高さを変更します。

次のステップは、上記のデモを変換することです。簡単にするために、コードに移動するだけです。

上にドラッグする必要がある div の下に div を追加し、この div をクリックしてドラッグ機能を開始します。

<!-- 小さなボックスをドラッグ アンド ドロップします -->
    <div id="tz" @mousedown="dragEagle">
      <div title="ドラッグしてサイズを変更" id="move_tz"></div>
    </div>

ドラッグに応じて高さが変化する div の ID を「fuDiv」として設定し、メソッドを記述する必要があります。

// ドラッグイーグル(e) {
        var targetDiv = document.getElementById('fuDiv');
        //クリックされたときにマップ コンテナーの幅と高さを取得します。
        var targetDivHeight = targetDiv.offsetHeight;
        var startX = e.clientX;
        var startY = e.clientY;
        var _this = これ;
        document.onmousemove = 関数 (e) {
          e.preventDefault();
          //マウスのドラッグの幅と高さを取得します。絶対値を取得します。var distY = Math.abs(e.clientY - startY);

          // 上方向にドラッグ:
          (e.clientY < startY) の場合 {
            targetDiv.style.height = targetDivHeight - distY + 'px';
          }
          // 下にドラッグ:
          e.clientX < startX && e.clientY > startY) の場合 {
            targetDiv.style.height = (targetDivHeight + distY) + 'px';
          }
          （parseInt（targetDiv.style.height）> = 320）の場合{
            targetDiv.style.height = 320 + 'px';
          }
          （parseInt（targetDiv.style.height）<= 160）の場合{
            targetDiv.style.height = 160 + 'px';
          }
        }
        document.onmouseup = 関数（）{
          ドキュメント.onmousemove = null;
        }
      },

次に、それらの CSS スタイルを設定します。実際、この部分はカジュアルであり、自分の好みに応じて行うことができます。

  #tz {
    幅: 100%;
    高さ: 5px;
    カーソル: s-resize;
    zインデックス: 200001;
  }
  
  #move_tz {
    幅: 100%;
    高さ: 5px;
    カーソル: s-resize;
    zインデックス: 100;
    背景画像: url("");
    背景位置: 0px 0px;
  }

最終結果: