使用HTML5的drag&drop做一个数独游戏

Linux大全评论263 views阅读模式

数独是很好玩的游戏，之前我用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[拖动完成]

所有的事件我们知道肯定都应该给我们一个event对象，帮助我们获得一些信息或我们来设置一些信息，以上事件都可以得到一个event，如果我们的事件函数是function(e)那

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元素，并且都标记允许拖放

  1. <body>  
  2.     <div style="width: 50px; height: 50px; background-color: Red;" draggable="true">  
  3.         1  
  4.     </div>  
  5.     <div style="width: 50px; height: 50px; background-color: Yellow;" draggable="true">  
  6.         2  
  7.     </div>  
  8.     <div style="width: 50px; height: 50px; background-color: Blue;" draggable="true">  
  9.         3  
  10.     </div>  
  11.     <div style="width: 50px; height: 50px; background-color: Lime;" draggable="true">  
  12.         4  
  13.     </div>  
  14.     <div style="width: 50px; height: 50px; background-color: Maroon;" draggable="true">  
  15.         5  
  16.     </div>  
  17.     <div style="width: 50px; height: 50px; background-color: Black;" draggable="true">  
  18.         6  
  19.     </div>  
  20.     <div style="width: 50px; height: 50px; background-color: Orange;" draggable="true">  
  21.         7  
  22.     </div>  
  23.     <div style="width: 50px; height: 50px; background-color: Olive;" draggable="true">  
  24.         8  
  25.     </div>  
  26.     <div style="width: 50px; height: 50px; background-color: Teal;" draggable="true">  
  27.         9  
  28.     </div>  
  29.     <div style="width: 50px; height: 50px; background-color: Green;" draggable="true">  
  30.         10  
  31.     </div>  
  32. </body>  

现在我们想做一个应用，只有相互有倍数关系的div之间才可用拖放。

首选我们做一个用于输出调式的小工具代码

  1. $.log = function(msg) {  
  2.     console.log(msg);  
  3. }  

这个我们可以方便的$.log()输出，而不要写冗长的console.log了

第一步，编写dragStart事件函数

  1. function handleDragStart(e) {  
  2.     this.style.opacity = "0.5";  
  3.     e.dataTransfer.effectAllowed = "move";  
  4.     e.dataTransfer.setData("text/plain", this.innerHTML);  
  5.     //$.log(this.innerHTML);   
  6.     //$.log(e.target.innerHTML);   
  7.     //$.log(e.srcElement.innerHTML);   
  8.     [ ].forEach.call(document.querySelectorAll("div"),  
  9.     function(item) {  
  10.         var a = parseInt(e.target.innerHTML);  
  11.         var b = parseInt(item.innerHTML);  
  12.         if (a % b != 0 && b % a != 0) {  
  13.             item.style.opacity = "0.1";  
  14.   
  15.         }  
  16.     });  
  17. }  

以上的代码有几个要点

企鹅博客
  • 本文由 发表于 2020年7月4日 01:15:41
  • 转载请务必保留本文链接：https://www.qieseo.com/174494.html

发表评论