AI向け説明 AI Description

`I-007` は HTML5 Drag and Drop API を使用した並べ替え可能なリストです。`dragstart`, `dragover`, `drop`, `dragenter`, `dragleave` イベントを処理し、DOM要素の順序を入れ替えます。

`I-007` implements a sortable list using the HTML5 Drag and Drop API. It handles `dragstart`, `dragover`, and `drop` events to reorder DOM elements.

調整可能パラメータ Adjustable Parameters

• --item-padding — アイテムの内側の余白Item padding
• --drag-highlight — ドラッグ中のハイライト色Drag highlight color

実装 Implementation

HTML + CSS + JS

<ul id="list">
  <li draggable="true">Item 1</li>
  <li draggable="true">Item 2</li>
</ul>

<style>
:root {
  --item-padding: 16px;
  --drag-highlight: #5c6ac4;
}
</style>

<script>
// Drag and Drop logic
</script>

React (JSX + CSS)

// react/I-007.jsx
import { useState, useRef } from 'react';
import './I-007.css';

export default function DraggableList({ initialItems = [] }) {
  const [items, setItems] = useState(initialItems);
  const dragItem = useRef();
  const dragOverItem = useRef();

  const dragStart = (e, position) => {
    dragItem.current = position;
    e.target.classList.add('dragging');
  };

  const dragEnter = (e, position) => {
    dragOverItem.current = position;
  };

  const drop = (e) => {
    const copyListItems = [...items];
    const dragItemContent = copyListItems[dragItem.current];
    copyListItems.splice(dragItem.current, 1);
    copyListItems.splice(dragOverItem.current, 0, dragItemContent);
    dragItem.current = null;
    dragOverItem.current = null;
    setItems(copyListItems);
    e.target.classList.remove('dragging'); // In real app, might need more robust class cleanup
  };

  return (
    <ul className="draggable-list">
      {items.map((item, index) => (
        <li
          key={index}
          className="draggable-item"
          draggable
          onDragStart={(e) => dragStart(e, index)}
          onDragEnter={(e) => dragEnter(e, index)}
          onDragEnd={drop}
        >
          <span className="drag-handle">☰</span>
          <span className="drag-content">{item}</span>
        </li>
      ))}
    </ul>
  );
}

/* react/I-007.css */
/* I-007: React styles */
.draggable-list {
  max-width: 400px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.draggable-item {
  background: #fff;
  border: 1px solid #e0e4f0;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: grab;
  transition: transform 0.2s, box-shadow 0.2s;
}

.draggable-item:active {
  cursor: grabbing;
}

.draggable-item.dragging {
  opacity: 0.5;
  border: 2px dashed #5c6ac4;
}

.drag-handle {
  color: #5c6184;
  cursor: grab;
  padding: 4px;
}

.drag-content {
  flex: 1;
  font-weight: 500;
  color: #1d2242;
}