2016.11.15 HTML5新特性拖放

最新推荐文章于 2022-10-11 22:38:27 发布

e家族

最新推荐文章于 2022-10-11 22:38:27 发布

阅读量277

点赞数

分类专栏：前端文章标签： html5 拖放

本文链接：https://blog.csdn.net/qq_36434014/article/details/53172889

版权

前端专栏收录该内容

38 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script>
        function allowDrop(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>
    <style>
        #tuo{
            width: 500px;
            height: 400px;
            background-color: #0088cc;
        }
        #cun{
            width: 500px;
            height: 400px;
            background-color: wheat;
        }
    </style>
</head>
<body>
      <div id="cun" οndrοp="drop(event)" οndragοver="allowDrop(event)"></div>
        <hr>
      <img src="page_photo.jpg" alt="" id="tuo" draggable="true" οndragstart="drag(event)" width="500" height="400"/>
</body>
</html>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

e家族

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2016.11.15 HTML5新特性拖放

html>html>head lang="en"> meta charset="UTF-8"> title>title> script> function allowDrop(ev){ ev.preventDefault(); } function drag(ev){ ev.
复制链接

扫一扫