drag拖拽

来源:互联网 发布:网络面板安装工艺 编辑:程序博客网 时间:2024/05/17 02:51
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        #div1{            width:200px;            height:100px;            border: 1px solid red;        }    </style></head><body>    <div id="div1"         ondragover="dragOver(event);"         ondrop="dropMyObject(event);">    </div>    <p id="myp"       draggable="true"       ondragstart="dragStart(event)">我被拖拽    </p></body></html><script>    function dragStart(ev){        ev.dataTransfer.setData("objectId",ev.target.id);    }    function dragOver(ev){        ev.preventDefault();    }    function  dropMyObject(ev) {        var objId = ev.dataTransfer.getData("objectId");        var obj = document.getElementById(objId);        ev.target.appendChild(obj);    }</script>

原创粉丝点击