3. Implementation/VB / Java Script

Drag & Drop 예

SSKK 2009. 7. 21. 18:28
자바스크립트를 이용하여 드래그 앤 드랍을 구현하는 예이다.

<html>

<head>

    <script type="text/javascript">

    var isDown=true;

    var x=0 , y=0 ;

    function start(){

        if (event.srcElement.id=="myImg"){

            isDown=true ;

            x = event.clientX - document.all.myImg.style.pixelLeft;

            y = event.clientY - document.all.myImg.style.pixelTop;

            document.onmousemove = move;

        }

    }

    function move(){

        if (isDown&&event.button==1)  {

            document.all.myImg.style.pixelLeft = event.clientX - x;

            document.all.myImg.style.pixelTop = event.clientY - y;

        return false

        }

    }

    function stop(){

        isDown=false;

    }

    document.onmousedown = start;

    document.onmouseup = stop;

    </script>

</head>

<body>

    <img id="myImg" src="person1.gif" style="position:relative">

    <h2>Drag & Drop 하세요</h2>

</body>

</html>

 

출처 : 삼성 SDS e-Campus 의 "JavaScript 쉽고 빠르게" 과정 중에서