拖拽的效果 第一步 设置 可拖拽的属性 draggable="true" 绑定drag 事件 第二步 设置 放置位置 触发的事件 dragover 第三步 设置 放置之后

Posted 2020-09-27

(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));
    }

})();