HTML 拖拽效果

来源：互联网发布：mac重置管理员账户编辑：程序博客网时间：2024/05/22 15:25

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        #targetDiv {            width: 300px;            height: 300px;            border: #4f4f4f 1px solid;        }    </style></head><body><div id="targetDiv" ondragover="dragover(event)" ondrop="drop(event)"></div><img id="img" src="img_the_scream.jpg"  draggable="true" ondragstart="dragstart(event)"/><script>    // 1  拖拽元素 设置 dageeable=“true”    //    2实现 三个函数    function dragstart(e) {//        dataTransfer 保存 拖拽元素对象        //设置 拖拽元素的id 保存        e.dataTransfer.setData("id", e.target.id);    }    function dragover(e) {        //清除 浏览器默认事件        e.preventDefault();    }    function drop(e) {        //拿到 拖拽元素的 id 并加入到 目标元素上        var id = e.dataTransfer.getData("id");        e.target.appendChild(document.getElementById(id));        e.target.removeChild(document.getElementById(id))    }</script></body></html>

0 0