Drag&Drop 연결선 (jsPlumb)

사내 업무중에 하나의 프로그램이 끝나면 다음 프로그램이 동작하도록 UI로 편하게 설정 및 변경 하기 위해 Drag&Drop 과 해당 객체(?) 들을 연결하는 jQuery를 찾다가 딱 맞는 내용을 찾아서 공유 합니다.

다음과 같은 차트를 DFD?, topology? 뭐라고 말해야 할지 잘 모르겠습니다. ㅋㅋ

아래 이미지를 보시면 느낌이 바로 오실 껍니다.

해당 데모 사이트는 https://jsplumbtoolkit.com/demo/flowchart/dom.html 에서 확인 가능 하십니다.

라이센스는 MIT와 GPLv2를 따르고 있습니다. (상업적으로도 무료 사용 가능 할껍니다...아마도...ㅋㅋ)

자세한 라이센스 정보는 아래 링크를 확인 하세요. (소스를 다운 받으셔도 해당 소스 파일 안에 라이센스 정보가 있습니다.)

MIT-LICENSE : https://github.com/sporritt/jsPlumb/blob/master/jsPlumb-MIT-LICENSE.txt

GPLv2 LICENSE : https://github.com/sporritt/jsPlumb/blob/master/jsPlumb-GPLv2-LICENSE.txt

해당 데모소스를 다운 받으시려면 사이트에서 우측 상단의 GITHUB 메뉴를 눌러서 GITHUB 에서 받으시면 됩니다.

GITHUB 사이트 우측 하단에 Download ZIP를 눌러 다운 받으시면 됩니다.

귀찮으신 분은 제가 받아놓은 zip 파일을 받으세요 ㅋㅋ

jsPlumb-master.zip

다음에 기회 있을때 개발한 소스를 정리하여 공유 하도록 하겠습니다.

[데모 이미지]