HTML5拖拽实现的小例子

最新推荐文章于 2023-10-14 12:41:19 发布

为你写诗_xue

最新推荐文章于 2023-10-14 12:41:19 发布

阅读量1.3k

点赞数

分类专栏： WEB前端

本文链接：https://blog.csdn.net/liushuxiaderiluo/article/details/50103435

版权

WEB前端专栏收录该内容

11 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>来回拖放</title>
    <style>
        #div1{
            width: 400px;
            height: 200px;
            border: 1px solid black;
            float: left;
        }
        #div2{
            width: 400px;
            height: 200px;
            border: 1px solid black;
            float: left;
        }
    </style>
</head>
<body>
<script type="text/javascript">
    function AllowDrag(ev){
        ev.preventDefault();
    }
    function drag(ev){
        ev.dataTransfer.setData("Text",ev.target.id);
    }
    function drop(ev){
        ev.preventDefault();
        var data=ev.dataTransfer.getData("Text");
        ev.target.appendChild(document.getElementById(data));
    }


</script>
<div id="div1" οndrοp="drop(event)" οndragοver="AllowDrag(event)"></div>
<div id="div2" οndrοp="drop(event)" οndragοver="AllowDrag(event)"></div>
<p id="drag1" draggable="true" οndragstart="drag(event)">我是将要拖拽的东西</p>

</body>
</html>

优惠劵

为你写诗_xue

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML5拖拽实现的小例子

html>html>head lang="en"> meta charset="UTF-8"> title>来回拖放title> style> #div1{ width: 400px; height: 200px; border: 1px solid black;
复制链接

扫一扫