您的位置：首页 > Web前端 > HTML5

HTML5游戏开发(七)

2018-01-13 09:26 155 查看

HTML5游戏开发(七)

一.HTML5拖放

拖放（Drag 和 drop）是HTML5标准的组成部分。拖放是一种常见的特性，即抓取对象以后拖到另一个位置。在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。

HTML5为所有HTML元素规定了一个draggable属性，表示元素是否可以拖动。图像和链接的draggable属性自动被设置成了true，而其它元素这个属性的默认值都是false。

二.拖放事件

在拖放的过程中会触发以下事件：

(1).在拖动目标上触发事件 (源元素):

ondragstart - 用户开始拖动元素时触发

ondrag - 元素正在拖动时触发

ondragend - 用户完成元素拖动后触发

(2).释放目标时触发的事件::

ondragenter - 当被鼠标拖动的对象进入其容器范围内时触发此事件

ondragover - 当某被拖动的对象在另一对象容器范围内拖动时触发此事件

ondragleave - 当被鼠标拖动的对象离开其容器范围内时触发此事件

ondrop - 在一个拖动过程中，释放鼠标键时触发此事件

三.dataTransfer对象

在拖曳操作的过程中，我们可以用过dataTransfer对象来传输数据，以便在拖曳操作结束的时候对数据进行其他的操作。

(1).对象属性

dropEffect:设置或返回拖放目标上允许发生的拖放行为。如果此处设置的拖放行为不再effectAllowed属性设置的多种拖放行为之内，拖放操作将会失败。该属性值只允许为“null”、“copy”、“link”和“move”四值之一。

effectAllowed：设置或返回被拖动元素允许发生的拖动行为。该属性值可设为“none”、“copy”、“copyLink”、“copyMove”、“link”、“linkMove”、“move”、“all”和“uninitialized”。

默认情况下，图像、链接和文本是可以拖动的，也就是说，不用额外编写代码，用户就可以拖动它们。文本只有在被选中的情况下才能拖动，而图像和链接在任何时候都可以拖动。

items:该属性返回DataTransferItems对象，该对象代表了拖动数据。

types:该属性返回一个DOMStringList对象，该对象包括了存入dataTransfer中数据的所有类型。

(2).对象方法

setData(format,data):将指定格式的数据赋值给dataTransfer对象，参数format定义数据的格式也就是数据的类型，data为待赋值的数据。

该方法向dataTransfer对象中存入数据。接收两个参数，第一个表示要存入数据种类的字符串，现在支持有以下几种：

text/plain：文本文字。

text/html：HTML文字。

text/xml：XML文字。

text/uri-list：URL列表，每个URL为一行。

第二个参数为要存入的数据。

getData(format):从dataTransfer对象中获取指定格式的数据，format代表数据格式，data为数据。

clearData([format]):从dataTransfer对象中删除指定格式的数据，参数可选，若不给出，则为删除对象中所有的数据。

addElement(element):添加自定义图标

setDragImage(element,x,y):设置拖放操作的自定义图标。其中element设置自定义图标，x设置图标与鼠标在水平方向上的距离，y设置图标与鼠标在垂直方向上的距离。

四.示例代码

<!DOCTYPE html>
<html>
<head>
<title>HTML5拖拽</title>
<meta charset="utf-8">
<style>
#target {
/*position: absolute;*/
width: 350px;
height: 70px;
padding: 10px;
border: 1px solid #aaaaaa;
}

#source {
position: absolute;
width: 120px;
height: 20px;
background-color: #49868C;
}
</style>
</head>

<body>
<p>将按源对象放入容器中</p>
<div id="target">目标对象</div>
<br>
<div id="source">源对象</div>
<script type="text/javascript" src="js/drag.js"></script>
</body>
</html>

JS脚本

var source = document.querySelector('#source'),
target = document.querySelector("#target");
//添加按钮的可拖放属性
source.draggable = true;
target.draggable = true;
//----------------------源对象事件
//开始开始拖动
source.addEventListener('dragstart', function(ev) {

//设置数据参数：key,value
ev.dataTransfer.setData("aa",ev.target.id);
console.log('源对象开始被拖动');
}, false)
//拖动中
source.addEventListener('drag', function(ev) {
console.log('源对象拖动中');
});
source.addEventListener('dragend', function(ev) {
console.log('源对拖动结束');
});

//---------------------目标对象
//源对象在目标对象中拖动
target.addEventListener('dragover', function(ev) {
console.log("源对象移动" + ev.x, +ev.y);
ev.preventDefault();
});
//放置事件
target.addEventListener('drop', function(ev) {

//获 取数据
var data = ev.dataTransfer.getData("aa");
if(data) {
//追加到子对象中
ev.target.appendChild(document.getElementById(data));
}
//阻止默认行为
ev.preventDefault();
console.log('已放入源对象');
}, false);
//源对象进入
target.addEventListener('dragenter', function(ev) {
this.style.backgroundColor = "green";
console.log("源对象进入");
ev.preventDefault();
});

//源对象离开目标对象
target.addEventListener('dragover', function(ev) {
console.log("源对象离开");
ev.preventDefault();
});

//--------------------------父级目标对象
//文档容器对象
document.ondragover = function(ev) {
console.log("顶级父容器" + ev.x + ":" + ev.y)
ev.preventDefault();
}

document.ondrop = dropObjHandler;

function dropObjHandler(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("aa");
//克隆节点
var item = document.getElementById(data).cloneNode();
//获取事件目标对象
ev.target.appendChild(document.getElementById(data));
//ev.target.appendChild(item);
}

显示效果：

五.兼容

在 ios 和安卓上，完全不兼容，需要兼容插件：

可以从以下git下载：

https://github.com/timruffles/ios-html5-drag-drop-shim

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航