drag drop小游戏
2014-05-09 13:56
253 查看
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style rel="stylesheet"> .goods { width: 500px; border: 1px solid red; padding: 30px; height: 150px;; } .good { float: left;; margin: 10px 20px;; width: 100px; height: 100px;; } #one { background: green; } #two { background: black; color: #ffffff; } #three { background: pink; } .destination { width: 600px;; height: 500px; border: 1px solid deepskyblue; } </style> </head> <body> 默认顺序 1 2 3 <div class="goods"> 物品容器 <div class="good" id="temp" data-type="one"> </div> <div class="good" id="" data-type="two">2</div> </div> 仓库 <div class="destination"> </div> <script type="text/javascript"> //容器类 function Container(obj) { this.goods = document.querySelectorAll(obj.goods) || []; this.rule = obj.rule || []; this.relSort = []; this.container = document.querySelector(obj.container) || document.body; this.ondrag = obj.ondrag || null; this.addEvent(this.goods); this.count = this.goods.length; this.success = obj.success || null; this.failed = obj.failed || null; } Container.prototype.compare = function (arr1, arr2) { var result = true; arr1.forEach(function (item, index) { if (item != arr2[index]) { result = false; } }) return result; } Container.prototype.addEvent = function (goods) { var me = this; Array.prototype.forEach.call(goods, function (item) { item.setAttribute('draggable', true); item.ondragstart = function (e) { if (me.ondrag) { e.dataTransfer.setData("id", e.target.id); me.ondrag.call(me, e); } } }); this.container.ondrop = function (e) { e.preventDefault(); var source = e.dataTransfer.getData("id"); e.target.appendChild(document.querySelector('#' + source)); me.relSort.push(source); if (me.relSort.length == me.count) { if (me.compare(me.rule, me.relSort)) { me.success && me.success.call(me); } else { me.failed && me.failed.call(me); } } } this.container.ondragover = function (e) { e.preventDefault(); } } var a = new Container({ goods: '.good',//需呀拖动物体的选择器 rule: ['one', 'two', 'three'], //正确的顺序 container: '.destination',// 载体选择器 ondrag: function (e) { //开始拖动事件 }, success: function () {//如果游戏成功 回调函数 alert('你赢了'); }, failed: function () {//如果游戏失败 回调函数 alert('游戏失败'); } }); </script> </body> </html>
相关文章推荐
- 基于html5拖(drag)放(drop)实现换装小游戏
- Jquery Drag and Drop
- Ext JS 6.5.3 Official Documents — Drag and Drop
- flex day 5 air的drag和drop
- NGUI官网示例11 –Drag ; Drop(图标与物体拖拽放置)(一)
- HTML5高阶实例之Drag&Drop
- HTML5 拖放(Drag 和 Drop)功能开发——基础实战
- [Javascript + rxjs] Simple drag and drop with Observables
- Html5 drag and drop
- 浅谈VCL中DragDrop功能的底层实现
- fill out fields in a TWebBrowser by Drag&Drop?
- Web开发中的Drag&Drop完全手册
- 简单Drag and Drop事件实现
- 文件拖动Drag &amp;amp; Drop 全解析
- 学习drag and drop js实现代码经典之作
- TreeView节点拖放/DragDrop的实现实例(C#)
- SWT 应用程序 实现的Drag and Drop(DND) 和 GEF 树上元素的拖拽
- DragDrop
- Silverlight & Blend动画设计系列八:拖放(Drag-Drop)操作与拖放行为(DragBehavior)
- jstree详解(解决jstree树的sort和move_node和drop drag一起使用时不能排序的问题)(附源码)