드래그 이벤트의 dataTransfer

// 
    var box3 = document.querySelector(".box3");
// 
    var target = document.querySelector(".box2");
// 
    box3.ondragstart = function(e){
        console.log(" ");
        console.log(e.dataTransfer);
    // 
    /*
    DataTransfer {dropEffect: "none", 
                  effectAllowed: "uninitialized",
                   items:DataTransferItemList, 
                  types: Array(0), 
                  files: FileList}
    dropEffect:"link"
    effectAllowed:"link"
    files:FileList
    items:DataTransferItemList
    types:Array(0)
    __proto__:DataTransfer
    */
        e.dataTransfer.effectAllowed = "link";
        e.dataTransfer.setData("text",e.target.className);
    }
    box3.ondrag = function(){
        //console.log(" ");
    }
    box3.ondragend = function(){
        //console.log(" ");
    }
    // 
    target.ondragenter = function(){
        //console.log(" ");
    }
    target.ondragleave = function(){
        //onsole.log(" ");
    }
    //
    target.ondragover = function(e){
        //console.log(" ");
        e.preventDefault();//    ondrop 
        e.dataTransfer.dropEffect = "link";
    }
    target.ondrop = function(e){
        console.log(" ");
        //target.appendChild(box3);
        var eclassName = e.dataTransfer.getData("text");
        target.appendChild(document.querySelector("."+eclassName))
        // 
    }

데이터 전송은 전체 드래그 생명의 적재 대상에 관통한다

setDate###

dataTransfer.setData(formata,content)format: 데이터 형식, text URL 또는 기타 MIME 형식 지원: 전달할 내용

getData###

dataTransfer.getData(formata)에서 setData를 통해 설정된 값을 가져옵니다.

주의###

dataTransfer.effectAllowed(드래그 요소의 마우스 효과 설정)

ondropstart에서만 ### 설정 가능

흔히 볼 수 있는 것은:copy link move none all copyLink ... none로 정할 때 ondrop에서 터치할 수 없음
dataTransfer.dropEffect는 대상 요소의 마우스 효과를 설정합니다. ffectAllowed와 동시에 설정하면 일치해야 합니다.