[JAVASCRIPT/JQUERY] Jquery UI (draggable/droppable)옵션설정하기

 

https://jqueryui.com

 

 

jQuery UI를 쓰기 위해서는 다음과 같은 js 파일이 필요하다. 

 

//jQuery버전맞추기

https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js

//jQuery UI

http://code.jquery.com/ui/1.8.17/jquery-ui.min.js

//jQuery UI를 모바일에서 쓰기 위해 추가 (모바일 버전이 필요없다면 안써도됨)

https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js

 

 

 

 

draggable 옵션 

//drag 가로 세로 이동 제한 
"axis": "x" // 가로로만 이동 가능 
"axis": "y" // 세로로만 이동 가능 


//이동영역 제한 

containment:"선택자"
//선택자 영역 안에서만 이동제한 


start: function(event, ui ) {
    //드래그를 시작했을때 이벤트 발생 
    currentObj = $(".ui-draggable-dragging"); //현재 드래그 중인 엘리먼트 가져오기 
}

droppable 옵션

drop : function( event, ui ){
    droppable 영역안으로 드롭했을 때 이벤트 발생 
}

$( ".drag1" ).draggable("destroy"); // drag1 더이상 드래그 못하도록 하기

 

 

 

 

 

 

 

 

[html] - [HTML]기본속성 draggable이용하기