阿里云爆款
首页 » HTML5 » HTML5游戏开发(七)

HTML5游戏开发(七)

原文 http://blog.csdn.net/MARQUIS888/article/details/79049476

2018-01-14 02:00:09阅读(377)

阿里云爆款
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

最新发布

CentOS专题

关于本站

5ibc.net旗下博客站精品博文小部分原创、大部分从互联网收集整理。尊重作者版权、传播精品博文,让更多编程爱好者知晓!

小提示

按 Ctrl+D 键,
把本文加入收藏夹