HTML 拖拽效果


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <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>

你可能感兴趣的:(前端)