CSSでドラッグ＆ドロップを実現するカーソルスタイル
2024-09-27
CSSでドラッグ＆ドロップを実装する際、カーソルのスタイルを変更することでユーザーに視覚的なヒントを与えることができます。以下に、よく使用されるカーソルスタイルとそれぞれの意味を解説します。
基本的なカーソルスタイル
- no-drop
禁止型。斜めの線で、要素をここにドロップできないことを示します。 - copy
コピー型。四方向の矢印にプラス記号がついたカーソルで、要素をコピーできることを示します。 - move
移動型。四方向の矢印で、要素をドラッグできることを示します。 - pointer
ポインター型。手型のカーソルで、クリック可能な要素を示します。 - default
デフォルトのカーソル。通常は矢印の形です。
具体的な使い方
.draggable {
cursor: move;
}
.droppable {
cursor: copy;
}
.not-droppable {
cursor: no-drop;
}
上記の例では、クラス名draggableを持つ要素は移動可能なカーソルを表示し、droppableを持つ要素はコピー可能なカーソルを表示します。not-droppableを持つ要素はドロップできないことを示すカーソルを表示します。
注意事項
- 実際のドラッグ＆ドロップの機能は、JavaScriptを使用して実装する必要があります。CSSは主に視覚的なヒントを提供します。
- カーソルのスタイルは、要素のスタイルプロパティである
cursorを使用して設定します。
<div class="draggable">ドラッグ可能な要素</div>
<div class="droppable">ドロップ可能な要素</div>
<div class="not-droppable">ドロップ不可な要素</div>
CSS
.draggable {
cursor: move;
}
.droppable {
cursor: copy;
}
.not-droppable {
cursor: no-drop;
}
JavaScript
const draggableElement = document.querySelector('.draggable');
const droppableElement = document.querySelector('.droppable');
const notDroppableElement = document.querySelector('.not-droppable');
draggableElement.addEventListener('dragstart', (event) => {
event.dataTransfer.setData('text/plain', 'ドラッグされたデータ');
});
droppableElement.addEventListener('dragover', (event) => {
event.preventDefault(); // ドロップを許可
});
droppableElement.addEventListener('drop', (event) => {
event.preventDefault();
const data = event.dataTransfer.getData('text/plain');
console.log('ドロップされたデータ:', data);
});
notDroppableElement.addEventListener('dragover', (event) => {
event.preventDefault(); // ドロップを禁止
});
日本語訳
<div class="draggable">ドラッグ可能な要素</div>
<div class="droppable">ドロップ可能な要素</div>
<div class="not-droppable">ドロップ不可な要素</div>
.draggable {
cursor: move;
}
.droppable {
cursor: copy;
}
.not-droppable {
cursor: no-drop;
}
const draggableElement = document.querySelector('.draggable');
const droppableElement = document.querySelector('.droppable');
const notDroppableElement = document.querySelector('.not-droppable');
draggableElement.addEventListener('dragstart', (event) => {
event.dataTransfer.setData('text/plain', 'ドラッグされたデータ');
});
droppableElement.addEventListener('dragover', (event) => {
event.preventDefault(); // ドロップを許可
});
droppableElement.addEventListener('drop', (event) => {
event.preventDefault();
const data = event.dataTransfer.getData('text/plain');
console.log('ドロップされたデータ:', data);
});
notDroppableElement.addEventListener('dragover', (event) => {
event.preventDefault(); // ドロップを禁止
});
HTML5のドラッグ＆ドロップ API
HTML5では、draggable属性やdataTransferオブジェクトを使用して、より直接的にドラッグ＆ドロップを実装することができます。
<div draggable="true">ドラッグ可能な要素</div>
<div>ドロップ可能な要素</div>
const draggableElement = document.querySelector('[draggable]');
const droppableElement = document.querySelector('div:not([draggable])');
draggableElement.addEventListener('dragstart', (event) => {
event.dataTransfer.setData('text/plain', 'ドラッグされたデータ');
});
droppableElement.addEventListener('dragover', (event) => {
event.preventDefault(); // ドロップを許可
});
droppableElement.addEventListener('drop', (event) => {
event.preventDefault();
const data = event.dataTransfer.getData('text/plain');
console.log('ドロップされたデータ:', data);
});
JavaScriptライブラリ
ドラッグ＆ドロップの機能を簡略化するためのJavaScriptライブラリも多数存在します。例えば、Sortable.jsやDragulaは、リストやグリッドの要素をドラッグ＆ドロップで並び替えたり、要素を他のコンテナに移動したりする機能を提供します。
CSSのみでの簡易的なドラッグ＆ドロップ
CSSのみで、要素を移動させるような簡易的なドラッグ＆ドロップを実装することも可能です。ただし、複雑な操作やデータの伝達には適していません。
<div class="draggable">ドラッグ可能な要素</div>
.draggable {
cursor: move;
position: absolute;
top: 0;
left: 0;
}
.draggable:active {
cursor: grabbing;
}
const draggableElement = document.querySelector('.draggable');
draggableElement.addEventListener('mousedown', (event) => {
const initialX = event.clientX;
const initialY = event.clientY;
document.addEventListener('mousemove', (event) => {
const x = event.clientX - initialX;
const y = event.clientY - initialY;
draggableElement.style.transform = `translate(${x}px, ${y}px)`;
});
document.addEventListener('mouseup', () => {
document.removeEventListener('mousemove', null);
});
});
<div draggable="true">ドラッグ可能な要素</div>
<div>ドロップ可能な要素</div>
const draggableElement = document.querySelector('[draggable]');
const droppableElement = document.querySelector('div:not([draggable])');
draggableElement.addEventListener('dragstart', (event) => {
event.dataTransfer.setData('text/plain', 'ドラッグされたデータ');
});
droppableElement.addEventListener('dragover', (event) => {
event.preventDefault(); // ドロップを許可
});
droppableElement.addEventListener('drop', (event) => {
event.preventDefault();
const data = event.dataTransfer.getData('text/plain');
console.log('ドロップされたデータ:', data);
});
<div class="draggable">ドラッグ可能な要素</div>
.draggable {
cursor: move;
position: absolute;
top: 0;
left: 0;
}
.draggable:active {
cursor: grabbing;
}
const draggableElement = document.querySelector('.draggable');
draggableElement.addEventListener('mousedown', (event) => {
const initialX = event.clientX;
const initialY = event.clientY;
document.addEventListener('mousemove', (event) => {
const x = event.clientX - initialX;
const y = event.clientY - initialY;
draggableElement.style.transform = `translate(${x}px, ${y}px)`;
});
document.addEventListener('mouseup', () => {
document.removeEventListener('mousemove', null);
});
});
css mouse-cursor
