Cytoscape.js는 웹 기반의 그래프 시각화 라이브러리입니다. 그래프의 노드를 마우스로 드래그하여 다른 위치로 이동시킬 수 있습니다. 이 기능을 구현하기 위해 다음과 같은 단계를 따를 수 있습니다.

1. Cytoscape.js 라이브러리를 불러옵니다.

   const cy = cytoscape({
     container: document.getElementById('cy')
   });
   

2. 그래프 생성 시 노드들을 추가합니다.

   cy.add([
     { data: { id: 'node1' } },
     { data: { id: 'node2' } },
     // 노드들을 추가하는 코드 작성
   ]);
   

3. 노드를 드래그 가능하도록 설정합니다.

   cy.nodes().forEach(node => {
     node.draggable(true);
   });
   

4. 그래프를 렌더링합니다.

   cy.layout({
     name: 'preset'
   }).run();
   

이제 그래프의 노드를 드래그하여 원하는 위치로 이동시킬 수 있습니다.

추가적으로, Cytoscape.js는 일반적으로 이벤트 처리를 위해 이벤트 핸들러를 등록할 수 있는 기능을 제공합니다. 따라서 노드를 드래그하는 이벤트가 발생할 때 원하는 동작이 실행되도록 핸들러를 등록할 수 있습니다.

더 자세한 내용은 Cytoscape.js 공식 문서를 참조하시기 바랍니다.