Raphaël은 웹 페이지에 드래그 가능한 리스트를 추가하는 데 사용할 수 있는 강력한 JavaScript 라이브러리입니다. 아래 예제를 통해 Raphaël을 사용하여 웹 페이지에 드래그 가능한 리스트를 추가하는 방법을 알아보겠습니다.

// 리스트 아이템의 초기 위치
var startX = 0;
var startY = 0;

// 리스트 아이템의 드래그 가능한 요소 생성
var item = paper.rect(startX, startY, 100, 50).attr({fill: "blue"});

// 드래그 시작 이벤트 바인딩
item.drag(
    function(dx, dy, x, y) {
        // 드래그 중인 아이템의 위치 업데이트
        item.attr({x: startX + dx, y: startY + dy});
    },
    function() {
        // 드래그 시작 시 초기 위치 저장
        startX = item.attr("x");
        startY = item.attr("y");
    },
    function() {
        // 드래그 종료 시 초기 위치 업데이트
        startX = item.attr("x");
        startY = item.attr("y");
    }
);

설명:

1. startX와 startY는 리스트 아이템의 초기 위치를 나타내는 변수입니다.
2. paper.rect(startX, startY, 100, 50)는 드래그 가능한 사각형 요소를 생성하고, attr({fill: "blue"})는 요소의 배경색을 파란색으로 설정합니다.
3. item.drag()는 리스트 아이템에 드래그 이벤트를 바인딩합니다. 첫 번째 매개변수는 드래그 중인 요소의 이동에 대한 콜백 함수를 정의하고, 두 번째 매개변수는 드래그 시작 시 실행되는 콜백 함수를 정의합니다. 세 번째 매개변수는 드래그 종료 시 실행되는 콜백 함수를 정의합니다.
4. 콜백 함수에서 dx와 dy 매개변수는 이동한 거리를 나타내며, x와 y 매개변수는 현재 요소의 위치를 나타냅니다. 이를 통해 item.attr({x: startX + dx, y: startY + dy})를 사용하여 드래그 중인 아이템의 위치를 업데이트합니다.
5. 드래그 시작 시 item.attr("x")와 item.attr("y")를 사용하여 초기 위치를 저장하고, 드래그 종료 시에도 동일한 방식으로 초기 위치를 업데이트합니다.

위의 예제를 사용하면 Raphaël을 이용하여 웹 페이지에 드래그 가능한 리스트를 추가할 수 있습니다. 좌표를 조정하고 요소의 스타일링을 변경하여 원하는 방식으로 리스트를 디자인할 수 있습니다. 추가적인 기능이 필요한 경우 Raphaël 문서를 참조하여 확장할 수도 있습니다.