jQuery-ui 드래그 드랍( draggable droppable )
jQuery를 이용한 드래그와 드랍에 관한 것입니다.
아래 샘플에서 경로가 로컬로 되어 있는것은 찾아서 필요한 위치에 있어야 합니다.
여기선 파일에 대한 부분은 다루지 않고 예제에 있는것을 쉽게 확인이 가능하도록 만들어진 샘플 입니다.
참고할 수 있도록 F12 디버깅 모드에서 마우스 움직임에 따라서 어떤 이벤트가 발생 하는지 쉽게 알 수 있도록 모두 표시가 되어 있습니다.
drop 에서 over 부분에서 체크를 하게 되는것은 약 50% 들어가게 되면 작동을 합니다.
containment 명령을 통해서 박스를 벋어나지 못하게 하는 설정이 들어 있습니다. 그러면 없애는 방법은? 직접 만들어야 합니다.
박스에 들어가면 작동을 하는지 알 수 있도록 border 색을 다르게 하는 기능이 들어가 있습니다. 이런 이벤트가 잘 작동하는지는 브라우저의 F12를 통한 디버깅 모드의 콘솔을 통해서 모두 쉽게 확인이 가능 합니다.
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="jquery/jquery-ui.css">
<link rel="stylesheet" href="jquery/style.css">
<style>
.drag { width: 90px; height: 90px; padding: 0px; float: left; margin: 0px 0px 0px 0px;
clear: both;
}
#droppable { width: 350px; height: 250px; padding: 0.5em; float: left; margin: 10px;
}
.ui-widget-content {
background: none;
}
.highlight {
border: 1px solid green;
}
.highlight-red {
border: 1px solid red;
}
</style>
<script>
$( function() {
$( ".drag" ).draggable({
create: function( event, ui ) {
console.log('create');
},
drag: function( event, ui ) {
console.log('drag');
},
start: function( event, ui ) {
console.log('start');
},
stop: function( event, ui ) {
console.log('stop');
},
addClasses: true,
classes: {
"ui-draggable": "highlight"
},
containment: "#inner",
opacity: 0.2,
});
$( "#droppable" ).droppable({
create: function( event, ui ) {
console.log('create');
$("#droppable").css('border', '1px solid gray');
},
activate: function( event, ui ) {
console.log('activate');
$("#droppable").css('border', '1px solid green');
},
deactivate: function( event, ui ) {
console.log('deactivate');
},
over: function( event, ui ) {
console.log('over');
var containment_id = event.originalEvent.target.id;
$( "#"+containment_id ).draggable( "option", "containment", "#droppable" );
var containment = $( "#"+containment_id ).draggable( "option", "containment" );
},
out: function( event, ui ) {
console.log('out');
},
drop: function( event, ui ) {
console.log('drop');
$("#droppable").css('border', '1px solid blue');
}
});
} );
</script>
</head>
<body>
<div id="inner" style="width: 550px; height: 450px; border: 1px solid red;">
<div>
<div id="draggable1" class="drag ui-widget-content">
<p>Drag me to my target 1</p>
</div>
<div id="draggable2" class="drag ui-widget-content">
<p>Drag me to my target 2</p>
</div>
<div id="droppable" class="ui-widget-content">
<p>Drag me to my target 2</p>
</div>
</div>
<div>
</div>
</body>
</html>
* 참고 한곳
https://api.jqueryui.com/theming/css-framework/
https://api.jqueryui.com/draggable/#option-handle
https://api.jqueryui.com/draggable/
https://api.jqueryui.com/droppable/
위와 크게 다르지 않은데... 가둬 놓을때 조건을 줘야 오류가 발생하지 않습니다.
약간 다르게 테스트 한것이 있어 저장해 둡니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery drag drop </title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<style>
#draggable {
width: 100px;
height: 100px;
background: #ccc;
}
#droppable {
position: absolute;
left: 250px;
top: 0;
width: 225px;
height: 225px;
background: #999;
color: #fff;
padding: 10px;
}
</style>
</head>
<body>
<div id="droppable">Drop here</div>
<div id="draggable">Drag me</div>
</body>
</html>
<script>
$(document).ready(function() {
console.log('page load');
$( "#draggable" ).draggable({
create: function( event, ui ) {
console.log('drag - create');
},
start: function( event, ui ) {
console.log('drag - start');
},
drag: function( event, ui ) {
console.log('drag ing ...');
},
stop: function( event, ui ) {
console.log('drag - stop');
}
});
$( "#droppable" ).droppable({
create: function( event, ui ) {
console.log('drop - create');
},
drop: function() {
var idname = $(this).attr('id');
$('#'+idname).css('border','dotted 1px red');
console.log(event);
var cidname = event.toElement.id;
console.log('drop - drop', ' / cidname: ', cidname, ' / idname: ', idname);
// 가둬 놓을 때는 확인해 주지 않으면 벗어 났을 경우 오류가 발생 한다
if ( typeof cidname == 'string' && cidname.length > 1 ) {
$( "#"+cidname ).draggable( "option", "containment", "#"+idname );
}
},
over: function( event, ui ) {
var idname = $(this).attr('id');
$('#'+idname).css('border','dotted 1px green');
console.log('drop - over');
},
activate: function( event, ui ) {
console.log('drop - activate');
var idname = $(this).attr('id');
$('#'+idname).css('border','dotted 1px blue');
},
deactivate: function( event, ui ) {
console.log('drop - deactiveate');
},
out: function( event, ui ) {
console.log('drop - out');
},
});
});
</script>