[javascript] 드로그앤 드롭(drog and drop) 사용하기

사용옵션은 여러가지 속성이 있지만 나의 경우는 쇼핑몰 에서 상품을 관심 상품에 넣는 용도로 사용 하기때문에 드롭 이벤트가 일어났을경우 관심상품 디비에 로우를 쌓고 새로 리스트를 가져와서 페이징 처리된 화면을 렌더해야했다.

1. 드래그엔 드롭 이벤트를 전역으로 할당한다(아이템이 노출 되는 모든 페이지에서 사용하기 위해)

common.js 에 document.ready() 함수에 등록

$(".draggableItem").draggable({

helper: 'clone'   //원본이 아닌 복사본으로

,appendTo:'body'  //드래그 효과가 보이는 레이어층

// ,revert: true     //원레 위치로 돌아가는 효과

,zIndex:100   //같은 높이의 레이어 에서 zindex 가 필요할때.

,scroll: false

,start: function(e, ui) {//시작될때 호출}

,drag: function() {//드래그 이동시 계속적으로 호출}

,stop: function() {//마우스에서 손을 땟을때 호출 (종료)}

});

코드를 보면 helper 속성에 clone 값을 주어 드래그 되는 상태는 유지하도록 하고

드랍 되는 부분의 html 레이어가 같은 위치가 아니기때문에 appendTo 속성으로 body를 주었다. (기본적으로 드래그시 보이는 화면 잔상값이 앱솔루트이고 드랍될 위치는 외부 jsp에 fixed 로 박혀 있는 상황이기 때문)

2. 관심 상품 부분 드롭 이벤트

common.js 에 document.ready() 함수에 등록

/**

* 관심상품 드롭 이벤트 설정

*/

$("#IHeaderWishBox").droppable({

drop: function( event, ui ){

//$(ui.draggable).attr("item_seq") 식으로 추가한 속성값의 아이템 시퀀르를 디비에 등록하고 화면그리는 함수를 호출한다.

stopClickEventBubbling(event);//이벤트 버블링 제거함수

}

});

/**

 * 이벤트 버블링 제거

 * @param event

 * @returns

 */

function stopClickEventBubbling(event){

   if (event && event.preventDefault) {

      event.preventDefault();

      event.stopPropagation();

    }

    else {

       event = event || window.event;

       event.cancelBubble = true;

       event.returnValue = false;

    }

}

jquery drog and drop 의 일부속성만 간단하게 살펴 보았다. 

자세한 속성과이벤트는 스스로 학습해보길.