은성훈: 반응형웹

레이블이 반응형웹인 게시물을 표시합니다. 모든 게시물 표시

javascript로 이미지를 다른 이미지 밑으로 드래그하여 이동시키는 방법

두 이미지가 중첩되면 drag중인 이미지의 drop이 방해받는다.
mouse up 이벤트 핸들러를 <html>에 등록시키면 이 문제를 해결할 수 있다.

<!DOCTYPE html>
<html>
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script>
    $(function() {
      var debug = $('#debug');
      var o = $('#my_ball');
      var sx, sy, dx, dy, ix, iy;
      var dragging = false;
      $('#my_ball').on('mousedown', function(e) {
        e.preventDefault();
        sx = e.pageX;
        sy = e.pageY;
        ix = $(o).offset().left;
        iy = $(o).offset().top;
        dx=dy=0;
        dragging = true;
        console.log("mousedown - s:",sx,sy,"/i:",ix,iy);
      });
      $('html').on('mousemove', function(e) {
        if(dragging) {
          dx = e.pageX - sx;
          dy = e.pageY - sy;
          $(o).offset({left: ix+dx, top: iy+dy});
          $(debug).text(dx + "," + dy);
        }
      }).on('mouseup', function(e){
        if(dragging) {

          dx = e.pageX - sx;
          dy = e.pageY - sy;
          $(o).offset({left: ix+dx, top: iy+dy});
          dragging = false;
          console.log("mouseup - d:",dx,dy,"/i:",ix,iy);
        }

      });
    });
    </script>
  </head>
  <body>
    <img src="ball.png"  style="position:relative;" id="my_ball">
    <img src="ball2.png" style="position:relative;">
    <p style="text-align:right;" id="debug"> </p>
  </body>
</html>

javascript를 이용해서 그림을 마우스로 끌어서 옮기는 방법

마우스로 그림을 끌어 옮기는 것은 다음 세가지 이벤트가 순서대로 일어나는 것이다.

mouse down --> mouse move --> mouse up

Mouse down에서는

drag가 시작되었다고 표시하고
마우스가 클릭된 위치를 기억하고 (sx, sy)
마우스가 드래그된 거리를 초기화시키고 (dx, dy)
당시의 그림의 위치를 기억한다. (ix, iy)

Mouse move에서는

dx와 dy를 계산하고,
그림의 첫 위치인 (ix, iy)에 (dx, dy)만큼 이동시킨 위치로 그림을 이동시킨다

Mouse up에서는

drag가 종료되었다고 표시하고
dx와 dy를 최종적으로 계산하고
그림의 첫 위치인 (ix, iy)에 (dx, dy)만큼 이동시킨 위치로 그림을 이동시킨다

<!DOCTYPE html>
<html>
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script>
    $(function() {
      var debug = $('#debug');
      var o = $('#my_ball');
      var sx, sy, dx, dy, ix, iy;
      var dragging = false;
      $('#my_ball').on('mousedown', function(e) {
        e.preventDefault();
        sx = e.pageX;
        sy = e.pageY;
        ix = $(o).offset().left;
        iy = $(o).offset().top;
        dx=dy=0;
        dragging = true;
        console.log("mousedown - s:",sx,sy,"/i:",ix,iy);
      }).on('mousemove', function(e) {
        if(dragging) {
          dx = e.pageX - sx;
          dy = e.pageY - sy;
          $(o).offset({left: ix + dx, top: iy + dy});
          $(debug).text(dx + "," + dy);
        }
      }).on('mouseup', function(e){
        dx = e.pageX - sx;
        dy = e.pageY - sy;
        $(o).offset({left: ix + dx, top: iy + dy});
        dragging = false;
        console.log("mouseup - d:",dx,dy,"/i:",ix,iy);
      });
    });
    </script>
  </head>
  <body>
    <img id="my_ball" src="ball.png" style="position:absolute">
    <h1 style="text-align:right;" id="debug"> </h2>
  </body>
</html>

잘 동작한다. 그런데 빠른 속도로 그림을 끌면 그림을 놓치게 된다.
빠른 속도로 그림을 끌때는 마우스가 <img>를 벗어나서 <html> 영역에 들어가 있기때문에, 이것을 개선시키려면 <html>에 mousemove 이벤트 핸들러를 등록시켜야 한다.

javascript로 객체의 좌표를 다루는 방법

절대좌표는 브라우저의 화면이 기준이고, offset()함수를 이용해서 좌표를 알아내거나 설정할 수 있다.
상대좌표는 엘리먼트의 부모영역이 기준이고, position()함수를 이용해서 좌표를 알아내기만 할 수 있다.

    <!DOCTYPE html>
    <html>
      <head>
      <style>
        #pink { 
          background-color: pink; 
          position:absolute; 
          top: 34px; 
          left: 56px; 
          width:100px; 
          height:100px; 
          }
        #blue {
          background-color: blue; 
          position:relative;
          top: 5px; 
          left: 9px; 
          width:10px; 
          height:10px; 
          }
      </style>
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
      </head>
      <body>
        <div id="pink">
          <div id="blue"></div>
        </div>
        <script>
          var p = $('#pink'), 
                b = $('#blue'),
              px, py, bx, by;

          px = p.offset().left;
          py = p.offset().top;
          alert('1p (' + px + ', ' + py + ')');
          
          bx = b.position().left;
          by = b.position().top;
          alert('1b (' + bx + ', ' + by + ')');

          p.offset({top:50, left:150});
          px = p.offset().left;
          py = p.offset().top;
          alert('2p (' + px + ', ' + py + ')');

          bx = b.position().left;
          by = b.position().top;
          alert('2b (' + bx + ', ' + by + ')');
        </script>
      </body>
    </html>

javascript로 마우스 클릭 위치 알아오기

마우스 클릭 이벤트가 발생하면 이벤트 핸들러를 통해서 발생한 그 이벤트를 받아볼수 있다.

    <!DOCTYPE html>
    <html id="area">
      <head>
      <style>
        #area { background-color: pink; }
      </style>
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
      <script>
        $(function(){
          $('#area').click( function (event) {
            x = event.pageX; 
            y = event.pageY; 
            console.log(x, y);
          });
        });
      </script>
      </head>
    </html>

좌우로 스크롤되는 html 메뉴

http://m.sports.naver.com/basketball/index.nhn
여기에 사용된 메뉴

css

<div style="position: absolute;
            z-index: 1;
            left: 0; top: 0;
            height: 100%;
            transform: translate3d(-146px, 0px, 0px);

            transform-duration: 300ms;">
    <ul>
        <li>
           <a onclick="nclk(this, 'home');" href="/index.html">
               <span class="lnb_mnu"> 홈 </span>
           </a>
        </li>
        <li class="selected">
           <a onclick="nclk(this, 'exit');" href="/exit.html">
               <span class="lnb_mnu"> 끝 </span>
           </a>
        </li>
    </ul>
</div>

오프 캔버스

http://jmnote.com/wiki/Bootstrap_오프캔버스_템플릿

1. 가장 짧은 글:
https://mirror.enha.kr/wiki/반응형 웹 디자인

2. 조금 긴 글:
http://www.webactually.co.kr/archives/12875

3. 아주 긴 글:
http://sir.co.kr/bbs/board.php?bo_table=pb_lecture&sca=반응형웹

4. 반응형 웹과 responsive image
http://usefulparadigm.com/2014/11/03/processing-images-on-responsive-web/

5. 미디어 쿼리
http://naradesign.net/wp/2012/05/30/1823/

6. 새로운 형태의 메뉴 (화면 상단의 파란색 메뉴)
http://helloworld.naver.com/helloworld/81480

7. 폰트 크기를 조절가능하도록 하는 구조
http://naradesign.net/wp/2014/11/06/2077/
html의 폰트크기를 css에서 지정한다.
나머지 폰트 크기는 rem 단위로 지정한다.

은성훈