672 No

이미지 드래그

2017-09-03 18:46:12 By 머나먼나라 0 595 댓글수 4 포스트 하기

4월 2024
일	월	화	수	목	금	토
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30

이미지 드래그

drag.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<!-- 1.7에서 테스트 -->
<script type="text/javascript"
  src="http://code.jquery.com/jquery-1.7.2.js"></script>
<script type="text/javascript"
  src="../include/jquery-ui-1.8.16.custom.min.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		//opacity : 투명도 0.0 완전투명 1.0 완전불투명
		//드래그 가능하도록 설정
		//드래그 하는 동안의 투명도 설정
		$("#img1").draggable({
			opacity : "0.3"
		});
	//드롭이 가능하도록 설정
	// accept : 드롭을 허용할 요소
		$("#div1").droppable({
			accept : "#img1",
			drop : function() {
				$(this).text("이미지가 드래그되었습니다.");
			}
		});
	});
</script>
<style type="text/css">
#div1 {
  position: absolute;
  left: 1000px;
  top: 50px;
  width: 500px;
  height: 500px;
  border: 1px solid gray;
}
</style>
</head>
<body>
  <h2>이미지 드래그</h2>
  <img id="img1" 
  src="https://www.thestar.com/content/dam/thestar/life/2015/02/16/getting-used-to-the-fame-is-the-next-step-for-actress-alexandra-beaton/alexandra-beaton.jpg.size.custom.crop.1086x725.jpg"
  width="300" height="300"
  >
  <div id="div1">이미지를 여기로 드래그하세요</div>
</body>
</html>

https://blog.jqueryui.com/2011/08/jquery-ui-1-8-16/