SVG를 드래그하여 Raphael에 놓으시겠습니까?

Question

임 프로젝트 상자에서 무대로 개체 (선호 SVG)를 드래그 앤 드롭하여 새로운 프로젝트를 시작하려고합니다. Raphael.js를 사용하여 도움을 얻을 생각입니다.

내가 가진 문제는 도구 상자를 포함하여 스크롤 가능한 패널을 포함하여 HTML로 만든 레이아웃을 앱 UI에 제공하고 싶습니다. 그러면 사용자가 도구 상자의 구성 요소를 "스테이지"로 드래그 할 수 있어야합니다.

1) 라파엘 SVGs으로 UI의 전체를 만듭니다

나는 나의 옵션은 두 가지 생각합니다. 스크롤 가능한 패널을 포함하는 UI를 만드는 것이 Raphael에서 Flexbox 및 DIV와 함께 오버플로 : 자동 등을 사용하는 것보다 훨씬 어려울 것이라고 짐작합니다.

2) UI를 HTML로 만들고 드래그 앤 드롭합니다. SVG 구성 요소를 도구 상자에서 Raphael 단계로 가져 와서 사용자가 그 위치에 놓을 수있게합니다. 이것이 가능할 지 확신하지 못합니다.

내 주장이 맞습니까? 그렇다면 사용자가 무대 위로 마우스를 올려 놓고 드래그 도움말을 숨기고 무대 안의 구성 요소를 다시 만들 때이를 감지 할 수 있습니까?

Answer 1

나는 이렇게 오래 전에 그렇게 썼다. 개별 Raphael 캔버스로 구성 요소를 도구 상자에 그립니다. 드래그 할 때이 도구를 작업 영역 밖으로 이동합니다. 떨어 뜨렸을 때, 나는 그 위치의 작업 영역에서 새로운 Raphael 오브젝트를 어디서 생성 하는지를 계산하기 위해 계산을합니다. 드래그 된 객체는 도구 상자의 적절한 위치에 다시 놓입니다. 귀하의 상황에서 이것이 효과가 있습니까?