HTML、CSS、JavaScript を使用したドラッグ可能な要素の作成

現代の Web 開発では、インタラクティブ性がユーザーを惹きつけ、動的なユーザー エクスペリエンスを生み出す鍵となります。インタラクティブ性を追加する 1 つの方法は、要素をドラッグ可能にすることです。この投稿では、HTML、CSS、JavaScript を使用してドラッグ可能な要素を作成する方法を検討します。

出力:

HTML 構造
基本的な HTML 構造から始めましょう。ドラッグ可能にする単純な div 要素を作成します。コードは次のとおりです:

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Draggable Element</title>
<link rel="stylesheet" href="styles.css">


<div class="draggable" id="draggableElement">Drag me!</div>
<script src="script.js"></script>

このコードには、draggable クラスと、draggableElement の ID を持つ div があります。これがドラッグ可能にする要素になります。

CSS を使用したドラッグ可能な要素のスタイル設定

.draggable {
    position: absolute;
    cursor: grab;
    width: 100px;
    height: 100px;
    background-color: #007bff;
    color: #fff;
    text-align: center;
    line-height: 100px;
    border-radius: 8px;
    user-select: none;
}

.draggable.dragging {
    cursor: grabbing;
}

この CSS では、要素のスタイルを設定するための .draggable クラスを定義します。ページ内で自由に移動できるように、位置を絶対位置に設定します。カーソル プロパティは、要素がドラッグ可能であることを示すために、grab に設定されます。また、幅、高さ、背景色、テキストの色、テキストの配置、およびテキストを垂直方向と水平方向の中央に配置する行の高さを定義します。丸い角には border-radius が追加され、ドラッグ中のテキスト選択を防ぐために user-select: none が使用されます。続きを読む

JavaScript によるインタラクティブ性の追加

let draggableElement = document.getElementById('draggableElement');
let offsetX, offsetY;

draggableElement.addEventListener('mousedown', startDragging);
draggableElement.addEventListener('mouseup', stopDragging);

function startDragging(e) {
    e.preventDefault();
    offsetX = e.clientX - draggableElement.getBoundingClientRect().left;
    offsetY = e.clientY - draggableElement.getBoundingClientRect().top;
    draggableElement.classList.add('dragging');
    document.addEventListener('mousemove', dragElement);
}

function dragElement(e) {
    e.preventDefault();
    let x = e.clientX - offsetX;
    let y = e.clientY - offsetY;
    draggableElement.style.left = x + 'px';
    draggableElement.style.top = y + 'px';
}

function stopDragging() {
    draggableElement.classList.remove('dragging');
    document.removeEventListener('mousemove', dragElement);
}

ドラッグ開始: ユーザーが要素上でマウス ボタンを押したときに、startDragging 関数がトリガーされます。この関数:

1. e.preventDefault() を使用してイベントのデフォルトの動作を防止します。
2. マウスの位置から要素の左上隅の位置を減算してオフセットを計算します。
3. カーソルを変更するためのドラッグ クラスを追加します。
4. mousemove イベントのイベント リスナーをドキュメントに追加します。これにより、dragElement 関数がトリガーされます。

要素のドラッグ: マウスが移動すると、dragElement 関数がトリガーされます。この関数:

1. イベントのデフォルトの動作を防止します。
2. マウスの位置とオフセットに基づいて要素の新しい位置を計算します。
3. 要素の左側と上部の CSS プロパティを更新して、要素を新しい位置に移動します。

ドラッグの停止: stopDragging 関数は、ユーザーがマウス ボタンを放したときにトリガーされます。この関数:

1. ドラッグ クラスを削除して、カーソルを元の状態に戻します。
2. ドキュメントからmousemoveイベントリスナーを削除して、ドラッグを停止します。続きを読む

結論:
イベント リスナーと DOM 操作の基本を理解することで、Web プロジェクトに対話性を追加し、ユーザー エクスペリエンスを向上させることができます。

記事全文を読む - ここをクリックしてください

以上がHTML、CSS、JavaScript を使用したドラッグ可能な要素の作成の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。