ドラッグ＆ドロップ機能要件定義

30-仕様書 Public

最終更新: 2025/08/13

---
title: 'ドラッグ＆ドロップ機能 要件定義'
slug: feature-requirements-drag-and-drop
status: public
category: specification
author: loga-protocol
purpose: ユーザーがマウス操作で直感的にstxtの構造を並べ替えられるようにし、思考整理の速度と自由度を飛躍的に向上させる。
summary: 掴んで、動かす、ただそれだけ。思考の断片を自在に操り、アイデアを瞬時に再構築するための、究極の直感的操作「ドラッグ＆ドロップ」機能の設計図。
id: 20250808110829-68955c1d0507d7.89898616
created_at: '2025-08-08 11:08:29'
updated_at: '2025-08-13 12:24:10'
image: /syntext-assets/images/cards/20250808110829-68955c1d0507d7.89898616.jpg
---
0. (idea) **ドラッグ＆ドロップ機能 要件定義** 🖱️
1. (s) (why) 1. 目的とゴール
  11. (g) 思考の高速化: アイデアの順序を試行錯誤する際の心理的・操作的コストを最小限に抑える。
  12. (g) 直感的な操作性: キーボードショートカットが苦手なユーザーでも、マウスだけで簡単に階層を組み替えられるようにする。
  13. (g) プロフェッショナルな体験: 最先端のWebエディタとして、標準的で高品質な操作感を提供する。
2. (s) (what) 2. 機能要件
  21. (s) 基本操作
    211. (v) ノードを掴んで、同じ階層内で上下に並べ替えることができる。
    212. (v) ノードを掴んで、別のノードの子要素として移動（インデント）できる。
    213. (v) 子要素を持つノードを、その子要素ごとまとめて移動できる。
  22. (s) UI/UXフィードバック
    221. (y) ドラッグ中のノードは、半透明の「ゴースト」として表示される。
    222. (y) ドロップ可能な場所には、青い線などのプレースホルダーが表示され、どこに移動するかが視覚的にわかる。
  23. (s) 技術要件
    231. (s) `SortableJS`などの、軽量で実績のあるJavaScriptライブラリを利用する。
    232. (s) ドロップ完了後、`stxt-editor.js`の`_updateEditorState()`を呼び出し、全ての項目番号の再計算と、`textarea`への反映が自動で行われる。

ドラッグ＆ドロップ機能 要件定義

SUMMARY

ドラッグ＆ドロップ機能要件定義