自制html5拖拽功能实现的拼图游戏

<!--代码如下，最下面给出了我测试用的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拖拽功能实现的拼图游戏,代码简单易懂,非常不错,有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助. 具体代码如下所示: drag拖拽 .box{ f ...
html5拖放详解,HTML5拖拽/拖放(drag drop)详解
H5中拖拽属性: draggable: auto | true | false 拖动事件: - dragstart 在元素开始被拖动时触发 - dragend 在拖动操作完成时触发 - drag 在元 ...
html5播放器禁止拖拽功能实例（教学内容禁止拖动观看）
html5播放器禁止拖拽功能实例(常用于场景:企业培训.在线教学内容禁止学员拖动视频进行观看) 实例1:参数开启后,视频教学内容或视频课件将不允许拖动进度条. <div id="pla ...
html5拖拽图片批量ajax无刷新进度上传
1.前端拖拽图片之前有篇文章说到HTML5的拖拽(drag.drop,详见:/post/jquery-plugin-1-jquery-drag-and-html5-draggable-api-and ...
jQuery UI 拖拽功能
原文地址:http://www.cnblogs.com/holbrook/archive/2012/03/13/2394111.html JQuery UI是JQuery官方支持的WebUI 代码库, ...
JQuery UI的拖拽功能
JQuery UI是JQuery官方支持的WebUI 代码库,包含底层交互.动画.特效等API,并且封装了一些Web小部件(Widget).同时,JQuery UI继承了jquery的插件支持,有大量 ...
html5 拖拽绘图,HTML5 拖拽实现
简介: 最早在网页中引入JavaScript拖放功能是IE4.当时,网页中只有两种对象可以拖放:图像和某些文本.拖放图像时,把鼠标放到图像上,按住鼠标不放就可以拖放它.拖放文本时,要先选中文本,然后可 ...
Vue2 _ 实现拖拽功能
老项目重构,其中有一些拖拽功能,不过用的是两个开源 JS 拖拽文件实现的效果,版本太老了,所以需要换代了,然后就查阅了能够用 Vue 来简单快速实现拖拽的功能实现方法 : 目录一.HTML 拖放二 ...
vue：实现简单的拖拽功能
背景平常做业务很容易遇到拖拽功能,没做之前总觉得会很复杂,今天来看一下到底是怎么实现的. 拖拽API 这是 HTML5 新增的 API,当给元素设置 draggable="true&quo ...

自制html5拖拽功能实现的拼图游戏

自制html5拖拽功能实现的拼图游戏相关推荐

最新文章

热门文章