drag拖拽

最新推荐文章于 2021-08-05 13:01:33 发布

CZ__

最新推荐文章于 2021-08-05 13:01:33 发布

阅读量176

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/ththcc/article/details/78763178

版权

JavaScript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<!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"
         οndragοver="dragOver(event);"
         οndrοp="dropMyObject(event);">
    </div>
    <p id="myp"
       draggable="true"
       οndragstart="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>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

CZ__

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
drag拖拽

Title #div1{ width:200px; height:100px; border: 1px solid red; } <div id="div1" ondragover="dragOver(event);" ond
复制链接

扫一扫