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

영역을 드래그 할때 피드백을 제공합니다. 드래그 할때 실제 드래그는 되지 않고 커서와 함께 내용이 움직이게 하거나 반투명하게 내용을 움직이게 할 수 있습니다. 드래그시 자동으로 다른 드래그 영역보다 상위 zindex 가 되도록 할 수 있습니다. $( "#draggable2" ).draggable({ opacity: 0.7, helper: "clone" }); 반투명하게 드래그 됩니다. 실제 드래그 되어 이동하지는 않고 커서를 놓으면 드래그된 영역은 사라집니다. $( "#draggable3" ).draggable({ cursor: "move", cursorAt: { top: -12, left: -20 }, helper: function( event ) { return $( "I'm a custom help..

드래그 영역dmf DOM 요소의 안쪽 또는 바깥쪽 경계에 스냅합니다. grid 옵션을 사용하여 드래그 격자 셀의 크기를 설정할 수 있습니다. $( "#draggable" ).draggable({ snap: true }); 다른 모든 드래그 가능한 요소에 드래그됩니다. $( "#draggable2" ).draggable({ snap: ".ui-widget-header" }); target 영역의 안쪽에서 선에 가까지 드래그 하면 자동으로 선에 맞춰서 드래그 됩니다. $( "#draggable3" ).draggable({ snap: ".ui-widget-header", snapMode: "outer" }); target 영역의 바깥쪽에서 선에 가까지 드래그 하면 자동으로 선에 맞춰서 드래그 됩니다. $( "..

드래그가 멈추면 원래 위치로 되돌아 갑니다. 영역을 드래그 하다가 멈추면 위 이미지 처럼 원래 위치로 되돌아갑니다. 원래 영역은 두고 내용 부분만 드래그 할 수 도 있습니다. helper: "clone" 소스가 있으면 내용 부분만 드래그 됩니다. 소스 원본은 첨부파일을 참고하세요

아래 영역은 각각 드래그 가능한 영역입니다. Item 영역을 드래그 하면 순서를 변경할 수 있습니다. Drag me down 영역은 드래그 하면 복사되어 해당 위치로 들어갑니다. 복사된 영역을 드래그 하면 item 영역처럼 이동이 됩니다. sortable id 값은 ul 에 들어가 있어야 하고 draggable id 값은 li 에 들어가 있어야 위와 같이 동작합니다.

커서가 드래그 가능한 부분 위에 있을때만 드래그가 가능합니다. 드래그 가능한 영역 위의 특정 영역에서는 드래그가 되지 않도록 할 수 있습니다. handle 옵션으로 드래그 가능한 영역을 지정하고 cancel 옵션으로 드래그 불가한 영역을 지정합니다.

드래그 및 정지 이벤트를 사용하여 드래그 가능한 레이어 기능을 활용 할 수 있습니다. 드래하여 영영을 움직이면 숫자가 증가 합니다. 위 기능을 활용하면 드래그를 시작할때, 드래그 중에, 드래그를 멈출때 각각 다른 처리를 해줄 수 있습니다.

개체를 드래그 하는 동안 커서 스타일을 줄 수 있습니다. 기본적으로 커서는드래그 된 객체의 중앙에 나타압니다. cursorAt 옵션을 사용하여 드래그 가능한 위치를 기준으로 커서 출력 위치를 지정합니다. cursor 옵션에 유효한 CSS커서 값을 옵션에 제공하여 커서 모양을 정의할 수 있습니다. default, move, pointer, crosshair 등

드래그 가능한 영역의 경계를 정의하여 각 드래그 가능한 객체의 움직임을 제한합니다. x 축 또는 y 축으로 제한 하는 옵션을 설정 하거나 containment옵션을 사용하여 부모 영역내에서 드래그가 가능하도록 설정 할 수 있습니다.

드래그 영역이 뷰포트를 벗어나 이동하면 문서를 자동으로 스크롤 합니다. 아래 영역들을 설정에 따라 자동 스크롤 처리가 되게 할 수 도 있고 하지 않을 수도 있습니다. 단순 영영드래그 한것만으로 스크롤을 움직일 수 있습니다. 위 기능을 구현하기 위한 소스는 아래와 같으며 첨부파일로 소스 첨부해두었으니 참고하시면 됩니다. scroll 값이 true 일때만 자동스크롤 됩니다. crollSensitivity및 scrollSpeed 옵션을 사용하여 스크롤 될때 속도나 미세한 움직임 등을 제어할 수 있습니다.

지정된 영역을 드래그 가능하게 해주는 jquery 입니다. 빨간색 테두리 안에 있는 영역을 마우스로 드래그 하여 영영을 이동시킬 수 있습니다. 위 기능을 구현하기 위한 소스는 아래와 같으며 첨부파일로 소스 첨부해두었으니 참고하시면 됩니다.