HTML5 拖放（Drag 和 Drop）详解与案例编码_怎么创建网页_网站建设企业_h5建站_如何建一个网站

简介

拖放是1种普遍的特点，即抓取目标之后拖到另外一个部位。

在 HTML5 中，拖放是规范的1一部分，任何元素都可以拖放。

先点一下1个小事例：在客户刚开始拖拽 <p> 元素时实行 JavaScript

<p draggable="true" ondragstart="myFunction(event)">拖拽我!</p>

提醒：连接和照片默认设置是可拖拽的，不必须 draggable 特性。

界定和用法

在拖放的全过程中会开启下列恶性事件：

在拖拽总体目标上开启恶性事件 (源元素): ondragstart - 客户刚开始拖拽元素时开启
- ondrag - 元素正在拖拽时开启
- ondragend - 客户进行元素拖拽后开启
释放出来总体目标时开启的恶性事件: ondragenter - 当被电脑鼠标拖拽的目标进到其器皿范畴内时开启此恶性事件
- ondragover - 当某被拖拽的目标在另外一目标器皿范畴内拖拽时开启此恶性事件
- ondragleave - 当被电脑鼠标拖拽的目标离去其器皿范畴内时开启此恶性事件
- ondrop - 在1个拖拽全过程中，释放出来电脑鼠标键时开启此恶性事件

访问器适用

Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 适用拖拽。

留意:Safari 5.1.2不适用拖拽；在拖拽元素时，每隔 350 毫秒会开启 ondragover 恶性事件。

案例

先贴编码，再逐1解释：

<!DOCTYPE html>
<html>
<head>
<title>HTML5拖拽</title>
<meta charset="utf⑻">
<style>
#div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
</style>
</head>
<body>
<p>拖拽img_w3slogo.gif照片到矩形框框中:</p>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="drag1" src="images/img_w3slogo.gif" draggable="true" ondragstart="drag(event)" width="300" height="56">

<script>
function allowDrop(ev){
    ev.preventDefault();
}

function drag(ev){
    ev.dataTransfer.setData("Text",ev.target.id);
}

function drop(ev){
    ev.preventDefault();
    var data=ev.dataTransfer.getData("Text");
    ev.target.appendChild(document.getElementById(data));
}

</script>
</body>
</html>

拖拽前的网页页面实际效果为：

下面各自来分析下上面编码的意思。

设定元素可拖放

最先，以便使元素可拖拽，把 draggable 特性设定为 true ：

<img draggable="true">

拖拽甚么 - ondragstart 和 setData()

随后，要求当元素被拖拽时，会产生甚么。

在上面的事例中，ondragstart 特性启用了1个涵数，drag(event)，它要求了被拖拽的数据信息。

dataTransfer.setData() 方式设定被拖数据信息的数据信息种类和值：

function drag(ev)
{
    ev.dataTransfer.setData("Text",ev.target.id);
}

在这个事例中，数据信息种类是 "Text"，值是可拖拽元素的 id ("drag1")。

放到何处 - ondragover

ondragover 恶性事件要求在何处置放被拖拽的数据信息。

默认设置地，没法将数据信息/元素置放到别的元素中。假如必须设定容许置放，大家务必阻拦对元素的默认设置解决方法。

这要根据启用 ondragover 恶性事件的 event.preventDefault() 方式：

event.preventDefault()

开展置放 - ondrop

当置放被拖数据信息时，会产生 drop 恶性事件。

在上面的事例中，ondrop 特性启用了1个涵数，drop(event)：

function drop(ev)
{
    ev.preventDefault();
    var data=ev.dataTransfer.getData("Text");
    ev.target.appendChild(document.getElementById(data));
}

编码解释：

启用 preventDefault() 来防止访问器对数据信息的默认设置解决（drop 恶性事件的默认设置个人行为是以连接方式开启）
根据 dataTransfer.getData("Text") 方式得到被拖的数据信息。该方式将回到在 setData() 方式中设定为同样种类的任何数据信息。
被拖数据信息是被拖元素的 id ("drag1")
把被拖元素追加到置放元素（总体目标元素）中

完成的結果如图：

dataTransfer目标

在拖曳实际操作的全过程中，大家能够用过dataTransfer目标来传送数据信息，便于在拖曳实际操作完毕的情况下对数据信息开展别的的实际操作。

目标特性：

dropEffect:设定或回到拖放总体目标上容许产生的拖放个人行为。假如此处设定的拖放个人行为已不effectAllowed特性设定的多种多样拖放个人行为以内，拖放实际操作可能不成功。该特性值只容许为“null”、“copy”、“link”和“move”4值之1。
effectAllowed:设定或回到被拖拽元素容许产生的拖拽个人行为。该特性值可设为“none”、“copy”、“copyLink”、“copyMove”、“link”、“linkMove”、“move”、“all”和“uninitialized”。
items:该特性回到DataTransferItems目标，该目标意味着了拖拽数据信息。
types:该特性回到1个DOMStringList目标，该目标包含了存入dataTransfer中数据信息的全部种类。

目标方式：

setData(format,data):将特定文件格式的数据信息取值给dataTransfer目标，主要参数format界定数据信息的文件格式也便是数据信息的种类，data为待取值的数据信息
getData(format):从dataTransfer目标中获得特定文件格式的数据信息，format意味着数据信息文件格式，data为数据信息。
clearData([format]):从dataTransfer目标中删掉特定文件格式的数据信息，主要参数可选，若不得出，则为删掉目标中全部的数据信息。
addElement(element):加上自定标志
setDragImage(element,x,y):设定拖放实际操作的自定标志。在其中element设定自定标志，x设定标志与电脑鼠标在水平方位上的间距，y设定标志与电脑鼠标在竖直方位上的间距。

Identify what is draggable

function dragstart_handler(ev) {
 console.log("dragStart");
 // Add the target element's id to the data transfer object
 ev.dataTransfer.setData("text/plain", ev.target.id);
}

<body>
 <p id="p1" draggable="true" ondragstart="dragstart_handler(event);">This element is draggable.</p>
</body>

Define the drag's data

function dragstart_handler(ev) {
  // Add the drag data
  ev.dataTransfer.setData("text/plain", ev.target.id);
  ev.dataTransfer.setData("text/html", "<p>Example paragraph</p>");
  ev.dataTransfer.setData("text/uri-list", "http://developer.mozilla.org");
}

Define the drag image

function dragstart_handler(ev) {
  // Create an image and then use it for the drag image.
  // NOTE: change "example.gif" to an existing image or the image 
  // will not be created and the default drag image will be used.
  var img = new Image(); 
  img.src = 'example.gif'; 
  ev.dataTransfer.setDragImage(img, 10, 10);
}

Define the drag effect

function dragstart_handler(ev) {
  // Set the drag effect to copy
  ev.dataTransfer.dropEffect = "copy";
}

Define a drop zone

function dragover_handler(ev) {
 ev.preventDefault();
 // Set the dropEffect to move
 ev.dataTransfer.dropEffect = "move"
}
function drop_handler(ev) {
 ev.preventDefault();
 // Get the id of the target and add the moved element to the target's DOM
 var data = ev.dataTransfer.getData("text");
 ev.target.appendChild(document.getElementById(data));
}
<body>
 <div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">Drop Zone</div>
</body>

火狐访问器拖拽难题

可是开展到这儿在火狐访问器中发现1个难题：

html5的拖拽，用了preventDefault避免弹出新网页页面，但在火狐下无论用？

处理方法：

document.body.ondrop = function (event) {
    event.preventDefault();
    event.stopPropagation();
}

或针对上面的案例中，加上到ondrop方式里边也是能够的：

function drop(ev){
    ev.preventDefault();
    ev.stopPropagation();
    var data=ev.dataTransfer.getData("Text");
    ev.target.appendChild(document.getElementById(data));
}

以上便是本文的所有內容，期待对大伙儿的学习培训有一定的协助，也期待大伙儿多多适用脚本制作之家。

技术知识

HTML5 拖放（Drag 和 Drop）详解与案例编码

新闻资讯

在线客服