javascript/jQuery
[JAVASCRIPT/JQUERY] Jquery UI (draggable/droppable)옵션설정하기
알찬 퍼블리셔
2019. 4. 10. 11:26
728x90
반응형
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 더이상 드래그 못하도록 하기
728x90
반응형