Código HTML :
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
<style>
.box { width:100px; height:100px; border:solid 1px #F00; }
#stage { transform:scale(1); width:500px; height:500px; border:solid 1px #06F; background-color:#CCC; }
#drag{ background-color:#0C3; }
#drop{ background-color:#063; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#drop").droppable({
accept: $("#drag").draggable({revert: function(obj){ return !obj }}),
drop: function(event, ui){ ui.draggable.position({of:this, my:"center", at:"center"}) }
});
});
function setScale(v){
$("#stage").css({
"transform": "scale(" + v + ")",
"transform-origin": "0 0"
});
}
</script>
</head>
<body>
<div>
<h2>Q. scale이 줄었을 때 발생하는 문제점을 해결해주세요. (자료를 검색하여 참고하셔도 좋습니다.)</h2> <br>
(jQuery를 수정해도 좋고, 어떤 방식이든 정상적으로 동작하는 것으로 보인다면 괜찮습니다.
끝내 해결하지 못한다 하여도 노력한 과정을 볼수 있도록 테스트한 소스를 남겨 두세요.)<br>
<ul>
<li>1. drag 할 때 좌표문제</li>
<li>2. drop 할 때 좌표문제</li>
<li>3. 잔상문제(Chrome 브라우져에서 발생. 스케일 조정 전에도 발생. 1회 drop이후 발생.)</li>
</ul>
<br>
</div>
<button onClick="setScale(1)">scale 1.0</button>
<button onClick="setScale(0.5)">scale 0.5</button>
<div id="stage">
<div id="drag" class="box">drag</div>
<div id="drop" class="box">drop</div>
</div>
</body>
</html> 