HTML 学习笔记（drag & drop）

拖放(Drag & Drop)是一种常见的特性,即抓取对象以后拖到另一个位置。在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。过去，我们用监听鼠标的Mousedown、Mouseove、Mouseup等事件来不停地获取鼠标的坐标来修改元素的位置，而现在html5原生的Drag &Drop事件（DnD），方便了许多，而且性能也有了提高。

如何使对象能够被拖动

为了使元素能够被拖动需把要拖动元素的draggable 属性设置为true。

<img src="../img/0.jpg"  draggable="true" id="image"/>

注意：在大多数浏览器中，a元素和img元素默认就是可以拖放的，但是为了保险起见，最好还是加上draggable属性。

拖动时触发的事件

dragstart:网页元素开始拖动时触发

drag:被拖动的元素在拖动过程中持续触发

dragenter:被拖动的元素进入目标元素时触发。应该在目标元素监听此事件。

dragleave：别拖动的元素离开目标元素时触发，应该在目标元素中监听该方法。

dragover:被拖动的元素停留在目标元素中时持续触发，应该在目标元素中监听该方法。

drap:被拖动元素或从文件系统选中的文件，拖放落下时触发。

dragend:网页元素拖动结束时触发。

注意：以上这些事件都可以指定回调函数。

dataTransfer 对象

拖动过程中，回调函数接受的事件参数，有一个dataTransfer属性。它指向一个对象，包含了与拖动相关的各种信息。

event.dataTransfer.setData(biaozhi,event.target.id);

draggableElement.addEventListener('dragstart', function(event) {

    event.dataTransfer.setData('text', 'Helloweba');

});

上面代码在拖动开始时，在dataTransfer对象上储存一条文本信息，内容为“Helloweba”。当拖放结束时，可以用getData方法取出这条信息。

dataTransfer对象的属性：

effectAllowed:指定所允许的操作，可能的值为copy、move、link、copyLink、copyMove、linkMove、all、none和uninitialized（默认值，等同于all，即允许一切操作）。

files:包含一个FileList对象，表示拖放所涉及的文件，主要用于处理从文件系统拖入浏览器的文件。
types:储存在DataTransfer对象的数据的类型。

dataTransfer对象的方法：

setData(format, data):在dataTransfer对象上储存数据。第一个参数format用来指定储存的数据类型，比如text、url、text/html等

getData(format):从dataTransfer对象取出数据。

clearData(format):清除dataTransfer对象所储存的数据。如果指定了format参数，则只清除该格式的数据，否则清除所有数据。

setDragImage(imgElement, x, y):指定拖动过程中显示的图像。默认情况下，许多浏览器显示一个被拖动元素的半透明版本。参数imgElement必须是一个图像元素，而不是指向图像的路径，参数x和y表示图像相对于鼠标的位置。

dataTransfer对象允许在其上存储数据，这使得在被拖动元素与目标元素之间传送信息成为可能。

实例代码在两个div之间拖动元素

实现拖放的过程

1.设置元素可拖放，即把draggable属性设置为true

2.拖动什么 ondragstart 和 setData()

image.ondragstart = function(event) {

        event.dataTransfer.setData(biaozhi,event.target.id);

}

image为可拖动的元素

3.放到何处-ondargover (ondragover事件规定在何处放置被拖动的数据。默认地无法将数据/元素放置到其他元素中。如果要允许放置，必须阻止默认的处理方式。这里通过调用ondragover事件的event.preventDefault()方法：)

 box1Div.ondragover = function(event) {

        event.preventDefault();

    }

4.进行放置

当放置被拖拽数据时会发生drop事件，例：

function dropeImage(event) {

    event.preventDefault();

    //从dataTransfer中取出包装好的数据 放在目标元素中

    var data = event.dataTransfer.getData(biaozhi);

    event.target.appendChild(document.getElementById(data));

}

完整例子（元素在两个div之间进行拖放）

HTML 代码

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <script src="../js/drapAnddrop.js"></script>

        <style type="text/css">

            .box {

                width: 400px;

                height: 400px;

                border: 1px solid orange;

            }

            #box1 {

                background: darkgray;

            }

        </style>

    </head>

    <body>

        <div id="box1" class="box"></div>

        <div id="box2" class="box">

            <img src="../img/0.jpg"  draggable="true" id="image"/>

        </div>

    </body>

</html>

Js代码

var box1Div;

var box2Div ,image;

var biaozhi = "text";

window.onload = function() {

    box1Div = document.getElementById("box1");

    box2Div = document.getElementById("box2");

    image = document.getElementById("image");

    //设置数据格式，就是包装要传递的数据在dataTransfer中

    image.ondragstart = function(event) {

        event.dataTransfer.setData(biaozhi,event.target.id);

    }

    //放置结束

    box1Div.ondragover = function(event) {

        event.preventDefault();

    }

    box2Div.ondragover = function (event) {

        event.preventDefault();

    }

    //进行放置

    box1Div.ondrop = dropeImage;

    box2Div.ondrop = dropeImage;

}

function dropeImage(event) {

    event.preventDefault();

    //从dataTransfer中取出包装好的数据 放在目标元素中

    var data = event.dataTransfer.getData(biaozhi);

    event.target.appendChild(document.getElementById(data));

}

下面一段代码是拖放本地文件进入网页中(本例子是拖放桌面上的一张图片进入网页元素)

HTML 代码

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            #imageContainer {

                width: 500px;

                height: 500px;

                background: darkgray;

            }

        </style>

        <script src="../js/locationDrap.js"></script>

    </head>

    <body>

    <div id="imageContainer"></div>

    <div id="msgId">

    </div>

    </body>

</html>

Js 代码

var imageContainer;

window.onload = function () {

    imageContainer = document.getElementById("imageContainer");

    imageContainer.ondragover = function(event) {

        event.preventDefault();

    }

    imageContainer.ondrop = function(event) {

        event.preventDefault();

//        shouObj(event.dataTransfer.files);

        var f = event.dataTransfer.files[0];

        var fileReader = new FileReader();

        fileReader.onload = function(event) {

//            shouObj(event.target);

            imageContainer.innerHTML = "<img src=\"" + fileReader.result +"\" />"

        }

        fileReader.readAsDataURL(f);

    }

}

function shouObj(obj) {

    var s = "";

    for (var k in obj) {

        s += k  + ":" + obj[k] + "<br />";

    }

    document.getElementById("msgId").innerHTML = s;

}

其中fileReader.result 就是经过加密的图片文件。