draggable and resizable image using jQuery

you can do it without any jQuery plugins.


<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.9.custom.css" rel="stylesheet" />  
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.9.custom.min.js"></script>

<script type="text/javascript">
$(function() {
    $("#image_container")
        .resizable({alsoResize:"#panther"})
        .draggable()
        .css({'width': '500px', 'height': '500px'})
});
</script>


<div id="image_container">
    <img id="panther" src="panther.jpg" width="500px" height="500px" />
</div>


댓글

댓글 쓰기

이 블로그의 인기 게시물

미적분과 차원

점을 적분하면 선이 되고, 선을 적분하면 면이 되고, 면을 적분하면 입체가 된다. 반대로 입체를 미분하면 면이 되고, 면을 미분하면 선이 되고, 선을 미분하면 점이 된다. 적분을 하면 차원이 하나씩 커지고, 미분을 하면 차원이 하나씩 작아진다. - 멋진 세상을 만든 수학
자세한 내용 보기

apache rewrite_module 로그

버전) apache 2.2 주의) apache 2.2와 2.4는 설정이 좀 다릅니다. 아래 내용은 2.2에서 테스트하였습니다. 참고)  http://httpd.apache.org/docs/2.2/ko/mod/mod_rewrite.html 참고2) 2.4는  http://httpd.apache.org/docs/2.4/mod/mod_rewrite.html 를 참조하세요. 아파치 rewrite_module 에 대해서는 검색해보면 많습니다. 하지만 RewriteCond 및 RewriteRule 설정이 복잡하거나 이상해서 원하는데로 동작안하는 경우가 있습니다. 이럴때는 그냥 아무 생각없이 설정을 만지작거려 보다가 "어라?!?!" .......다시 아파치 매뉴얼을 읽어봅니다. 그리고 다시 설정을 만지작거리다가 운 좋으면 가끔 될 때도 있지만 아마도 1년 중에 360일은 운이 없는 날인듯 합니다.ㅋㅋ 간혹 되더라도 원하는데로 동작하게 했다는 것 이외에는 큰 의미가 없습니다. 나중에 또 삽질이 반복될테니까요. 암튼 우리같은 사람은 뭐가 잘 안될 때 증상을 파악해야 합니다. 바로 로깅이죠. 근데 rewrite_module의 로그를 남기는 방법에 대한 설명은 영문 매뉴얼 이외에는 잘 없어서 간단한 예제 하나 올립니다. (야간 서버 작업 중인데 기다리는 시간이 너무 지루합니다.^^ 롤백 어쩌고 저쩌고 하는거 보니 뭐가 잘 안되나 보네요. DB는 정말 어렵습니다. 엉엉) <IfModule rewrite_module> RewriteEngine On RewriteCond %{DOCUMENT_ROOT}/notice.html -f RewriteRule .* /notice.html RewriteLog logs/rewrite.log RewriteLogLevel 4 </IfModule> 빨간색으로 표시된 부분이 바로 rewrite 로그 남기는 설정입니다. 로그 레벨은 0부터 9까지 사용할 수 있는데 숫자가 클수록 자
자세한 내용 보기

자바 로깅

간만에 Java Programming을 다시 시작했는데 Spring3.0을 보니 로깅이 모두 slf4j로 바뀌어져 있다. 음.. 그렇다. 요즘은 slf4j를 사용한다. 그럼 어떤 장점이 있어서 slf4j가 대세가 되었을까. commons-logging으로 로그를 남길 때 보통 아래 처럼 하게 된다. log.debug("리턴값을 로그로 남겨 봐야지~ 리턴값: [ " + abc(id) + "]" ); 위 코드는 무엇이 문제일까? 로깅레벨 설정을 error로 켜두면 debug 코드는 안찍는다. 하지만 비록 로그에 남지 않는다고 하더라고 실행은 된다. String끼리 더하기 연산도 실행되고 abc() 함수도 호출한다. 즉, 쓸 때없이 자원을 낭비하는게 첫번째 문제이다. 그래서 다음과 같이 할 수 있다. if (log.isDebugEnabled()) {     log.debug("리턴값을 로그로 남겨 봐야지~ 리턴값: [ " + abc(id) + "]"  ); } if(log.isDebugEnabled())를 집어 넣어서 로그 레벨이 debug가 아니라면 아예 건너뛰게 만들었다. log.isDebugEnabled()를 실행하는것도 리소스를 잡아 먹긴 하지만 부담이 큰 작업은 아니다. 하지만 이런식으로 하게 되면 코드가 지저분해진다. 게다가 로깅레벨이 여러단계일 때 if 문이 중첩될 수 있는 문제가 있다. 또 다른 문제는 로그 레벨이 debug로 설정되어 있을 때 발생한다. 로그 레벨이 debug일 때  if (log.isDebugEnabled())는 무의미한 코드가 되어 버린다. 작지만 리소스 낭비다. slf4j를 사용하면 아래처럼 바꿀 수 있다. log.debug("리턴값을 로그로 남겨 봐야지~ 리턴값: [ {} ]", abc(id)); 로그를 찍든 안찍든 String을 일단 더하고 보는 것과는 처리 방식이 다르다. {} 에는 abc(id)의 리턴값이 들어간다.
자세한 내용 보기