小猿圈web前端之HTML5拖拽功能实现的拼图游戏

谁借莪１个温暖的怀抱￠ 2022-10-01 11:51 137阅读 0赞

小时候玩的拼图游戏，大家好记得吗？有没有想过自己做一个这样的游戏呢，特别一些特殊的日子，送给他（她）呢。为了实现大家的想法，小猿圈web前端讲师就讲讲利用HTML5拖拽功能实现的拼图游戏。

具体代码如下所示：

<!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>

以上就是小猿圈web前端讲师针对HTML5拖拽功能实现的拼图游戏的讲解，你有想过学习前端开发嘛，想学习前端可以到[小猿圈][Link 1]去直接观看web前端自学②群：738735873，这里面从基础到实战的所有学习资料，可以满足你提升自己，为你实现编程梦想的起点。

转载于:https://juejin.im/post/5ce270d86fb9a07ee742b1de

[Link 1]: https://link.juejin.im?target=https%3A%2F%2Fwww.apeland.cn%2F

发表评论取消回复

表情：

评论列表（有 0 条评论，137人围观）

还没有评论，来说两句吧...

相关阅读

相关前端 JavaScript -- 实现元素的拖拽功能

实现元素的拖拽功能，类似于桌面的图标，鼠标点击长按可以移动元素当鼠标松开，元素固定到鼠标松开的位置。 <style> box1{ width: 100px; hei

客官°小女子只卖身不卖艺/ 2022年10月29日 11:24/ 0 赞/ 283 阅读

相关小猿圈web前端之HTML5拖拽功能实现的拼图游戏

小时候玩的拼图游戏，大家好记得吗？有没有想过自己做一个这样的游戏呢，特别一些特殊的日子，送给他（她）呢。为了实现大家的想法，小猿圈web前端讲师就讲讲利用HTML5拖拽功能实现

谁借莪１个温暖的怀抱￠/ 2022年10月01日 11:51/ 0 赞/ 138 阅读

相关小猿圈学习web前端开发的经验分享

我们不管学习什么，必不可缺少的一定是恒心和毅力，学习web也一样，更需要不断地学习和练习，因为语言嘛，就是不断地练习才能说得更好，所以不要偷懒，偷懒一定学不会，这就是计算机语言

た入场券/ 2022年10月01日 05:45/ 0 赞/ 202 阅读

相关 html模块拖拽功能

实现html模块拖拽功能如下图 ![Center][] <%@ page contentType="text/html; charset=UTF-8"

我会带着你远行/ 2022年08月05日 05:05/ 0 赞/ 244 阅读

相关 html5实现文件的拖拽功能

HTML5拖拽的数据传输　　虽然通过dragstart、drag和dragend事件实现了原生拖拽。但是这仅仅是拖拽，在IE6和IE7中还是有些拖拽问题，并且也没有实现数

港控/mmm°/ 2022年08月01日 00:16/ 0 赞/ 276 阅读

相关 HTML5拖拽效果

drag and drop(拖拽) 拖拽元素事件 : 事件对象为被拖拽元素 dragstart : 拖拽前触发 drag :拖拽前、拖拽结束之间

末蓝、/ 2022年07月19日 12:40/ 0 赞/ 269 阅读

相关 html5的元素拖拽

html5不仅新增了很多新标签（Element，比如canvas、math、video等等），也新增了很多新属性（Attribute），本章主要来介绍一下元素拖拽所使用的一系列

Dear 丶/ 2022年06月16日 05:45/ 0 赞/ 351 阅读

相关 html5+express实现拖拽上传

html5的drag和drop drag和drop基本介绍 > drag：控件一开始拖的时候进行响应 > drop：拖拽中的控件放下的时候进行响应 >

「爱情、让人受尽委屈。」/ 2022年06月15日 05:20/ 0 赞/ 232 阅读

相关 HTML5——drag拖拽

1. 给标签元素添加属性：draggable = “true”，该元素即可被拖拽，任何元素都可以被拖拽特点：拖走的是灵魂 ![70][] 2. 事件（1）可拖拽元素

桃扇骨/ 2022年05月11日 07:28/ 0 赞/ 366 阅读

相关 JavaSwing_5.5: 拖拽功能

本文链接: [http://blog.csdn.net/xietansheng/article/details/78389272][http_blog.csdn.net_xie

快来打我*/ 2021年09月22日 09:30/ 1 赞/ 588 阅读