새소식
반응형
Programming language/Javascript,jQuery
[jQuery UI]드래그 기능
- -
반응형
화면 개발을 주로 jQuery를 이용해서 했었는데 얼마 전 jQuery UI란 것을 알게 되었습니다.
jQuery UI는 드래그, 드롭, 리사이즈 등 다양한 기능뿐 아니라 CSS를 이용하여 UI를 손쉽게 구현할 수 있도록 제공해주는 라이브러리로 소개하고 있습니다. 유용하게 잘 사용할 수 있을 것 같아요 :)
아래 예제는 IE 11, Chrome, Microsoft Edge에서 테스트해봤고 정상적으로 작동했습니다.
Draggable
이 기능은 레이어 팝업을 드래그해야 하는 경우 가장 유용하지 않을까 싶다.
설정은 간단하다.
<!-- jQUery Latest Ver -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<!-- jQUery UI -->
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">jQuery 라이브러리를 먼저 임포트해주고(다운로드하여 불러와도 무관하다) 함수를 이용하면 끝이다.
<head>태그 사이에 아래 스크립트를 사용하면 된다.
드래그하고자 하는 div 영역의 id 또는 class명을 이용해 컨트롤하면 된다.
<script>
$(function(){
$(".card").draggable();
});
</script>
[예제코드]
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title>PAGE1</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<!-- Popper.js, Bootstrap JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<!-- jQUery Latest Ver -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<!-- jQUery UI -->
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script>
$(function(){
$(".card").draggable();
});
</script>
</head>
<body>
<div class="container-fluid" style="height: 500px; background-color: #66ff66">
<div class="card" style="width: 500px">
<div class="card-header">
Featured
</div>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
</body>
</html>
[결과]
추가로 드래그 옵션도 지정해줄 수 있다.
드래그 할 때 원하는 이벤트를 줄 수도 있고 효과, 드래그 영역, 범위 등 다양한 옵션이 있다.(더 자세한 내용은 여기서 확인하실 수 있습니다)
몇가지 옵션만 테스트 해봤다.
<script>
$(function(){
$(".card").draggable({
containment: '.container-fluid', // 드래그 범위 지정 : .container-fluid 영역에서만 드래그 가능
opacity: 0.7, // 드래그시 투명도
cancel: '.card-body', // 드래그 가능 영역 : .card-body 클래스를 제외한 영역에서 드래그 가능
});
});
</script>예제 코드에서 card 클래스를 안고 있는 부모 div(container-fluid) 영역에서만 드래그하도록 수정했고, card-body 클래스를 제외한 영역에서만 드래그 가능하도록 수정했다. 드래그 시 투명해지는 옵션도 추가했다.
[결과]
+ 2020.07.28 추가
draggable 기능이 mobile에서는 안되는 이슈가 있었는데, 아래 사이트를 참고해 해결할 수 있었다.
jQuery UI Touch Punch라는 js 파일을 다운받아 추가해주니 잘 작동했다.
아래 사이트에서 파일을 다운받을 수 있다.
(minify version 클릭 후 다른 이름으로 저장하면 js 파일로 다운받을 수 있으니 참고하시길 바랍니다)
https://xetown.com/tips/104034
jQuery UI Touch Punch ( feat: jquery-ui 기능에 터치를 인식 )
jquery-ui 플러그인에는 상당히 유용한 기능들이 많이 있습니다. 제가 가장 애용하는 기능은 바로 드래그 앤 드롭 이벤트입니다. 주로 정렬기능인 sortable() 을 사용하는데, 이게 모바일에서는 터치�
xetown.com
+ 피드백은 언제나 환영입니다 :)
반응형
Contents
소중한 공감 감사합니다.