JQuery에서 제공해주는 Draggable UI 기본 사용법 예제 입니다
CMS에서 마우스 드래그를 통해 홈페이지를 쉽게 제작할 수 있도록하기위해 JQuery Draggable UI를 사용하였습니다
아래 소스는 제가 개발 전 테스트 전에 만들어봤던 소스이고
처음 사용하시는 분들한테 조금이나마 도움이 되고자 포스팅했습니다
아래 주소에 접속하시면 Draggable UI 기본 사용법을 알 수 있고
https://jqueryui.com/draggable/
응용을 위해서는 아래의 예제소스를 참조해주세요
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Timecoms Draggable</title>
<link rel="shortcut icon" href="../resources/img/favicon.ico">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<style type="text/css">
.draggable-wrap {
padding: 50px;
background: #ccc;
}
.draggable {
display: inline-block;
*display: inline;
*zoom: 1;
border: 1px solid #ddd;
padding: 30px ;
cursor: move;
font-weight: 600;
color: #fff;
background: #e17a21;
}
.browser {
width: 1000px;
margin: 100px auto 0 auto;
}
.header {
height: 100px;
border: 1px solid #ddd;
}
.body {
height: 300px;
border: 1px solid #ddd;
margin-top: 20px;
}
.footer {
height: 100px;
border: 1px solid #ddd;
margin-top: 20px;
}
</style>
</head>
<body>
<div class="draggable-wrap">
<div class="draggable">Draggable Div1</div>
<div class="draggable">Draggable Div2</div>
<div class="draggable">Draggable Div3</div>
<div class="draggable in-parent">Draggable Div4</div>
</div>
<div class="browser">
<div class="header">
HEADER
</div>
<div class="body">
BODY
</div>
<div class="footer">
FOOTER
</div>
</div>
<script type="text/javascript">
var css_zidx = 10;
$( function() {
$(".draggable").draggable( {
create: function( event, ui ) {
if( $(this).hasClass("in-parent")) {
$(this).draggable( "option", "containment", "parent");
}
},
start: function( event, ui ) {
css_zidx++;
$(this).css({
"z-index":css_zidx,
"box-shadow":"0 1px 2px 0 rgba(0,0,0,0.1), 0 4px 8px 0 rgba(0,0,0,0.2)"
}).draggable( "option", "revert", true );
},
stop: function( event, ui ) {
$(this).css({
"box-shadow":""
});
}
});
$(".browser div").droppable( {
drop: function( event, ui ) {
ui.draggable.draggable( "option", "revert", false);
}
});
$(".draggable-wrap").droppable( {
drop: function( event, ui ) {
ui.draggable.draggable( "option", "revert", false);
}
});
})
</script>
</body>
</html>
'JavaScript' 카테고리의 다른 글
| JQuery 선택자 (0) | 2016.09.08 |
|---|---|
| JQuery 함수 사용 및 기본 (0) | 2016.08.29 |
| jquery iframe 부모, 자식 접근 및 크기 조정 (0) | 2015.01.09 |
| 자바스크립트 event keycode 종류 테이블 (0) | 2014.11.12 |
| jQueryApi - 제어(선택, 삽입, 삭제, 변경, 변환, 확장) (0) | 2014.10.24 |
댓글