`
bcyy
  • 浏览: 1885816 次
文章分类
社区版块
存档分类
最新评论

使用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[拖动完成]
所有的事件我们知道肯定都应该给我们一个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. <divstyle="width:50px;height:50px;background-color:Red;"draggable="true">
  3. 1
  4. </div>
  5. <divstyle="width:50px;height:50px;background-color:Yellow;"draggable="true">
  6. 2
  7. </div>
  8. <divstyle="width:50px;height:50px;background-color:Blue;"draggable="true">
  9. 3
  10. </div>
  11. <divstyle="width:50px;height:50px;background-color:Lime;"draggable="true">
  12. 4
  13. </div>
  14. <divstyle="width:50px;height:50px;background-color:Maroon;"draggable="true">
  15. 5
  16. </div>
  17. <divstyle="width:50px;height:50px;background-color:Black;"draggable="true">
  18. 6
  19. </div>
  20. <divstyle="width:50px;height:50px;background-color:Orange;"draggable="true">
  21. 7
  22. </div>
  23. <divstyle="width:50px;height:50px;background-color:Olive;"draggable="true">
  24. 8
  25. </div>
  26. <divstyle="width:50px;height:50px;background-color:Teal;"draggable="true">
  27. 9
  28. </div>
  29. <divstyle="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. functionhandleDragStart(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. vara=parseInt(e.target.innerHTML);
  11. varb=parseInt(item.innerHTML);
  12. if(a%b!=0&&b%a!=0){
  13. item.style.opacity="0.1";
  15. }
  16. });
  17. }
以上的代码有几个要点

1 对事件来讲this、e.target和e.srcElement都是同一对象

2 在forEach中，this是指item，所以forEach中，我们要用e.target来引用



但是一测试我们就发现虽然元素可以拖拉，但并没有事件激活，那是应为我们没有为元素绑定事件，所以现在我们用addEventListener来将元素和事件绑定

  1. $(
  2. function(){
  3. [].forEach.call(document.querySelectorAll("div"),
  4. function(item){
  5. item.addEventListener("dragstart",handleDragStart,false);
  6. }
  7. );
  8. }
  9. );
现在我们可以看到，当任意元素拖动的时候，不和其元素有相互倍数的元素变了很淡了。

第二步，当我们拖放完成后，所有div恢复原先颜色，那自然是编写handleDragEnd

  1. functionhandleDragEnd(e){
  2. if(e.preventDefault){
  3. e.preventDefault();//不要执行与事件关联的默认动作
  4. }
  5. [].forEach.call(document.querySelectorAll("div"),
  6. function(item){
  7. item.style.opacity="1";
  8. }
  9. );
  10. }
记得将上面的事件做绑定哦，应该类似以下代码
  1. $(
  2. function(){
  3. [].forEach.call(document.querySelectorAll("div"),
  4. function(item){
  5. item.addEventListener("dragstart",handleDragStart,false);
  6. item.addEventListener("dragend",handleDragEnd,false);
  7. }
  8. );
  9. }
  10. );
第三步，我们要通知那些互为倍数的元素允许我们做拖入操作

我们先需要为目标元素定义些事件函数

  1. functionhandleDragEnter(e){
  2. $.log(e);
  3. }
  5. functionhandleDragOver(e){
  6. if(e.preventDefault){
  7. e.preventDefault();//不要执行与事件关联的默认动作
  8. }
  9. if(e.stopPropagation){
  10. e.stopPropagation();//停止事件的传播
  11. }
  12. $.log(e);
  13. returnfalse;
  14. }
  17. functionhandleDragLeave(e){
  18. $.log(e);
  19. }
  21. functionhandleDrop(e){
  22. if(e.preventDefault){
  23. e.preventDefault();//不要执行与事件关联的默认动作
  24. }
  25. if(e.stopPropagation){
  26. e.stopPropagation();//停止事件的传播
  27. }
  28. console.log(e);
  29. returnfalse;
  30. }

注意我们使用了preventDefault和stopPropagation消除了浏览器默认的一些动作。

显然这些事件不是所有的元素都有的，只有互为倍数才有，所以我们要去修改handleDragStart函数了

修改后的代码大致如下

  1. functionhandleDragStart(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. //$.log(this.innerHTML);
  9. [].forEach.call(document.querySelectorAll("div"),
  10. function(item){
  11. vara=parseInt(e.target.innerHTML);
  12. varb=parseInt(item.innerHTML);
  13. if(a%b!=0&&b%a!=0){
  14. item.style.opacity="0.1";
  15. }
  16. else{
  17. item.addEventListener("dragover",handleDragOver,false);
  18. item.addEventListener("dragenter",handleDragEnter,false);
  19. item.addEventListener("dragleave",handleDragLeave,false);
  20. item.addEventListener("drop",handleDrop,false);
  21. }
  22. });
  23. }
现在你可以发现，当我们拖动互为倍数的元素是，视觉效果明显是允许拖入，否则就不允许了。当然记得在handleDragEnd函数中要恢复哦
  1. functionhandleDragEnd(e){
  2. if(e.preventDefault){
  3. e.preventDefault();//不要执行与事件关联的默认动作
  4. }
  5. [].forEach.call(document.querySelectorAll("div"),
  6. function(item){
  7. item.style.opacity="1";
  8. item.removeEventListener("dragover",handleDragOver,false);
  9. item.removeEventListener("dragenter",handleDragEnter,false);
  10. item.removeEventListener("dragleave",handleDragLeave,false);
  11. item.removeEventListener("drop",handleDrop,false);
  12. }
  13. );
  14. }
第四步，当我们在可以放置的元素上结束拖放后，我们希望两个元素的值累计，并出现在被放置的元素里面，我们需要修改handleDrop函数
  1. functionhandleDrop(e){
  2. if(e.preventDefault){
  3. e.preventDefault();//不要执行与事件关联的默认动作
  4. }
  5. if(e.stopPropagation){
  6. e.stopPropagation();//停止事件的传播
  7. }
  8. this.innerHTML=parseInt(this.innerHTML)+parseInt(e.dataTransfer.getData("text/plain"))
  9. console.log(e);
  10. returnfalse;
  11. }
好了，到现在为止，准备知识都差不多了，而且作品我们也可以得意的玩玩，你可以发现div被累计都，再次拖拉的时候，是重新计算相互的倍数的，对不？

最后，我感觉黑色的字不好看，我们修改下初始化的函数

  1. $(
  2. function(){
  3. [].forEach.call(document.querySelectorAll("div"),
  4. function(item){
  5. item.addEventListener("dragstart",handleDragStart,false);
  6. item.addEventListener("dragend",handleDragEnd,false);
  7. item.style.color="White";
  8. }
  9. );
  10. }
  11. );


好了，现在这个无聊的拖动作品，至少可以打发下你的时间，对不，欣赏下自己的作品吧，接下来，我们开始做正式做数独游戏了。

第一步，我们先生成一个1-9的数字对象矩形，这个矩形可以拖动。

先设计htmltag

  1. <olid="numberBox"style="list-style-type:none;width:90px;height:90px;">
  2. </ol>
然后准备些样式
  1. #numberBox>li
  2. {
  3. width:30px;
  4. height:25px;
  5. text-align:center;
  6. font-size:20px;
  7. padding-top:5px;
  8. float:left;
  9. color:White;
  10. }
最后是脚本
  1. $(
  2. function(){
  3. [{number:1,bgcolor:"#C71585"},{number:2,bgcolor:"#800080"},{number:3,bgcolor:"#B8860B"},
  4. {number:4,bgcolor:"rgb(0,0,128)"},{number:5,bgcolor:"rgb(30,144,255)"},
  5. {number:6,bgcolor:"rgb(255,165,0)"},
  6. {number:7,bgcolor:"hsl(0,75%,50%)"},{number:8,bgcolor:"hsl(30,50%,50%)"},
  7. {number:9,bgcolor:"hsl(120,75%,38%)"}].forEach(
  8. function(key,index){
  9. $.log(key);
  10. varli=$("<li>").html(key.number).css("backgroundColor",key.bgcolor).attr("draggable","true");
  11. $.log(li);
  12. li[0].addEventListener("dragstart",function(){
  13. },false);
  14. $("#numberBox").append(li);
  15. }
  16. );
  17. }
  18. );

好，然后你运行下页面，可以看到一个九宫格，并且每一个格子都可以拖动。


第二步，我们要类似的创建我们填数字得的区域了。

首先还是htmlTag

  1. <olid="player"style="list-style-type:none;width:450px;height:450px;">
  2. </ol>
然后是样式设定
  1. #player.default
  2. {
  3. float:left;
  4. width:48px;
  5. height:33px;
  6. border:solid1pxrgb(0,0,0);
  7. font-size:20px;
  8. padding-top:15px;
  9. text-align:center;
  10. background-color:#B8860B;
  11. }
  12. #player.fix
  13. {
  14. float:left;
  15. width:48px;
  16. height:33px;
  17. border:solid1pxrgb(0,0,0);
  18. font-size:20px;
  19. padding-top:15px;
  20. text-align:center;
  21. background-color:#FFFABC;
  22. }
  23. #player.ation
  24. {
  25. float:left;
  26. width:48px;
  27. height:33px;
  28. border:solid1pxrgb(0,0,0);
  29. font-size:20px;
  30. padding-top:15px;
  31. text-align:center;
  32. background-color:#FFA07A;
  33. }
然后初始化这个区域。数独填字区域有的格子有值有的没有值，我用0表示没有值将来你可以填制，非0表示是固定区不可以改
  1. $(
  2. function(){
  3. "500000300090500400004000700051037289302080604008052137035000900609000823080023006".split("").forEach(
  4. function(item,index){
  5. $.log(item);
  6. varli=$("<li>")
  7. if(item!="0"){
  8. li.addClass("fix");
  9. li[0].innerHTML=item;
  10. }
  11. else{
  12. li[0].classList.add("default");
  13. li[0].addEventListener("dragenter",
  14. function(e){
  15. $.log(e);
  16. },false);
  18. li[0].addEventListener("dragover",
  19. function(e){
  20. if(e.preventDefault){
  21. e.preventDefault();//不要执行与事件关联的默认动作
  22. }
  23. if(e.stopPropagation){
  24. e.stopPropagation();//停止事件的传播
  25. }
  26. $.log(e);
  27. returnfalse;
  28. },false);
  30. li[0].addEventListener("dragleave",
  31. function(e){
  32. },false);
  34. li[0].addEventListener("drop",
  35. function(e){
  36. if(e.preventDefault){
  37. e.preventDefault();//不要执行与事件关联的默认动作
  38. }
  39. if(e.stopPropagation){
  40. e.stopPropagation();//停止事件的传播
  41. }
  43. },false);
  44. }
  45. $("#player").append(li);
  46. }
  47. );
  48. }
  49. );
现在你已经可以在页面上看到一个非常威武的“独”字了！


第三步：我们拖动数字之后，希望可以填数字的区域有明显的颜色变化并给出提示，同时固定区域不可以拖进去，其他区域可以拖进去，并且拖动的时候要send值。

有了前面的知识，我们马上知道去哪里改事件控制了：dragstart事件

  1. $(
  2. function(){
  3. [{number:1,bgcolor:"#C71585"},{number:2,bgcolor:"#800080"},{number:3,bgcolor:"#B8860B"},
  4. {number:4,bgcolor:"rgb(0,0,128)"},{number:5,bgcolor:"rgb(30,144,255)"},
  5. {number:6,bgcolor:"rgb(255,165,0)"},
  6. {number:7,bgcolor:"hsl(0,75%,50%)"},{number:8,bgcolor:"hsl(30,50%,50%)"},
  7. {number:9,bgcolor:"hsl(120,75%,38%)"}].forEach(
  8. function(key,index){
  9. //$.log(key);
  10. varli=$("<li>").html(key.number).css("backgroundColor",key.bgcolor).attr("draggable","true");
  11. //$.log(li);
  12. li[0].addEventListener("dragstart",function(e){
  13. e.dataTransfer.effectAllowed="copyMove";
  14. e.dataTransfer.setData("text/plain",this.innerHTML);
  15. $.log(this.innerHTML);
  16. [].forEach.call(document.querySelectorAll("#player.default"),
  17. function(item){
  18. //$.log(item);
  19. item.classList.remove("default");
  20. item.classList.add("ation");
  21. });
  22. },false);
  24. li[0].addEventListener("dragend",function(){
  25. [].forEach.call(document.querySelectorAll("#player.ation"),
  26. function(item){
  27. item.classList.remove("ation");
  28. item.classList.add("default");
  29. });
  30. },false);
  32. $("#numberBox").append(li);
  33. }
  34. );
  35. }
  36. );
现在你可以测试下了，当你拖动数字的时候，有明显的颜色改变，并且不同的区域你的鼠标样式也不同哦。

第四步，我们接受值，并且判断这个值是否存在行列冲突，如果冲突就提示，否则改写

  1. $(
  2. function(){
  3. "500000300090500400004000700051037289302080604008052137035000900609000823080023006".split("").forEach(
  4. function(item,index){
  5. $.log(item);
  6. varli=$("<li>")
  7. if(item!="0"){
  8. li.addClass("fix");
  9. li[0].innerHTML=item;
  10. }
  11. else{
  12. li[0].classList.add("default");
  13. li[0].addEventListener("dragenter",
  14. function(e){
  15. $.log(e);
  16. },false);
  18. li[0].addEventListener("dragover",
  19. function(e){
  20. if(e.preventDefault){
  21. e.preventDefault();//不要执行与事件关联的默认动作
  22. }
  23. if(e.stopPropagation){
  24. e.stopPropagation();//停止事件的传播
  25. }
  26. $.log(e);
  27. returnfalse;
  28. },false);
  30. li[0].addEventListener("dragleave",
  31. function(e){
  32. },false);
  34. li[0].addEventListener("drop",
  35. function(e){
  36. if(e.preventDefault){
  37. e.preventDefault();//不要执行与事件关联的默认动作
  38. }
  39. if(e.stopPropagation){
  40. e.stopPropagation();//停止事件的传播
  41. }
  43. varsendData=e.dataTransfer.getData("text/plain");
  44. //获得#player>li矩阵数组
  45. varmatrix=Array.prototype.slice.call(document.querySelectorAll("#player>li"));
  46. varcurrIndex=matrix.indexOf(this);//获得当前元素的位置
  47. varrowIndex=currIndex-currIndex%9;//行开始的位置
  48. varcolIndex=currIndex%9//列开始的位置
  49. for(vari=rowIndex;i<rowIndex+9;i++){
  50. if(i!=currIndex&&matrix[i].innerHTML==sendData){
  51. alert("对不起行上有数据重复，请小心哦！亲");
  52. return;
  53. }
  54. }
  55. for(vari=colIndex;i<81;i=i+9){
  56. if(i!=currIndex&&matrix[i].innerHTML==sendData){
  57. alert("对不起列上有数据重复，请小心哦！亲");
  58. return;
  59. }
  60. }
  61. this.innerHTML=sendData;
  63. },false);
  64. }
  65. $("#player").append(li);
  66. }
  67. );
  68. }
  69. );


现在你可以开始玩啦，虽然颜色不怎么好看，但至少可以玩，对不，我们第一个html5的实用游戏。我后期的blog打算再做些类似新浪微博的“你画我猜”还有“接龙游戏”。

下面是完整的代码，你要懒的话，就直接copy吧

  1. <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <htmlxmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <title></title>
  6. <scriptsrc=../../"js/jquery-1.7.1.min.js"type="text/javascript"></script>
  8. <scripttype="text/javascript">
  9. $.log=function(msg){
  10. console.log(msg);
  11. }
  13. $(
  14. function(){
  15. [{number:1,bgcolor:"#C71585"},{number:2,bgcolor:"#800080"},{number:3,bgcolor:"#B8860B"},
  16. {number:4,bgcolor:"rgb(0,0,128)"},{number:5,bgcolor:"rgb(30,144,255)"},
  17. {number:6,bgcolor:"rgb(255,165,0)"},
  18. {number:7,bgcolor:"hsl(0,75%,50%)"},{number:8,bgcolor:"hsl(30,50%,50%)"},
  19. {number:9,bgcolor:"hsl(120,75%,38%)"}].forEach(
  20. function(key,index){
  21. //$.log(key);
  22. varli=$("<li>").html(key.number).css("backgroundColor",key.bgcolor).attr("draggable","true");
  23. //$.log(li);
  24. li[0].addEventListener("dragstart",function(e){
  25. e.dataTransfer.effectAllowed="copyMove";
  26. e.dataTransfer.setData("text/plain",this.innerHTML);
  27. $.log(this.innerHTML);
  28. [].forEach.call(document.querySelectorAll("#player.default"),
  29. function(item){
  30. //$.log(item);
  31. item.classList.remove("default");
  32. item.classList.add("ation");
  33. });
  34. },false);
  36. li[0].addEventListener("dragend",function(){
  37. [].forEach.call(document.querySelectorAll("#player.ation"),
  38. function(item){
  39. item.classList.remove("ation");
  40. item.classList.add("default");
  41. });
  42. },false);
  44. $("#numberBox").append(li);
  45. }
  46. );
  47. }
  48. );
  50. $(
  51. function(){
  52. "500000300090500400004000700051037289302080604008052137035000900609000823080023006".split("").forEach(
  53. function(item,index){
  54. $.log(item);
  55. varli=$("<li>")
  56. if(item!="0"){
  57. li.addClass("fix");
  58. li[0].innerHTML=item;
  59. }
  60. else{
  61. li[0].classList.add("default");
  62. li[0].addEventListener("dragenter",
  63. function(e){
  64. $.log(e);
  65. },false);
  67. li[0].addEventListener("dragover",
  68. function(e){
  69. if(e.preventDefault){
  70. e.preventDefault();//不要执行与事件关联的默认动作
  71. }
  72. if(e.stopPropagation){
  73. e.stopPropagation();//停止事件的传播
  74. }
  75. $.log(e);
  76. returnfalse;
  77. },false);
  79. li[0].addEventListener("dragleave",
  80. function(e){
  81. },false);
  83. li[0].addEventListener("drop",
  84. function(e){
  85. if(e.preventDefault){
  86. e.preventDefault();//不要执行与事件关联的默认动作
  87. }
  88. if(e.stopPropagation){
  89. e.stopPropagation();//停止事件的传播
  90. }
  92. varsendData=e.dataTransfer.getData("text/plain");
  93. //获得#player>li矩阵数组
  94. varmatrix=Array.prototype.slice.call(document.querySelectorAll("#player>li"));
  95. varcurrIndex=matrix.indexOf(this);//获得当前元素的位置
  96. varrowIndex=currIndex-currIndex%9;//行开始的位置
  97. varcolIndex=currIndex%9//列开始的位置
  98. for(vari=rowIndex;i<rowIndex+9;i++){
  99. if(i!=currIndex&&matrix[i].innerHTML==sendData){
  100. alert("对不起行上有数据重复，请小心哦！亲");
  101. return;
  102. }
  103. }
  104. for(vari=colIndex;i<81;i=i+9){
  105. if(i!=currIndex&&matrix[i].innerHTML==sendData){
  106. alert("对不起列上有数据重复，请小心哦！亲");
  107. return;
  108. }
  109. }
  110. this.innerHTML=sendData;
  112. },false);
  113. }
  114. $("#player").append(li);
  115. }
  116. );
  117. }
  118. );
  122. </script>
  124. <styletype="text/css">
  125. #numberBox>li
  126. {
  127. width:30px;
  128. height:25px;
  129. text-align:center;
  130. font-size:20px;
  131. padding-top:5px;
  132. float:left;
  133. color:White;
  134. }
  135. #player.default
  136. {
  137. float:left;
  138. width:48px;
  139. height:33px;
  140. border:solid1pxrgb(0,0,0);
  141. font-size:20px;
  142. padding-top:15px;
  143. text-align:center;
  144. background-color:#B8860B;
  145. }
  146. #player.fix
  147. {
  148. float:left;
  149. width:48px;
  150. height:33px;
  151. border:solid1pxrgb(0,0,0);
  152. font-size:20px;
  153. padding-top:15px;
  154. text-align:center;
  155. background-color:#FFFABC;
  156. }
  157. #player.ation
  158. {
  159. float:left;
  160. width:48px;
  161. height:33px;
  162. border:solid1pxrgb(0,0,0);
  163. font-size:20px;
  164. padding-top:15px;
  165. text-align:center;
  166. background-color:#FFA07A;
  167. }
  168. </style>
  169. </head>
  170. <body>
  171. <olid="numberBox"style="list-style-type:none;width:90px;height:90px;">
  172. </ol>
  173. <olid="player"style="list-style-type:none;width:450px;height:450px;">
  174. </ol>
  175. </body>

分享到：
| Android虚拟键盘弹出时挡住EditText解决方 ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    深度VMware6.0完美精简汉化版+Drag&Drop_FixPatch

    总之，【深度VMware6.0完美精简汉化版+Drag&Drop_FixPatch】是一个专为中国用户设计的VMware Workstation优化版本，它解决了原版软件的某些不便，并提供了一个更加友好、高效的使用环境。用户可以通过下载这个版本来...

    VMware6.0深度完美汉化版+vmtools+Drag&Drop_FixPatch（1）

    而且我已经把windows和linux的vmtools包，以及解决拖拽的问题脚本Drag&Drop_FixPatch一并加入进来，欢迎大家下载使用。 注意:因为大小问题,我分为两卷: VMware6.0深度完美汉化版+vmtools+Drag&Drop_FixPatch（1） ...

    HTML5实践Drag&Drop

    HTML5实践Drag&Drop HTML5作为现代网页开发的标准，引入了许多新的特性和API，其中一项就是拖放（Drag&Drop）功能。这项技术允许用户通过鼠标或触控设备将元素从一个位置拖动到另一个位置，极大地提升了用户体验。...

    使用Drag&Drop接受文件名的输入框(13KB)

    总的来说，“使用Drag&Drop接受文件名的输入框”是一个提升用户友好性的实用功能，它结合了现代UI设计趋势和技术，使用户操作更加便捷。通过学习和应用这种技术，开发者能够创造出更加高效且直观的应用程序。

    Drag&Drop VCL for Delphi

    在Windows环境下，Shell API提供了对拖放操作的基本支持，而Drag&Drop VCL则将这些底层接口包装为易于使用的VCL组件，方便开发者快速集成到Delphi项目中。 Drag&Drop VCL的核心组件通常包括TDragObject、...

    一个很不错的drag & drop

    综合以上信息，我们可以推断这是一个使用PHP开发的、具有拖放功能的个性化首页服务。用户可以通过拖放小部件来定制他们的个人主页，尽管目前版本可能没有保存设置的功能，需要开发者进一步完善。对于想要学习如何在...

    VMware6.0深度完美汉化版+vmtools+Drag&Drop_FixPatch（2）

    而且我已经把windows和linux的vmtools包，以及解决拖拽的问题脚本Drag&Drop_FixPatch一并加入进来，欢迎大家下载使用。 注意:因为大小问题,我分为两卷: VMware6.0深度完美汉化版+vmtools+Drag&Drop_FixPatch（1） ...

    WPF Drag&Drop

    在Windows Presentation Foundation (WPF) 中，拖放（Drag&Drop）功能是一种常见的用户交互方式，允许用户通过鼠标操作将项目从一个位置移动到另一个位置。在这个特定的场景中，"WPF Drag&Drop"指的是在两个DataGrid...

    eclipse rcp drag&drop

    5. **Drag and Drop Operations**: 拖放操作有多种类型，如`DND.DROP_COPY`（复制）、`DND.DROP_MOVE`（移动）和`DND.DROP_DEFAULT`（默认）。在`DragSourceAdapter`和`DropTargetAdapter`中，你可以根据需要重写...

    Blender插件-多格式文件拖拽导入插件 Drag & Drop Import V1

    Optimize your workflow with Drag and Drop Import for Blender. Quickly and easily import files by dragging them from your file explorer and dropping them into Blender’s 3D Viewport or Outliner. No ...

    Window下拖放操作Drag & Drop 全解析

    Windows 操作系统中拖放操作（Drag & Drop）是一种常用的用户交互方式，允许用户在不同的程序窗口之间、同一个程序的不同窗口之间或同一程序同一窗口的不同控件之间进行移动、复制和粘贴等操作。拖放操作是在操作...

    Drag & drop source code android

    在Android开发中，拖放（Drag & Drop）功能是一种用户友好的交互方式，允许用户通过手势将一个元素从一处移动到另一处。本资源提供的"Drag & Drop source code android"包含了一个实现Android拖放功能的源代码示例，...

    Drag & Drop Modules

    "Drag & Drop Modules" 是一个关于使用拖放功能在JavaScript虚拟机2（JSVM2）中构建模块化应用的示例。这个主题涉及到前端开发中的交互设计和模块化编程两个重要概念。 首先，让我们深入了解“Drag & Drop”技术。...

    Drag & Drop in Javascript.zip

    JavaScript中的拖放（Drag & Drop）功能是一种交互式技术，允许用户通过鼠标操作将元素从一个位置拖动到另一个位置，常用于文件管理、界面构建和游戏开发等场景。在这个"Drag & Drop in JavaScript"项目中，我们可能...

    Drag & Drop Files to Delete.zip

    标题“Drag & Drop Files to Delete.zip”提示我们这是一个与JavaScript相关的项目，可能涉及到文件操作，特别是拖放（Drag & Drop）功能，用于删除文件。在Web开发中，这种功能允许用户通过简单的拖放操作来处理...

    WPF listbox之间拖动 drag&drop

    在Windows Presentation Foundation (WPF) 中，`ListBox` 是一个常用的数据展示控件，它可以用来显示一系列可选择的项。本教程将详细讲解如何在两个`ListBox`之间实现拖放（Drag & Drop）功能，以及如何添加上下按钮...

    Drag&drop.zip

    在我们的例子中，“Drag&drop.zip”项目包含了一个测试示例，展示了如何在两个列表框（QListWidget）之间进行拖放操作。 在Qt 5.6中，启用拖放功能通常需要以下步骤： 1. **启用拖放功能**：对于每个列表框，需要...

    Enhanced Drag & Drop(3KB)

    标题“Enhanced Drag & Drop(3KB)”暗示我们讨论的主题是关于增强拖放功能的代码实现，这通常涉及用户界面（UI）交互的优化。在编程领域，拖放功能允许用户通过鼠标操作来移动或复制对象，使得软件更加用户友好。...

Magicbox
Global site tag (gtag.js) - Google Analytics