[해피CGI][cgimall] jQuery ui Draggable Visual feedback

영역을 드래그 할때 피드백을 제공합니다.

드래그 할때 실제 드래그는 되지 않고 커서와 함께 내용이 움직이게 하거나 반투명하게 내용을 움직이게 할 수 있습니다.

드래그시 자동으로 다른 드래그 영역보다 상위 zindex 가 되도록 할 수 있습니다.

 

 

$( "#draggable2" ).draggable({ opacity: 0.7, helper: "clone" });
반투명하게 드래그 됩니다.
실제 드래그 되어 이동하지는 않고 커서를 놓으면 드래그된 영역은 사라집니다.

 

 

$( "#draggable3" ).draggable({
      cursor: "move",
      cursorAt: { top: -12, left: -20 },
      helper: function( event ) {
        return $( "<div class='ui-widget-header'>I'm a custom helper</div>" );
      }
    });
드래그시 설정한 내용이 커서를 따라다니게 할 수 있습니다.
실제 드래그 되어 이동하지는 않고 커서를 놓으면 드래그된 영역은 사라집니다.

 

 

$( "#set div" ).draggable({ stack: "#set div" });
set id 값을 가진 div 에 속해 있는 드래그 영역은 자동 z-index 상위객체가 됩니다.
아래는 차래대로 드래그 하여 겹친 모습입니다.

 

 

드래그 순서를 바꾸면 아래처럼 상위로 올라오는 드래그 영역이 달라집니다.

 

 

소스원본은 첨부파일을 참고하세요