html5拖动 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        #div1 {width: 198px; height: 120px;padding:10px;border:1px solid #aaaaaa;}
    </style>
</head>
<body> 
    <script>
        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));
        }
        function allowDrop(ev){
            ev.preventDefault();
        }
    </script>
    <p>请将图片拖入矩形框中</p>
    <!-- draggable="true"允许元素可拖动 ondragstart拖动何？ondragover拖到哪里？ondrop放置 -->
    <div id='div1' ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    <br />
    <img id="drag1" src="1.jpg" draggable="true" ondragstart="drag(event)" width="106" height="100">

   
</body>
</html>

 

posted @ 2020-08-18 15:50  DurianTRY  阅读(90)  评论(0)  编辑  收藏  举报