draggable

드래그 할수 있도록 해주는 속성

이미지 태그는 기본적으로 draggable="true"

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <script src="https://code.jquery.com/jquery-3.5.0.js" integrity="sha256-r/AaFHrszJtwpe+tHyNi/XCfMxYpbsRg2Uqn0x3s2zc=" crossorigin="anonymous"></script>
        <style>
            #box{border: 1px solid black; width: 100px; height: 100px}
            img{width: 100px; height: 100px}
        </style>
        <script>
            $(function(){
                $("#item").on("dragstart",function(){
                    console.log("ABC")
                })
            })
        </script>
    </head>
    <body>
        <div id="box"></div>
        <img id="item" draggable="true" src="314e41127aeee.gif">
    </body>
</html>

dragstart

드래그 하는 정보가 매개변수 e에 저장

                $("#item").on("dragstart",function(e){
                    var event = e.originalEvent;
                    console.log(e.target.id);
                    event.dataTransfer.setData("img",e.target.id);
                })

console.log(e.target.id);

 var event = e.originalEvent;
//자바스크립트의 이벤트 매개변수

dragover

마우스를 올릴 때

              $("#box").on("dragover",function(e){
                    e.preventDefault();
                })

드래그 금지표시(Default)를 사라지도록 함

drop

                $("#box").on("drop",function(e){
                    var event = e.originalEvent;
                    var img = event.dataTransfer.getData("img")
                    console.log(img);
                })

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <script src="https://code.jquery.com/jquery-3.5.0.js" integrity="sha256-r/AaFHrszJtwpe+tHyNi/XCfMxYpbsRg2Uqn0x3s2zc=" crossorigin="anonymous"></script>
        <style>
            #box{border: 1px solid black; width: 100px; height: 100px}
            img{width: 100px; height: 100px}
        </style>
        <script>
            $(function(){
                $("#item").on("dragstart",function(e){
                    var event = e.originalEvent;
//                    console.log(e.target.id);
                    event.dataTransfer.setData("img",e.target.id);
                    //드래그를 시작할 때 데이터를 담음
                })

                $("#box").on("dragover",function(e){
                    e.preventDefault();
                })
                $("#box").on("drop",function(e){
                    var event = e.originalEvent;
                    var img = event.dataTransfer.getData("img")
                    $("#box").append($("#"+img));
                })
                
            })
        </script>
    </head>
    <body>
        <div id="box"></div>
        <img id="item" src="314e41127aeee.gif">
    </body>
</html>

'디지털 컨버전스 > Java Script' 카테고리의 다른 글

[인터페이스 구현]  (0) 2020.05.28
[Javascript] Cookie  (0) 2020.05.19
[JQuery] 동적 바인딩 - 댓글달기  (0) 2020.04.21
[JQuery] 동적 바인딩 - 파일첨부  (0) 2020.04.21
[JQuery] 채팅 박스 - 이모티콘 박스 추가  (0) 2020.04.20

+ Recent posts

티스토리툴바