drag拖拽

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

原创最新推荐文章于 2021-08-05 13:01:33 发布 · 228 阅读

0 ·

CC 4.0 BY-SA版权

JavaScript 专栏收录该内容

9 篇文章

订阅专栏

本文介绍了一个简单的HTML页面示例，该示例演示了如何使用JavaScript实现网页中元素的拖拽功能。通过ondragstart, ondragover 和 ondrop 事件处理程序，实现了将文本从一个元素拖拽到另一个指定的div容器中。

<!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>