카테고리 없음

드래그앤드랍

psys 2020. 7. 7. 10:16
728x90

 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        //브라우저의 Drag&Drop기본기능 막아버리기
        window.addEventListener("dragover", function () {
            event.preventDefault(); // 기본이벤트 막아버리기
        });
        window.addEventListener("drop", function () {
            event.preventDefault(); // 기본이벤트 막아버리기
        });

    </script>
</body>

</html>

drop만 막지말고 dragover도 막아야 막힌당~!

 

 

사진의 정보 콘솔에 출력

배열형식으로 담겨온다.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #id_psy {
            width: 200px;
            height: 200px;
            border: 2px solid mediumseagreen;
        }
    </style>
</head>

<body>
    <div id="id_psy" ondragover="f_dragover()" ondrop="f_drop()"> 여기에 이미지를 끌어다 놔~<br>(이곳에만 이미지 넣기 가능)</div>

    <script>

function f_dragover(){
            // 여기는 기본적으로 막아줘야 함
           event.preventDefault();
           event.stopPropagation();
        }
        function f_drop(){
            // 끌고 온 파일의 정보
            console.log(event.dataTransfer.files);
        }

        // 브라우저의 Drag&Drop기본기능 막아버리기

        // 마우스 잡고 있을 때
        window.addEventListener("dragover",function(){
            event.preventDefault();  // 기본 이벤트 막아버리기
            event.stopPropagation(); // 이벤트 전파 막기
        });

        // 마우스 놓았을 때
        window.addEventListener("drop",function(){
            event.preventDefault();  // 기본이벤트 막아버리기
            event.stopPropagation();
        })
    </script>
</body>

</html>

 

외부에서 끌오온 파일 정보를 files에 넣어준다.

여러개를 갖다대면 여러개가 나옴

세 개의 이미지를 넣음

 

 

 

alert(v_fileReader.result);

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #id_psy {
            width: 200px;
            height: 200px;
            border: 2px solid mediumseagreen;
        }
    </style>
</head>

<body>
    <div id="id_psy" ondragover="f_dragover()" ondrop="f_drop()"> 여기에 이미지를 끌어다 놔~<br>(이곳에만 이미지 넣기 가능)</div>

    <script>

        function f_dragover() {
            // 여기는 기본적으로 막아줘야 함
            event.preventDefault();
            event.stopPropagation();
        }
        function f_drop() {
            // 끌고 온 파일의 정보
            // console.log(event.dataTransfer.files);

            // 파일 하나만 끌고왔을 때
            var v_file = event.dataTransfer.files[0];

            // 파일 읽어오기
            var v_fileReader = new FileReader();

            // 파일리더 읽어 줄 사람
            // v_fileReader.readAsText // 텍스트 읽을 때
            // v_fileReader.readAsDataURL // 이미지 읽을 때
            v_fileReader.readAsDataURL(v_file); // 정보를 담긴다.

            // 용량에 따라 읽어들이는 것이 달라(비동기처리)
            // 다 읽은 이벤트 알려줄 때까지기다렸다 끝나는 시점에 무엇을 할 것인지 알려줘
            v_fileReader.onload = function(){
                // 이곳에서 완성을 알려줌
                alert("체크2"+v_fileReader.result);//체크2와 이미지에 대한 정보 가져옴
            }
            // 이게 먼저 실행!! 이것을 비동기(ASynchronouse)라고 부름
            alert("체크1"+v_fileReader.result);//체크1만 출력
            // function을 시켜놓고 체크1을 시켜! 그래서 체크1출력 뒤 체크2가 출력
            // 커피숍에서 음식 시켜놓고 다른짓 하다가 찾아오는 것을 생각해~
        }

        // 브라우저의 Drag&Drop기본기능 막아버리기

        // 마우스 잡고 있을 때
        window.addEventListener("dragover", function () {
            event.preventDefault();  // 기본 이벤트 막아버리기
            event.stopPropagation(); // 이벤트 전파 막기
        });

        // 마우스 놓았을 때
        window.addEventListener("drop", function () {
            event.preventDefault();  // 기본이벤트 막아버리기
            event.stopPropagation();
        })
    </script>
</body>

</html>

 

기존것에 사진 계속 추가

 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #id_psy {
            width: 200px;
            height: 200px;
            border: 2px solid mediumseagreen;
        }
    </style>
</head>

<body>
    <div id="id_psy" ondragover="f_dragover()" ondrop="f_drop()"> 여기에 이미지를 끌어다 놔~<br>(이곳에만 이미지 넣기 가능)</div>

    <script>
        var v_psy = document.getElementById("id_psy");
        function f_dragover() {
            // 여기는 기본적으로 막아줘야 함
            event.preventDefault();
            event.stopPropagation();
        }
        function f_drop() {
            // 끌고 온 파일의 정보
            // console.log(event.dataTransfer.files);

            // 파일 하나만 끌고왔을 때
            var v_file = event.dataTransfer.files[0];

            // 파일 읽어오기
            var v_fileReader = new FileReader();

            // 파일리더 읽어 줄 사람
            // v_fileReader.readAsText // 텍스트 읽을 때
            // v_fileReader.readAsDataURL // 이미지 읽을 때
            v_fileReader.readAsDataURL(v_file); // 정보를 담긴다.

            // 용량에 따라 읽어들이는 것이 달라(비동기처리)
            // 다 읽은 이벤트 알려줄 때까지기다렸다 끝나는 시점에 무엇을 할 것인지 알려줘
            v_fileReader.onload = function () {
                // 이곳에서 완성을 알려줌
                // alert("체크2"+v_fileReader.result);//체크2와 이미지에 대한 정보 가져옴

                var v_img = document.createElement("img");
                v_img.src = v_fileReader.result;
                v_img.width = 100;
                v_img.height = 100;
                v_psy.appendChild(v_img); // 문서 어딘가에 붙여줘야 눈에 보임
            }
            // 이게 먼저 실행!! 이것을 비동기(ASynchronouse)라고 부름
            // alert("체크1"+v_fileReader.result);//체크1만 출력(다 읽지않고 출력했기에 result에 값이 없음)
            // function을 시켜놓고 체크1을 시켜! 그래서 체크1출력 뒤 체크2가 출력
            // 커피숍에서 음식 시켜놓고 다른짓 하다가 찾아오는 것을 생각해~


        }

        // 브라우저의 Drag&Drop기본기능 막아버리기

        // 마우스 잡고 있을 때
        window.addEventListener("dragover", function () {
            event.preventDefault();  // 기본 이벤트 막아버리기
            event.stopPropagation(); // 이벤트 전파 막기
        });

        // 마우스 놓았을 때
        window.addEventListener("drop", function () {
            event.preventDefault();  // 기본이벤트 막아버리기
            event.stopPropagation();
        })
    </script>
</body>

</html>

 

div child로 붙여서 붙는거

 

 

이제 사진 넣을때 마지막에 넣은 사진만 보이게

넣기 전에 v_psy를 한 번 비워주기!

                v_psy.innerHTML=""; // 넣기 전에 비워줌
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #id_psy {
            width: 200px;
            height: 200px;
            border: 2px solid mediumseagreen;
        }
    </style>
</head>

<body>
    <div id="id_psy" ondragover="f_dragover()" ondrop="f_drop()"> 여기에 이미지를 끌어다 놔~<br>(이곳에만 이미지 넣기 가능)</div>

    <script>
        var v_psy = document.getElementById("id_psy");
        function f_dragover() {
            // 여기는 기본적으로 막아줘야 함
            event.preventDefault();
            event.stopPropagation();
        }
        function f_drop() {
            // 끌고 온 파일의 정보
            // console.log(event.dataTransfer.files);

            // 파일 하나만 끌고왔을 때
            var v_file = event.dataTransfer.files[0];

            // 파일 읽어오기
            var v_fileReader = new FileReader();

            // 파일리더 읽어 줄 사람
            // v_fileReader.readAsText // 텍스트 읽을 때
            // v_fileReader.readAsDataURL // 이미지 읽을 때
            v_fileReader.readAsDataURL(v_file); // 정보를 담긴다.

            // 용량에 따라 읽어들이는 것이 달라(비동기처리)
            // 다 읽은 이벤트 알려줄 때까지기다렸다 끝나는 시점에 무엇을 할 것인지 알려줘
            v_fileReader.onload = function () {
                // 이곳에서 완성을 알려줌
                // alert("체크2"+v_fileReader.result);//체크2와 이미지에 대한 정보 가져옴

                v_psy.innerHTML=""; // 넣기 전에 비워줌

                var v_img = document.createElement("img");
                v_img.src = v_fileReader.result;
                v_img.width = 200;
                v_img.height = 200;
                v_psy.appendChild(v_img); // 문서 어딘가에 붙여줘야 눈에 보임
            }
            // 이게 먼저 실행!! 이것을 비동기(ASynchronouse)라고 부름
            // alert("체크1"+v_fileReader.result);//체크1만 출력(다 읽지않고 출력했기에 result에 값이 없음)
            // function을 시켜놓고 체크1을 시켜! 그래서 체크1출력 뒤 체크2가 출력
            // 커피숍에서 음식 시켜놓고 다른짓 하다가 찾아오는 것을 생각해~


        }

        // 브라우저의 Drag&Drop기본기능 막아버리기

        // 마우스 잡고 있을 때
        window.addEventListener("dragover", function () {
            event.preventDefault();  // 기본 이벤트 막아버리기
            event.stopPropagation(); // 이벤트 전파 막기
        });

        // 마우스 놓았을 때
        window.addEventListener("drop", function () {
            event.preventDefault();  // 기본이벤트 막아버리기
            event.stopPropagation();
        })
    </script>
</body>

</html>

'카테고리 없음'의 다른글

  • 현재글드래그앤드랍
댓글

티스토리툴바