JQuery

 

이미지 드래그

 

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/

 

 

 

 

 

about author

PHRASE

Level 60  머나먼나라

계획은 현실로 바꾸었을 때보다 한창 추진해 가고 있을 때가 더 행복한 것이다. -앤드류 매튜스

댓글 ( 0)

댓글 남기기

작성

JQuery 목록    more