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

来源：互联网发布：人工智能概念股编辑：程序博客网时间：2024/05/01 13:17

HTML5中实现拖放操作，至少经过如下步骤
1）设置被拖放对象元素的draggable属性设置为true
2）编写与拖放有关的事件处理代码
事件产生事件的元素
描述dragstart被拖拽物体开始拖放dragenter被拖拽物体开始进入区域
进入范围dragover拖放过程中鼠标经过的元素（包括目标对象）正在元素上dragleave拖放离开时鼠标经过的元素（包括目标对象）离开范围drop目标对象被拖拽物体放下
dragend被拖拽物体
拖放结束

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

被拖拽元素 (发生的事件)
要进入的目标元素（发生的事件）dragstartdragenterdragenddragover
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>

0 0