JavaScriptはスティッキーを実装します

フロントエンド開発では、ドラッグ アンド ドロップ、ポップアップ ウィンドウなどの特殊効果を実装する必要が生じることがよくあります。中でもスティッキーエフェクトも非常に興味深く実用的なエフェクトです。この記事では、JavaScript を使用してスティッキー効果を実現する方法を紹介します。

1. スティッキー エフェクトの概要

スティッキー エフェクトとは、要素をドラッグすると、その要素が指定された要素に貼り付けられ、指定された要素内で自由に移動できる効果を指します。 。この効果は、ファイルのドラッグ アップロード、ジグソーパズルなどのアプリケーション シナリオで非常に広範囲に発生します。

2. スティッキー効果を実現する手順

1. ドラッグ可能な要素を作成する

最初に、ドラッグ可能な要素を作成する必要があります。実装プロセスでは、HTML、CSS、JavaScript を使用して完了できます。たとえば、次のコード:

<div id="drag" class="drag">Drag me!</div>

.drag {
  position: absolute;
  top: 100px;
  left: 100px;
  width: 100px;
  height: 100px;
  background-color: #3498db;
  cursor: move;
}

var drag = document.getElementById("drag");

var posX = 0;
var posY = 0;
var elemX = 0;
var elemY = 0;

drag.onmousedown = function(e) {
  e.preventDefault();

  posX = e.clientX;
  posY = e.clientY;

  elemX = drag.offsetLeft;
  elemY = drag.offsetTop;

  document.onmousemove = dragElement;
  document.onmouseup = stopDragging;
}

function dragElement(e) {
  e.preventDefault();

  var newX = elemX + e.clientX - posX;
  var newY = elemY + e.clientY - posY;

  drag.style.left = newX + "px";
  drag.style.top = newY + "px";
}

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

上記のコードでは、クラス「drag」を持つ div 要素を作成し、それにスタイルを割り当てました。次に、JavaScript を使用して、mousedown、mousemove、mouseup イベントを要素に追加し、ドラッグ効果を実現しました。

2. 指定された要素の作成

貼り付け可能なターゲットである指定された要素を作成する必要があります。この例では、指定された要素としてクラス「drop」を持つ div 要素を使用します。たとえば、次のコード:

<div id="drop" class="drop">Drop me here!</div>

.drop {
  position: absolute;
  top: 300px;
  left: 300px;
  width: 200px;
  height: 200px;
  background-color: #e74c3c;
}

3. スティッキー効果の実現

指定された要素内でドラッグされた要素が解放されたとき、要素を指定された要素に固着する必要があります。要素の上に移動し、要素内を自由に移動します。実装コードは以下のとおりです。

var drop = document.getElementById("drop");

drag.onmouseup = function(e) {
  var rect = drop.getBoundingClientRect();

  if (elemX >= rect.left && elemX <= rect.right && elemY >= rect.top && elemY <= rect.bottom) {
    drop.appendChild(drag);
    drag.style.position = "relative";
    drag.style.left = "0";
    drag.style.top = "0";
  }
}

上記のコードでは、getBoundingClientRect() メソッドを通じて、指定された要素の長方形領域を取得します。次に、mouseup イベントで、ドラッグされた要素の位置が長方形の領域内にあるかどうかを判断します。この領域内にある場合は、指定した要素にドラッグ要素を追加し、その位置を相対に設定して、指定した要素内で自由に移動できるようにします。

3. スティッキー効果の最適化

上記のコードはすでに基本的なスティッキー効果を実現していますが、滑らかさと信頼性を向上させるために注意が必要な詳細がまだいくつかあります。の効果。

1. 要素のマウスを次にドラッグする

要素をドラッグするとき、ユーザー エクスペリエンスを向上させるために、ドラッグされた要素の中心にマウスの位置を指定できます。 。実装コードは次のとおりです。

drag.onmousemove = function(e) {
  drag.style.cursor = "move";

  var posX = e.clientX - drag.offsetWidth / 2;
  var posY = e.clientY - drag.offsetHeight / 2;

  drag.style.left = posX + "px";
  drag.style.top = posY + "px";
}

2. ドラッグされた要素のロックを解除します

実装コードでは、document.onmousemove と document.onmouseup を使用して、ドラッグ効果。ただし、ドラッグされた要素が親要素の外に移動すると、mousemove イベントと Mouseup イベントが引き続きトリガーされるため、ドラッグされた要素を解放できなくなります。この問題を解決するには、ドラッグされた要素をマウスダウン イベントでロックし、マウスアップ イベントで解放する必要があります。実装コードは次のとおりです。

var isDragging = false;

drag.onmousedown = function(e) {
  e.preventDefault();

  isDragging = true;

  posX = e.clientX;
  posY = e.clientY;

  elemX = drag.offsetLeft;
  elemY = drag.offsetTop;

  document.onmousemove = dragElement;
  document.onmouseup = stopDragging;
}

function stopDragging(e) {
  isDragging = false;

  document.onmousemove = null;
  document.onmouseup = null;
}

document.onmousemove = function(e) {
  if (isDragging) {
    var posX = e.clientX - drag.offsetWidth / 2;
    var posY = e.clientY - drag.offsetHeight / 2;

    drag.style.left = posX + "px";
    drag.style.top = posY + "px";
  }
}

3. sticky element border limit

ドラッグされた要素が指定された要素の外に移動すると、予期しない動作が発生します。したがって、スティッキー効果に境界制約を追加する必要があります。実装コードは次のとおりです。

drag.onmouseup = function(e) {
  var rect = drop.getBoundingClientRect();

  if (elemX >= rect.left && elemX <= rect.right && elemY >= rect.top && elemY <= rect.bottom) {
    drop.appendChild(drag);
    drag.style.position = "relative";
    drag.style.left = "0";
    drag.style.top = "0";
  } else {
    drag.style.top = Math.max(0, Math.min(drop.offsetHeight - drag.offsetHeight, e.clientY - rect.top - drag.offsetHeight / 2)) + "px";
    drag.style.left = Math.max(0, Math.min(drop.offsetWidth - drag.offsetWidth, e.clientX - rect.left - drag.offsetWidth / 2)) + "px";
  }
}

上記のコードでは、Math.max メソッドと Math.min メソッドを使用して、ドラッグされた要素の境界を制限します。こうすることで、ドラッグされた要素は、指定された要素の境界の外に移動できなくなります。

4. 概要

この記事では、JavaScript を使用してスティッキー効果を実現する方法を紹介し、実装プロセス中の最適化について詳しく説明します。実際のシナリオでは、スティッキー効果は非常に便利であり、この記事で説明する方法は他のアプリケーション シナリオにも適用できます。スティッキー効果は単純に見えますが、まだ多くの詳細が含まれているため、実装者はより注意を払う必要があります。

以上がJavaScriptはスティッキーを実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。