HTML5游戏开发(七)

时间：2022-11-17 15:27:22

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);
}

显示效果：
HTML5游戏开发(七)

五.兼容

在 ios 和安卓上，完全不兼容，需要兼容插件：
可以从以下git下载：
https://github.com/timruffles/ios-html5-drag-drop-shim

标签：

相关文章