웹 애플리케이션에서 다중 파일(이미지, 오디오, 문서 등)을 업로드할 때, 파일의 표시 순서를 사용자가 조정해야 하는 경우가 있다. 레이아웃 프레임워크의 핵심 로직을 수정하지 않고도 두 가지 실용적인 접근법이 가능하다: 첫째, 서버 측에서 파일 생성 시간 기준 정렬; 둘째, 클라이언트 측에서 드래그 앤 드롭을 통한 순서 재배치.

C#으로 디렉터리 내 파일 순차 정렬

파일 업로드 자체는 그대로 유지하고, 저장된 파일을 읽어올 때 정렬 로직만 추가하면 된다. 아래는 파일 생성 시간을 기준으로 오름차순 정렬하는 구현 예시이다:

public class FileSorter : IComparer<FileInfo>
{
    public int Compare(FileInfo x, FileInfo y)
    {
        return x.CreationTime.CompareTo(y.CreationTime);
    }
}

public static FileInfo[] FetchSortedFiles(string directoryPath)
{
    var dir = new DirectoryInfo(directoryPath);
    var files = dir.GetFiles();
    Array.Sort(files, new FileSorter());
    return files;
}

필요에 따라 CreationTime 대신 Length(파일 크기) 또는 Extension(확장자) 등을 기준으로 정렬 규칙을 변경할 수 있다.

JavaScript 기반 드래그 앤 드롭 순서 조정

jQuery UI의 Sortable 위젯을 활용하면 간단하게 시각적 순서 조정이 가능하다. 사용자는 항목을 끌어다 놓아 순서를 바꿀 수 있으며, 이벤트 훅을 통해 순서 변경 시점에 파일명 재정렬 등의 후처리를 수행할 수 있다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>드래그 앤 드롭 정렬 예제</title>
    <style>
        .draggable-item { cursor: move; padding: 8px; margin: 4px; background: #f0f0f0; }
        .placeholder { opacity: 0.5; background: #ffe0b2; }
    </style>
</head>
<body>
    <button id="toggleDrag">드래그 토글</button>
    <ul id="itemList">
        <li class="draggable-item">항목 1</li>
        <li class="draggable-item">항목 2</li>
        <li class="draggable-item">항목 3</li>
        <li class="draggable-item">항목 4</li>
    </ul>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
    <script>
        $(function() {
            $("#itemList").sortable({
                placeholder: "placeholder",
                axis: "y",
                update: function(event, ui) {
                    console.log("순서가 변경되었습니다:", $(this).sortable("toArray"));
                }
            });

            $("#toggleDrag").click(function() {
                var isEnabled = $("#itemList").sortable("option", "disabled");
                $("#itemList").sortable("option", "disabled", !isEnabled);
            });
        });
    </script>
</body>
</html>

위 코드는 jQuery UI Sortable을 사용해 항목을 수직으로 드래그 정렬할 수 있도록 구성했으며, 순서 변경 시 콘솔에 배열 형태로 현재 순서를 출력한다. 필요 시 이 데이터를 서버로 전송하여 파일명 재정렬이나 DB 업데이트에 활용할 수 있다.