首页 > 代码库 > HTML 学习笔记 （drag & drop）

HTML 学习笔记 （drag & drop）

2024-08-30 10:00:21   220人阅读

拖放(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 = http://www.mamicode.com/event.dataTransfer.getData(biaozhi);>

 

完整例子（元素在两个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 = http://www.mamicode.com/event.dataTransfer.getData(biaozhi);>

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

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 就是经过加密的图片文件。

 

HTML 学习笔记 （drag & drop）


联系
我们