웹솔루션개발 22년 노하우! 해피CGI의 모든것

dragSort.js는사용자가 드래그 앤 드롭을 통해특정 컨테이너의 항목을 재정렬할 수 있도록 하는사용하기 쉬운 jQuery 플러그인입니다. HTML 목록뿐만 아니라 플러그인은 테이블, DIV, 설명 목록, 양식 필드 및 상상할 수 있는 모든 것과 같은 거의 모든 HTML 요소를 지원합니다.다운로드 받은 파일의 압축을 해제후index.html 파일을 웹브라우저에서 열어보면 확인이 가능합니다.여러 목록 간에 항목을 드래그할 수 있습니다.사용자 지정 자리 표시자 템플릿입니다.요소를 무시할 수 있습니다.항목을 목록 밖으로 끌 때 페이지/컨테이너를 자동으로 스크롤합니다. 사용방법은 아래와 같습니다.

DIV 박스를 화면에 표시하고, 드래그를 이용해서 크기조절, 회전이 가능한 jQuery 플러그인입니다. 다운로드 받은 파일의 압축을 해제하면 나오는 index.html 파일을 웹브라우저로 열어보면 확인이 가능합니다. 화면에 표시되는 박스(DIV) 를 드래그를 이용해서 크기를 늘리거나, 회전하는 손잡이를 이용해서 박스를 회전시키거나, 박스를 끌어서 이동하는게 가능합니다. 크롬 개발자도구를 열어둔 뒤에, 박스의 크기, 위치를 변경할때와, 박스의 회전을 시켜 보면, 화면에 보이는 박스를 표현하기 위한 style(CSS) 태그의 속성들이 조절되는걸 확인해볼수 있습니다. 사용법에 대한 대략적인 설명은 유투브 링크를 슬쩍 보셔도 어렵지 않게 이해는 될것 같습니다.

다운로드 받은 파일의 압축을 해제한 후 index.html 파일을 웹브라우저로 열어서 보면 확인이 가능합니다. Wix.com 같은 웹사이트 빌더에서 자주 보이는 웹페이지 안의 특정 공간에 포커스가 생기면 해당 박스를 드래그를 이용해서 크기를 조절하거나, 위치를 조절해서 화면에 배치시키는 jquery + jquery ui 플러그인 입니다. 사용법은 1. jquery 와 jquery ui 를 로드해줍니다. 2. stageltem.js 를 로드해줍니다. 3. 드래그 및 리사이즈를 하고자 하는 DIV를 만들어주고, stageItem 을 실행시켜줍니다. 4. 드래그가 특정 범위 안에 속하게 한다거나, 리사이즈 핸들러의 색상을 조절하거나, 드래그 되는 박스끼리 중첩이 되는 속성을 여부는 아래와 같은 옵션으로 제어가..

객체를 마우스로 자유롭게 드래그앤 드랍을 할 수 있는 draggable 객체를 마우스로 자유롭게 드래그앤 드랍을 할 수 있는 draggable입니다. 지정된 영역에서 자유롭게 마우스로 이동이 가능합니다. jquery를 이용한 요소를 드래그 시키는 소스로 마치 윈도우의 스티커 메모처럼..이용이 가능합니다. 깊이값, 포인트 모양, 드래그시 투명도 등 몇가지 이벤트를 제공해주네요. 액티브한 포퍼먼스를 줄 수 있을듯 하네요.