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设置图标与鼠标在垂直方向上的距离。
四.示例代码
<html>
<head>
<title>HTML5拖拽title>
<meta charset="utf-8">
<style> #target { 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) {
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));
}
显示效果：
五.兼容
在 ios 和安卓上，完全不兼容，需要兼容插件：
可以从以下git下载：
https://github.com/timruffles/ios-html5-drag-drop-shim
京公网安备 11010802041100号