HTML5拖拽功能实现的拼图游戏


Posted in HTML / CSS onJuly 31, 2018

具体代码如下所示:
 

<!--代码如下,最下面给出了我测试用的9张250*250的图片切片-->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>drag拖拽</title>
    <style>
        .box{
             float: left;
        }
        img{
            width: 150px;
            height:150px;
        }
        #puzzle{
            font-size: 0;
            margin:80px auto;
            padding: 5px;
            width: 460px;
        }
    </style>
</head>
<body>
    <div id="puzzle">
        <div class="box"><img alt="1"></div>
        <div class="box"><img alt="2"></div>
        <div class="box"><img alt="3"></div>
        <div class="box"><img alt="4"></div>
        <div class="box"><img alt="5"></div>
        <div class="box"><img alt="6"></div>
        <div class="box"><img alt="7"></div>
        <div class="box"><img alt="8"></div>
        <div class="box"><img alt="9"></div>
    </div>
    <script>
        var image = document.getElementsByTagName("img");
        var box = document.getElementsByClassName("box");
        image.draggable = true;
        var source = "";
        var nowImage;
        var nowImageBox;
        var thenImage;
        for(let i=0;i<image.length;i++){
            source = "picture"+i+".jpg";
            image[i].setAttribute("src",source);
            image[i].onmousedown = function(){
                nowImage = this;
                nowImageBox = this.parentNode;
            }
            box[i].ondragover = function(event){
             event.preventDefault(); //去除ondragover事件的默认行为,该行为默认无法将数据或者元素放置到其他元素
            }
            box[i].ondrop = function(event){
                thenImage = box[i].childNodes[0];
                box[i].appendChild(nowImage);
                nowImageBox.appendChild(thenImage);
            }
        }
    </script>
</body>
</html>

HTML5拖拽功能实现的拼图游戏HTML5拖拽功能实现的拼图游戏HTML5拖拽功能实现的拼图游戏HTML5拖拽功能实现的拼图游戏HTML5拖拽功能实现的拼图游戏HTML5拖拽功能实现的拼图游戏HTML5拖拽功能实现的拼图游戏HTML5拖拽功能实现的拼图游戏HTML5拖拽功能实现的拼图游戏

 总结

以上所述是小编给大家介绍的HTML5拖拽功能实现的拼图游戏,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

HTML / CSS 相关文章推荐
使用HTML5和CSS3表单验证功能
May 05 HTML / CSS
深入浅出CSS3 background-clip,background-origin和border-image教程
Jan 27 HTML / CSS
绝对令人的惊叹的CSS3折叠效果(3D效果)整理
Dec 30 HTML / CSS
CSS3 :not()选择器实现最后一行li去除某种css样式
Oct 19 HTML / CSS
Html5画布_动力节点Java学院整理
Jul 13 HTML / CSS
在HTML5 canvas里用卷积核进行图像处理的方法
May 02 HTML / CSS
html5记忆翻牌游戏实现思路及代码
Jul 25 HTML / CSS
使用html5 canvas 画时钟代码实例分享
Nov 11 HTML / CSS
微信端html5页面调用分享接口示例
Mar 14 HTML / CSS
canvas如何实现多张图片编辑的图片编辑器
Mar 10 HTML / CSS
AmazeUI的下载配置与Helloworld的实现
Aug 19 HTML / CSS
在CSS中映射鼠标位置并实现通过鼠标移动控制页面元素效果(实例代码)
Apr 22 HTML / CSS
Html5页面二次分享的实现
Jul 30 #HTML / CSS
利用Storage Event实现页面间通信的示例代码
Jul 26 #HTML / CSS
详解移动端Html5页面中1px边框的几种解决方法
Jul 24 #HTML / CSS
htnl5利用svg页面高斯模糊的方法
Jul 20 #HTML / CSS
html5 input输入实时检测以及延时优化
Jul 18 #HTML / CSS
利用canvas实现图片压缩的示例代码
Jul 17 #HTML / CSS
canvas 如何绘制线段的实现方法
Jul 12 #HTML / CSS
You might like
非常实用的php弹出错误警告函数扩展性强
2014/01/17 PHP
php接口和抽象类使用示例详解
2014/03/02 PHP
初识Laravel
2014/10/30 PHP
ThinkPHP无限级分类原理实现留言与回复功能实例
2014/10/31 PHP
JavaScript学习笔记记录我的旅程
2012/05/23 Javascript
js设置function参数默认值(适合没有传参情况)
2014/02/24 Javascript
了不起的node.js读书笔记之node的学习总结
2014/12/22 Javascript
JavaScript弹出新窗口后向父窗口输出内容的方法
2015/04/06 Javascript
15个值得开发人员关注的jQuery开发技巧和心得总结【经典收藏】
2016/05/25 Javascript
jQuery在ie6下无法设置select选中的解决方法详解
2016/09/20 Javascript
jquery日历插件e-calendar升级版
2016/11/10 Javascript
简单实现Vue的observer和watcher
2016/12/21 Javascript
原生JS获取元素的位置与尺寸实现方法
2017/10/18 Javascript
微信小程序实现按字母排列选择城市功能
2019/11/25 Javascript
vue3使用vue-count-to组件的实现
2020/12/25 Vue.js
详解基于element的区间选择组件校验(交易金额)
2021/01/07 Javascript
[01:07:11]Secret vs Newbee 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
PyQt5每天必学之单行文本框
2018/04/19 Python
Python列表(list)所有元素的同一操作解析
2019/08/01 Python
tensorflow模型继续训练 fineturn实例
2020/01/21 Python
python实现交并比IOU教程
2020/04/16 Python
Python ADF 单位根检验 如何查看结果的实现
2020/06/03 Python
PyCharm中配置PySide2的图文教程
2020/06/18 Python
python缩进长度是否统一
2020/08/02 Python
python能做哪些生活有趣的事情
2020/09/09 Python
Hotels.com香港酒店网:你的自由行酒店订房专家
2018/01/22 全球购物
abstract是什么意思
2012/02/12 面试题
普通员工辞职信
2014/01/17 职场文书
支教自我鉴定
2014/01/18 职场文书
团日活动总结报告
2014/06/25 职场文书
励志演讲稿300字
2014/08/21 职场文书
优秀班主任推荐材料
2014/12/17 职场文书
党员个人总结范文
2015/02/14 职场文书
六一儿童节园长致辞
2015/07/31 职场文书
python引入其他文件夹下的py文件具体方法
2021/05/23 Python
使用Python开发贪吃蛇游戏 SnakeGame
2022/04/30 Python