HTML5 拖放(Drag 和 Drop)详解与案例编码

日期:2021-01-19 类型:科技新闻 

关键词:小游戏源代码,互动小游戏微信,自制小游戏,html5游戏,制作游戏大概多少钱

简介

拖放是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));
}

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