使用HTML5的drag&drop做一个数独游戏
数独是很好玩的游戏，之前我用jQuery做了一个数独游戏，因为用javaScript来实现drag和drap非常麻烦，jQuery的UI提供了一套非常不错的drag和drap（以后就简称DnD算了），方便我们开发。现在HTML5支持原生的DnD了，那我们来学习下，并且将原先的数独游戏迁移到HTML5的DnD应用来。
先简单的了解下HTML5的DnD事件模型，事件发生在源元素（被拖动的元素）和目标元素（被进入的元素）上，为了简单的描述，我们将源元素称为src，目标元素叫des。
| drag：src[拖动中] | dragstart：src[开始拖动] |
| dragenter：des[进入目标] | |
| dragover：des[在目标移动] | |
| dragleave：des[离开目标] | |
| drop：des[释放拖动] | |
| dragend：src[拖动完成] |
e.dataTransfer.effectAllowed，只能在dragstart事件设置，值为以下之一："none", "copy", "copyLink", "copyMove", "link", "linkMove", "move", "all", and "uninitialized"
e.dataTransfer.dropEffect，返回拖来的行为，对应上面的effectAllowed，值是："none", "copy", "link", and "move"
e.target，可以得到当前事件的dom对象，比如你可以得到e.target.innerHTML，或者设置e.target.classList.add，或者e.target.classList.remove
e.dataTransfer.setData(foramt,value)，为拖动赋值，foramt的值是为了描述值的类型，一般有text/plain 和 text/uri-list
e.dataTransfer.getData(foramt)，获取被拖来的元素通过setData存储的值
e.stopPropagation，阻止事件冒泡，这样可以防止子元素的拖动处理被带到父元素事件中（触发父元素事件），在IE中可以用e.cancelBubble = true
e.preventDefault，阻止默认事件发生，也可以简单的写return false，在IE中可以用e.returnValue = false
有了上面的基本概念，我们先做一个小小的模型，来测试几个技术要点：监视拖放事件，改变元素在拖放中的样式，传递值和检查值什么的
在body里面，我们声明了10个div元素，并且都标记允许拖放
- <body>
- <div style="width: 50px; height: 50px; background-color: Red;" draggable="true">
- 1
- </div>
- <div style="width: 50px; height: 50px; background-color: Yellow;" draggable="true">
- 2
- </div>
- <div style="width: 50px; height: 50px; background-color: Blue;" draggable="true">
- 3
- </div>
- <div style="width: 50px; height: 50px; background-color: Lime;" draggable="true">
- 4
- </div>
- <div style="width: 50px; height: 50px; background-color: Maroon;" draggable="true">
- 5
- </div>
- <div style="width: 50px; height: 50px; background-color: Black;" draggable="true">
- 6
- </div>
- <div style="width: 50px; height: 50px; background-color: Orange;" draggable="true">
- 7
- </div>
- <div style="width: 50px; height: 50px; background-color: Olive;" draggable="true">
- 8
- </div>
- <div style="width: 50px; height: 50px; background-color: Teal;" draggable="true">
- 9
- </div>
- <div style="width: 50px; height: 50px; background-color: Green;" draggable="true">
- 10
- </div>
- </body>
首选我们做一个用于输出调式的小工具代码
- $.log = function(msg) {
- console.log(msg);
- }
第一步，编写dragStart事件函数
- function handleDragStart(e) {
- this.style.opacity = "0.5";
- e.dataTransfer.effectAllowed = "move";
- e.dataTransfer.setData("text/plain", this.innerHTML);
- //$.log(this.innerHTML);
- //$.log(e.target.innerHTML);
- //$.log(e.srcElement.innerHTML);
- [ ].forEach.call(document.querySelectorAll("div"),
- function(item) {
- var a = parseInt(e.target.innerHTML);
- var b = parseInt(item.innerHTML);
- if (a % b != 0 && b % a != 0) {
- item.style.opacity = "0.1";
- }
- });
- }
1 对事件来讲this、e.target和e.srcElement都是同一对象
2 在forEach中，this是指item，所以forEach中，我们要用e.target来引用
相关推荐
表格的现在还是较为常用的一种标签，但不是用来布局，常见处理、显示表格式数据。在HTML网页中，要想创建表格，就需要使用表格相关的标签。<table> <tr> <td>单元格内的文字</td> ...