[前端] H5 drag drop 拖动

最新推荐文章于 2024-05-16 21:09:48 发布

天空还下着雪

最新推荐文章于 2024-05-16 21:09:48 发布

阅读量4.5k

点赞数

分类专栏：前端文章标签： html

本文链接：https://blog.csdn.net/u010081689/article/details/45392865

版权

前端专栏收录该内容

154 篇文章 0 订阅

订阅专栏

一、介绍

mousedown mouseup mousemove

dragstart dragend drag (在拖动元素上执行) 首先要在此元素上设置draggable="true" 为可拖
dragenter dragleave dragover (在目标元素上执行)

drop 放下 (在目标元素上执行)

dropzone表示可以放到哪个区域

<p draggable="true" dropzone="box">test</p>

上面三个都有类似之处

transfer 转移

二、代码

CSS样式：

#box-wrap {
    width: 600px;
    height: 450px;
    margin-top: 20px;
    border: 1px solid green;
}
#box {
    width: 400px;
    height: 260px;
    margin: 20px 0 0 20px;
    border: 1px solid red;
    outline: 1px solid blue;
    outline-offset: 10px;
    background: -webkit-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet);
    background: -moz-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet);
    background: -o-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet);
    background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
}

HTML布局：

<div id="box" draggable="true">

</div>
<div id="box-wrap">
    
</div>

JS脚本：

// 拖动元素
var eleBox = document.getElementById('box');

eleBox.addEventListener('dragstart', function(e) {
    e.dataTransfer.setData('ele', e.target.id);  // 获取拖动元素的id
});
eleBox.addEventListener('drag', function(e) {
    console.log('持续拖动！');
});
eleBox.addEventListener('dragend', function(e) {
    console.log('结束拖动！');
});


// 目录元素
var eleBoxWrap = document.getElementById('box-wrap');

eleBoxWrap.addEventListener('dragenter', function(e) {
    console.log('拖动元素已进入此容器！');
});
eleBoxWrap.addEventListener('dragover', function(e) {
    console.log('拖动元素悬浮在此容器上！');
    e.preventDefault();
});
eleBoxWrap.addEventListener('dragleave', function(e) {
    console.log('拖动元素已离开此容器！');
});

eleBoxWrap.addEventListener('drop', function(e) {
    e.preventDefault();
    var data = e.dataTransfer.getData('ele');  // 获取拖动元素的id
    e.target.appendChild(document.getElementById(data));
    console.log('放下')
});

详细介绍（源自http://javascript.ruanyifeng.com/dom/event.html）

当Element节点或选中的文本被拖拉时，就会持续触发拖拉事件，包括以下一些事件。

drag事件：拖拉过程中，在被拖拉的节点上持续触发。
dragstart事件：拖拉开始时在被拖拉的节点上触发，该事件的target属性是被拖拉的节点。通常应该在这个事件的监听函数中，指定拖拉的数据。
dragend事件：拖拉结束时（释放鼠标键或按下escape键）在被拖拉的节点上触发，该事件的target属性是被拖拉的节点。它与dragStart事件，在同一个节点上触发。不管拖拉是否跨窗口，或者中途被取消，dragend事件总是会触发的。
dragenter事件：拖拉进入当前节点时，在当前节点上触发，该事件的target属性是当前节点。通常应该在这个事件的监听函数中，指定是否允许在当前节点放下（drop）拖拉的数据。如果当前节点没有该事件的监听函数，或者监听函数不执行任何操作，就意味着不允许在当前节点放下数据。在视觉上显示拖拉进入当前节点，也是在这个事件的监听函数中设置。
dragover事件：拖拉到当前节点上方时，在当前节点上持续触发，该事件的target属性是当前节点。该事件与dragenter事件基本类似，默认会重置当前的拖拉事件的效果（DataTransfer对象的dropEffect属性）为none，即不允许放下被拖拉的节点，所以如果允许在当前节点drop数据，通常会使用preventDefault方法，取消重置拖拉效果为none。
dragleave事件：拖拉离开当前节点范围时，在当前节点上触发，该事件的target属性是当前节点。在视觉上显示拖拉离开当前节点，就在这个事件的监听函数中设置。
drop事件：被拖拉的节点或选中的文本，释放到目标节点时，在目标节点上触发。注意，如果当前节点不允许drop，即使在该节点上方松开鼠标键，也不会触发该事件。如果用户按下Escape键，取消这个操作，也不会触发该事件。该事件的监听函数负责取出拖拉数据，并进行相关处理。

关于拖拉事件，有以下几点注意事项。

拖拉过程只触发以上这些拖拉事件，尽管鼠标在移动，但是鼠标事件不会触发。
将文件从操作系统拖拉进浏览器，不会触发dragStart和dragend事件。
dragenter和dragover事件的监听函数，用来指定可以放下（drop）拖拉的数据。由于网页的大部分区域不适合作为drop的目标节点，所以这两个事件的默认设置为当前节点不允许drop。如果想要在目标节点上drop拖拉的数据，首先必须阻止这两个事件的默认行为，或者取消这两个事件。

<div ondragover="return false">
<div ondragover="event.preventDefault()">

上面代码中，如果不取消拖拉事件或者阻止默认行为，就不可能在div节点上drop被拖拉的节点。

拖拉事件用一个DragEvent对象表示，该对象继承MouseEvent对象，因此也就继承了UIEvent和Event对象。DragEvent对象只有一个独有的属性DataTransfer，其他都是继承的属性。DataTransfer属性用来读写拖拉事件中传输的数据，详见下文《DataTransfer对象》的部分。

下面的例子展示，如何动态改变被拖动节点的背景色。

div.addEventListener("dragstart", function(e) {
  this.style.backgroundColor = "red";
}, false);
div.addEventListener("dragend", function(e) {
  this.style.backgroundColor = "green";
}, false);

上面代码中，div节点被拖动时，背景色会变为红色，拖动结束，又变回绿色。

下面是一个例子，显示如何实现将一个节点从当前父节点，拖拉到另一个父节点中。

// HTML代码为
// <div class="dropzone">
//    <div id="draggable" draggable="true">
//       该节点可拖拉
//    </div>
// </div>
// <div class="dropzone"></div>
// <div class="dropzone"></div>
// <div class="dropzone"></div>

// 被拖拉节点
var dragged;

document.addEventListener("dragstart", function( event ) {
  // 保存被拖拉节点
  dragged = event.target;
  // 被拖拉节点的背景色变透明
  event.target.style.opacity = .5;
}, false);

document.addEventListener("dragend", function( event ) {
  // 被拖拉节点的背景色恢复正常
  event.target.style.opacity = "";
}, false);

document.addEventListener("dragover", function( event ) {
  // 防止拖拉效果被重置，允许被拖拉的节点放入目标节点
  event.preventDefault();
}, false);

document.addEventListener("dragenter", function( event ) {
  // 目标节点的背景色变紫色
  // 由于该事件会冒泡，所以要过滤节点
  if ( event.target.className == "dropzone" ) {
    event.target.style.background = "purple";
  }
}, false);

document.addEventListener("dragleave", function( event ) {
  // 目标节点的背景色恢复原样
  if ( event.target.className == "dropzone" ) {
    event.target.style.background = "";
  }
}, false);

document.addEventListener("drop", function( event ) {
  // 防止事件默认行为（比如某些Elment节点上可以打开链接）
  event.preventDefault();
  if ( event.target.className == "dropzone" ) {
    // 恢复目标节点背景色
    event.target.style.background = "";
    // 将被拖拉节点插入目标节点
    dragged.parentNode.removeChild( dragged );
    event.target.appendChild( dragged );
  }
}, false);

DataTransfer对象概述

所有的拖拉事件都有一个dataTransfer属性，用来保存需要传递的数据。这个属性的值是一个DataTransfer对象。

拖拉的数据保存两方面的数据：数据的种类（又称格式）和数据的值。数据的种类是一个MIME字符串，比如 text/plain或者image/jpeg，数据的值是一个字符串。一般来说，如果拖拉一段文本，则数据默认就是那段文本；如果拖拉一个链接，则数据默认就是链接的URL。

当拖拉事件开始的时候，可以提供数据类型和数据值；在拖拉过程中，通过dragenter和dragover事件的监听函数，检查数据类型，以确定是否允许放下（drop）被拖拉的对象。比如，在只允许放下链接的区域，检查拖拉的数据类型是否为text/uri-list。

发生drop事件时，监听函数取出拖拉的数据，对其进行处理。

DataTransfer对象的属性

DataTransfer对象有以下属性。

（1）dropEffect

dropEffect属性设置放下（drop）被拖拉节点时的效果，可能的值包括copy（复制被拖拉的节点）、move（移动被拖拉的节点）、link（创建指向被拖拉的节点的链接）、none（无法放下被拖拉的节点）。设置除此以外的值，都是无效的。

target.addEventListener('dragover', function(e) {
  e.preventDefault();
  e.stopPropagation();
  e.dataTransfer.dropEffect = 'copy';
});

dropEffect属性一般在dragenter和dragover事件的监听函数中设置，对于dragstart、drag、dragleave这三个事件，该属性不起作用。进入目标节点后，拖拉行为会初始化成用户设定的效果，用户可以通过按下Shift键和Control键，改变初始设置，在copy、move、link三种效果中切换。

鼠标箭头会根据dropEffect属性改变形状，提示目前正处于哪一种效果。这意味着，通过鼠标就能判断是否可以在当前节点drop被拖拉的节点。

（2）effectAllowed

effectAllowed属性设置本次拖拉中允许的效果，可能的值包括copy（复制被拖拉的节点）、move（移动被拖拉的节点）、link（创建指向被拖拉节点的链接）、copyLink（允许copy或link）、copyMove（允许copy或move）、linkMove（允许link或move）、all（允许所有效果）、none（无法放下被拖拉的节点）、uninitialized（默认值，等同于all）。如果某种效果是不允许的，用户就无法在目标节点中达成这种效果。

dragstart事件的监听函数，可以设置被拖拉节点允许的效果；dragenter和dragover事件的监听函数，可以设置目标节点允许的效果。

event.dataTransfer.effectAllowed = "copy";

dropEffect属性和effectAllowed属性，往往配合使用。

event.dataTransfer.effectAllowed = "copyMove";
event.dataTransfer.dropEffect = "copy";

上面代码中，copy是指定的效果，但是可以通过Shift或Ctrl键（根据平台而定），将效果切换成move。

只要dropEffect属性和effectAllowed属性之中，有一个为none，就无法在目标节点上完成drop操作。

（3）files

files属性是一个FileList对象，包含一组本地文件，可以用来在拖拉操作中传送。如果本次拖拉不涉及文件，则属性为空的FileList对象。

下面就是一个接收拖拉文件的例子。

// HTML代码为
// <div id="output" style="min-height: 200px;border: 1px solid black;">
//   文件拖拉到这里
// </div>

var div = document.getElementById('output');

div.addEventListener("dragenter", function( event ) {
  div.textContent = '';
  event.stopPropagation();
  event.preventDefault();
}, false);

div.addEventListener("dragover", function( event ) {
  event.stopPropagation();
  event.preventDefault();
}, false);

div.addEventListener("drop", function( event ) {
  event.stopPropagation();
  event.preventDefault();
  var files = event.dataTransfer.files;
  for (var i = 0; i < files.length; i++) {
    div.textContent += files[i].name + ' ' + files[i].size + '字节\n';
  }
}, false);

上面代码中，通过files属性读取拖拉文件的信息。如果想要读取文件内容，就要使用FileReader对象。

div.addEventListener('drop', function(e) {
  e.preventDefault();
  e.stopPropagation();

  var fileList = e.dataTransfer.files;
  if (fileList.length > 0) {
    var file = fileList[0];
    var reader = new FileReader();
    reader.onloadend = function(e) {
      if (e.target.readyState == FileReader.DONE) {
        var content = reader.result;
        contentDiv.innerHTML = "File: " + file.name + "\n\n" + content;
      }
    }
    reader.readAsBinaryString(file);
  }
});

（4）types

types属性是一个数组，保存每一次拖拉的数据格式，比如拖拉文件，则格式信息就为File。

下面是一个例子，通过检查dataTransfer属性的类型，决定是否允许在当前节点执行drop操作。

function contains(list, value){
  for( var i = 0; i < list.length; ++i ){
    if(list[i] === value) return true;
  }
  return false;
}

function doDragOver(event){
  var isLink = contains( event.dataTransfer.types, "text/uri-list");
  if (isLink) event.preventDefault();
}

上面代码中，只有当被拖拉的节点是一个链接时，才允许在当前节点放下。

DataTransfer对象的方法

DataTransfer对象有以下方法。

（1）setData()

setData方法用来设置事件所带有的指定类型的数据。它接受两个参数，第一个是数据类型，第二个是具体数据。如果指定的类型在现有数据中不存在，则该类型将写入types属性；如果已经存在，在该类型的现有数据将被替换。

event.dataTransfer.setData("text/plain", "Text to drag");

上面代码为事件加入纯文本格式的数据。

如果拖拉文本框或者拖拉选中的文本，会默认将文本数据添加到dataTransfer属性，不用手动指定。

<div draggable="true" ondragstart="
  event.dataTransfer.setData('text/plain', 'bbb')">
  aaa
</div>

上面代码中，拖拉数据实际上是bbb，而不是aaa。

下面是添加其他类型的数据。由于text/plain是最普遍支持的格式，为了保证兼容性，建议最后总是将数据保存一份纯文本的格式。

var dt = event.dataTransfer;

// 添加链接
dt.setData("text/uri-list", "http://www.example.com");
dt.setData("text/plain", "http://www.example.com");
// 添加HTML代码
dt.setData("text/html", "Hello there, <strong>stranger</strong>");
dt.setData("text/plain", "Hello there, <strong>stranger</strong>");
// 添加图像的URL
dt.setData("text/uri-list", imageurl);
dt.setData("text/plain", imageurl);

可以一次提供多种格式的数据。

var dt = event.dataTransfer;
dt.setData("application/x-bookmark", bookmarkString);
dt.setData("text/uri-list", "http://www.example.com");
dt.setData("text/plain", "http://www.example.com");

上面代码中，通过在同一个事件上面，存放三种类型的数据，使得拖拉事件可以在不同的对象上面，drop不同的值。注意，第一种格式是一个自定义格式，浏览器默认无法读取，这意味着，只有某个部署了特定代码的节点，才可能drop（读取到）这个数据。

（2）getData()

getData方法接受一个字符串（表示数据类型）作为参数，返回事件所带的指定类型的数据（通常是用setData方法添加的数据）。如果指定类型的数据不存在，则返回空字符串。通常只有drop事件触发后，才能取出数据。如果取出另一个域名存放的数据，将会报错。

下面是一个drop事件的监听函数，用来取出指定类型的数据。

function onDrop(event){
  var data = event.dataTransfer.getData("text/plain");
  event.target.textContent = data;
  event.preventDefault();
}

上面代码取出拖拉事件的文本数据，将其替换成当前节点的文本内容。注意，这时还必须取消浏览器的默认行为，因为假如用户拖拉的是一个链接，浏览器默认会在当前窗口打开这个链接。

getData方法返回的是一个字符串，如果其中包含多项数据，就必须手动解析。

function doDrop(event){
  var lines = event.dataTransfer.getData("text/uri-list").split("\n");
  for (let line of lines) {
    let link = document.createElement("a");
    link.href = line;
    link.textContent = line;
    event.target.appendChild(link);
  }
  event.preventDefault();
}

上面代码中，getData方法返回的是一组链接，就必须自行解析。

类型值指定为URL，可以取出第一个有效链接。

var link = event.dataTransfer.getData("URL");

下面是一次性取出多种类型的数据。

function doDrop(event){
  var types = event.dataTransfer.types;
  var supportedTypes = ["text/uri-list", "text/plain"];
  types = supportedTypes.filter(function (value) types.includes(value));
  if (types.length)
    var data = event.dataTransfer.getData(types[0]);
  event.preventDefault();
}

（3）clearData()

clearData方法接受一个字符串（表示数据类型）作为参数，删除事件所带的指定类型的数据。如果没有指定类型，则删除所有数据。如果指定类型不存在，则原数据不受影响。

event.dataTransfer.clearData("text/uri-list");

上面代码清除事件所带的URL数据。

（4）setDragImage()

拖动过程中（dragstart事件触发后），浏览器会显示一张图片跟随鼠标一起移动，表示被拖动的节点。这张图片是自动创造的，通常显示为被拖动节点的外观，不需要自己动手设置。setDragImage方法可以用来自定义这张图片，它接受三个参数，第一个是img图片元素或者canvas元素，如果省略或为null则使用被拖动的节点的外观，第二个和第三个参数为鼠标相对于该图片左上角的横坐标和右坐标。

下面是一个例子。

// HTML代码为
// <div id="drag-with-image" class="dragdemo" draggable="true">
     drag me
// </div>

var div = document.getElementById("drag-with-image");
div.addEventListener("dragstart", function(e) {
  var img = document.createElement("img");
  img.src = "http://path/to/img";
  e.dataTransfer.setDragImage(img, 0, 0);
}, false);

欢迎关注技术开发分享录：http://fenxianglu.cn/

天空还下着雪

关注

0
点赞
踩
9

收藏

觉得还不错? 一键收藏
打赏
2
评论
[前端] H5 drag drop 拖动

一、介绍mousedown mouseup mousemovedragstart dragend drag (在拖动元素上执行) 首先要在此元素上设置draggable="true" 为可拖dragenter dragleave dragover (在目标元素上执行)drop 放下 (在目标元素上执行)dropzone表示可以放到哪个区域<p d...
复制链接

扫一扫