JavaScript-Drag n Drop 예제 사이트





★ Drag n Drop 에 대한 괜찮은 예제 사이트를 하나 소개 합니다.



https://hacks.mozilla.org/2009/07/html5-drag-and-drop/



http://decafbad.com/2009/07/drag-and-drop/api-demos.html#newschool



http://msdn.microsoft.com/en-us/library/ie/ms536744(v=vs.85).aspx




HTML+CSS: Can I fixed div element position when the size change?

![first position. When I try to resize(by the red point)][1]






![It is moving while dragging(change size)][2]

but When the element(ruler) is horizontal mode. it works fine.

please help me T_T

here is part of the source

ruler.css({
    width: e.pageY -ruler.offset().top
});

full source is here.

$.event.add( document, "mousemove", function(e){
e.stopPropagation(e);
if(ruler_resize_active) {
    console.log(".ruler-resize:mousemove");
    console.log(ruler.offset().left);
    console.log(ruler.offset().top);
    if(options.orientation == "vertical") {
            ruler.css({
             width: e.pageY - ruler.offset().top
        });
            }
     }
});




http://jsfiddle.net/Bst6G/



이렇게 하면 됩니다.





var ruler = $(this)
    .addClass('ruler')
    .css({
        minWidth: options.minWidth,
        maxWidth: options.maxWidth,
        width: options.width,
        webkitTransformOrigin: "top left"
    });

http://jsfiddle.net/Bst6G/3/

Tag // div, fixed, HTML, Position

HTML5 - HTML5 Canvas 를 활용한 다양한 라이브러리를 소개하는 사이트



아래의 사이트에서 HTML5 에서 새롭게 선보인 CANVAS 라는 객체를 제어하는 다양한 라이브러리를 찾으실 수 있습니다.


출처: http://www.softr.li/blog/2012/06/20/which-html5-canvas-javascript-library-should-i-use



Canvas 를 사용한 라이브러리 목록입니다.

Github 에서 찾은 기타 라이브러리 입니다.








JavaScript - 이벤트 키 코드



자바스크립트 - 이벤트 키 코드


  • onKeyDown, onKeyPress, onKeyUp 등에서 사용가능한 스크립트 입니다.
  • 텍스트 입력 상자 등에서 사용가능하겠습니다.
    • 사용예제
    • <input type = "text" ... onKeyUp = "javascript:keyControl()"/>
    • 스크립트 함수 keyControl() 안에서는
    • <script>
    • function keyControl(){
    • if(event.keyCode == 키코드값)
    • {
    • 실행코드 기술
    • }
    • }
    • </script>

키 코드 값은 다음과 같습니다.

  • Key code 정리

    8 <백스페이스>

    9 <Tab>

    12 <Clear>

    13 <Enter>

    16 <Shift>

    17 <Ctrl>

    18 <Menu>

    19 <Pause>

    20 <Caps Lock>

    27 <Esc>

    32 <스페이스바>

    33 <Page Up>

    34 <Page Down>

    35 <End>

    36 <Home>

    37 <왼쪽 화살표>

    38 <위쪽 화살표>

    39 <오른쪽 화살표>

    40 <아래쪽 화살표>

    41 <Select>

    42 <Print Screen>

    43 <Execute>

    44 <Snapshot>

    45 <Ins>

    46 <Del>

    47 <Help>

    144 <Num Lock>

    문자키

    65 A

    66 B

    67 C

    68 D

    69 E

    70 F

    71 G

    72 H

    73 I

    74 J

    75 K

    76 L

    77 M

    78 N

    79 O

    80 P

    81 Q

    82 R

    83 S

    84 T

    85 U

    86 V

    87 W

    88 X

    89 Y

    90 Z

    '0'부터 '9'

    48 0 키

    49 1 키

    50 2 키

    51 3 키

    52 4 키

    53 5 키

    54 6 키

    55 7 키

    56 8 키

    57 9 키

    숫자키 모음

    96 0 키

    97 1 키

    98 2 키

    99 3 키

    100 4 키

    101 5 키

    102 6 키

    103 7 키

    104 8 키

    105 9 키

    106 곱하기 기호(*)

    107 더하기 기호(+)

    108 <Enter>키(숫자키 모음)

    109 빼기 기호(-)

    110 소수점(.)

    111 나누기 기호(/)

    기능 키

    112 F1

    113 F2

    114 F3

    115 F4

    116 F5

    117 F6

    118 F7

    119 F8

    120 F9

    121 F10

    122 F11

    123 F12

    124 F13

    125 F14

    126 F15

    127 F16

JavaScript - Confirm 메소드 활용하기



자바스크립트 CONFIRM 활용하기


idcon = confirm('해당 아이디를 사용하시겠습니까');

if (idcon == true){

window.close();

}

else if(d0cument.chk_ID_FORM.txt_OK_ID.value == "")

{

alert('아이디 중복검사를 먼저 해주세요');

d0cument.chk_ID_FORM.txt_CHKTRY_ID.focus();

}

대충 위와 같이 사용이 가능합니다. 아휴 힘들다 -_ㅠ

그리고 다른 방법.. 자바에서 JSP로 뿌릴때는...

PrintWriter out = response.getWriter();

out.println("<script>");

out.println("if(confirm('아이디가 존재하지 않습니다. 회원가입을 하시겠습니까);

out.println("{location.href='./MemberJoin.me';}");

out.println("else");

out.println("location.href='./MemberLogin.me';");

out.println("</script>");

out.close();

이렇게 써도 되용 -_ㅠ

|  1  |  2  |  3  |  4  |  5  |  6  |