(function(){
    /*-------節點--------*/
    var myimg = document.getElementById(‘myimg‘);
    var dropBox = document.getElementById(‘dropBox‘);

    /*-------事件綁定--------*/
    myimg.ondragstart = drag;
    dropBox.ondragover = dragover;
    dropBox.ondrop = drop;

    /*-------函數--------*/
    function drag(ev){
        //通過ondragstart事件去存儲 當前節點的 id 到 ev.dataTransfer 裏面
 

        ev.dataTransfer.setData(‘Text‘,ev.target.id);
        console.log(‘拖拽的開始‘);
    }

    function dragover(){
        console.log(‘hhh‘);
        //***** 註意：添加一個默認事件的取消  使得drop生效！！！
        event.preventDefault();
    }

    function drop(ev){
        var data = ev.dataTransfer.getData(‘Text‘);
        ev.target.appendChild(document.getElementById(data));
    }

})();

拖拽的效果 第一步 設置 可拖拽的屬性 draggable="true" 綁定drag 事件 第二步 設置 放置位置 觸發的事件 dragover 第三步 設置 放置之後 觸發的事件 dragover 下面請看代碼：