HTML5之拖放属性实现图片的拖放

HTML5中实现拖放操作，至少经过如下步骤
1）设置被拖放对象元素的draggable属性设置为true
2）编写与拖放有关的事件处理代码

事件	产生事件的元素	描述
dragstart	被拖拽物体	开始拖放
dragenter	被拖拽物体开始进入区域	进入范围
dragover	拖放过程中鼠标经过的元素（包括目标对象）	正在元素上
dragleave	拖放离开时鼠标经过的元素（包括目标对象）	离开范围
drop	目标对象	被拖拽物体放下
dragend	被拖拽物体	拖放结束

事件发生的顺序： dragstart -> dragenter -> dragover ->dragleave ->drop ->dragend
如果分为两组来看：

被拖拽元素 (发生的事件)	要进入的目标元素（发生的事件）
dragstart	dragenter
dragend	dragover
	dragleve
	drop

一个简单的例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>HTML5拖放属性</title>
    <style>
        .box {
            width: 400px;
            height: 400px;
            float: left;
        }
        #box1 {
            background: #ccc;
        }
        #box2 {
            background: palevioletred;
        }
    </style>
    <script>

        //声明全局变量
        var box1,img,box2;
        window.onload = function () {
            box1 = document.getElementById("box1");
            box2 = document.getElementById("box2");
            img1 = document.getElementById("img1");

            //ondragover拖放过程中鼠标经过的元素（包括目标对象）
            box1.ondragover = function (e) {
                e.preventDefault();//阻止系统默认事件
            };
            box2.ondragover = function (e) {
                e.preventDefault();//阻止系统默认事件
            };


            //ondragstart被拖拽的物体
            img1.ondragstart = function (e) {
                e.dataTransfer.setData("imgID","img1");//设置setData()
            };

            box1.ondrop = dropimg;//ondrop拖拽物体放下的时候
             box2.ondrop = dropimg;

            //图片拖动方法
            function dropimg(e) {
                e.preventDefault();
                e.target.appendChild(document.getElementById(e.dataTransfer.getData("imgID")));//获得getData()
            }
           
        }
    </script>
</head>
<body>
<div class="box" id="box1" draggable="true"></div>
<div class="box" id="box2" draggable="true"></div>
<img src="../img/sbg1.jpg" id="img1" alt="图片">
</body>
</html>

HTML5之拖放属性实现图片的拖放

猜你喜欢