jQuery 이미지를 마우스 드레그(draggable) 하는 샘플
테스트 할때 잘 발생하는 문제는 버전이 서로 맞지 않아서 생기는 문제 입니다.
샘플도 중요하지만 각 프러그인에 서로 호환되는 버전을 사용 했는지 jQuery 사이트에서 확인하는 습관이 중요 합니다.
아래는 간단하게 마우스 드레그 하는 샘플 입니다.
아래 예제의 특징은 이미지를 움직이는데 이미지를 직접 움직이는 것이 아니라 밖에 감싸고 있는 DIV를 사용 한다는 것입니다.
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>apply_draggable</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css">
</head>
<script src="//code.jquery.com/jquery-3.6.0.js"></script>
<script src="//code.jquery.com/ui/1.13.1/jquery-ui.js"></script>
<body>
<div id="test1" style="width: 555px; height: 400px; border: solid 1px #777"> </div>
</body>
</html>
<script>
var id_name_main = 'test1';
var id_num = 1;
function get_div_name( type, id_num ) {
if ( type == 'img' ) return 'img_' + id_num;
if ( type == 'img_border' ) return 'img_br_' + id_num;
}
function get_default_data( id_name )
{
var id_img = get_div_name( 'img', id_num );
var id_img_b = get_div_name( 'img_border', id_num );
var img_url = './test1.jpg'; // 이건 base64로 바로 표현 될 수 있다.
var str = '';
str += '<div id="' + id_img_b + '" style="position:absolute; border: soild 1px #f00; width: 111px; height: 111px;">';
str += ' <img id="' + id_img + '" src="' + img_url + '" width=111; height=111; style="position:absolute;left:0;top:0;" />';
str += '</div>';
return str;
}
function apply_draggable()
{
var id_img = get_div_name( 'img', id_num );
var id_img_b = get_div_name( 'img_border', id_num );
$("#"+id_img_b).draggable({
containment:"parent",
opacity: 0.5,
start:function(){
},
stop:function(e, ui) {
}
});
}
// start
$(document).ready(function() {
id_num += 1;
var img_layer = get_default_data( id_num );
$( '#' + id_name_main ).append(img_layer);
apply_draggable();
});
</script>
● 드레그 참고한곳
https://jqueryui.com/draggable/#handle
https://jqueryui.com/draggable/#scroll