HTML5拖拽的简单实例

梦是一种欲望,想是一种行动。梦想是梦与想的结晶。当心灵趋于平静时,精神便是永恒!把欲望降到最低点,把理性升华到最高点,你会感受到:平安是福,清新是禄,寡欲是寿!

拖拽相关属性

draggable属性是html5的全局属性,是html5支持拖放操作的方式之一,用来表示元素是否可以被拖放,draggable有三个值,true表示可以拖放,false表示不可以被拖放,auto表示使用浏览器的默认值

XML/HTML Code复制内容到剪贴板
  1. <ul>
  2. <liid="item1"draggable="true">列表1</li>
  3. <liid="item2"draggable="true">列表2</li>
  4. <liid="item3"draggable="true">列表3</li>
  5. <liid="item4"draggable="true">列表4</li>
  6. <liid="item5"draggable="true">列表5</li>
  7. <liid="item6"draggable="true">列表6</li>
  8. </ul>

拖拽相关的事件

ondragstart:此事件在用户开始拖动元素或选择文本时触发 ondrag:元素正在拖动时触发 ondragend:用户完成元素拖放时触发 ondragleave:当被鼠标拖动的对象离开其容器范围时触发 ondragover:当某个被拖动的对象在另一对象容器范围内拖动时触发此事件,此事件发生在目标元素身上 ondrop:在一个拖动过程中,释放鼠标时触发,此事件作用在目标元素身上

dataTransfer 对象相关方法

setData(format,data):添加自定义数据格式 getData(format):获取自定义的数据格式clearData([format]):清除自定义的数据格式及数据

Event.preventDefault()

此方法是阻止事件的默认行为,在ondragover中一定要执行preventDefault(),否则ondrop事件不会被触发

实现案例:

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPEhtml>
  2. <html>
  3. <head>
  4. <metacharset="UTF-8">
  5. <title></title>
  6. <styletype="text/css">
  7. .main{
  8. width:800px;
  9. /*border:1pxsolid#ccc;*/
  10. height:400px;
  11. margin:0auto;
  12. }
  13. .left{
  14. float:left;
  15. width:25%;
  16. background-color:#666;
  17. height:370px;
  18. text-align:center;
  19. color:black;
  20. padding-top:30px;
  21. font-size:110px;
  22. }
  23. .right{
  24. float:right;
  25. width:69%;
  26. }
  27. .rightul,.rightli{
  28. margin:0;
  29. padding:0;
  30. }
  31. .rightli{
  32. list-style:none;
  33. border:2pxdashed#666;
  34. background-color:#ddd;
  35. height:60px;
  36. margin-top:3px;
  37. text-indent:30px;
  38. line-height:60px;
  39. }
  40. .rightli:hover{
  41. background-color:#ccc;
  42. }
  43. #message{
  44. width:800px;
  45. text-align:center;
  46. border:1pxsolidblack;
  47. margin:20pxauto;
  48. font-size:28px;
  49. }
  50. </style>
  51. <scripttype="text/javascript">
  52. window.onload=function(){
  53. varaLi=document.getElementsByTagName('li');
  54. varoLeft=document.getElementsByClassName('left')[0];
  55. varoMessage=document.getElementById('message');
  56. for(vari=0;i<aLi.length;i++){
  57. aLi[i].index=i+1;
  58. aLi[i].ondragstart=function(ev){
  59. //事件对象ev
  60. varevev=ev||event;
  61. ev.dataTransfer.setData("Text",this.id);
  62. }
  63. }
  64. oLeft.ondrop=function(ev){
  65. varevev=ev||event;
  66. vardata=ev.dataTransfer.getData("Text");
  67. varnum=document.getElementById(data).index;
  68. document.getElementById(data).remove();
  69. oMessage.innerHTML="列表"+num+"被放进了垃圾箱";
  70. this.style.color="black";
  71. }
  72. oLeft.ondragover=function(ev){
  73. varevev=ev||event;
  74. ev.preventDefault();
  75. }
  76. oLeft.ondragenter=function(){
  77. this.style.color="#fff";
  78. }
  79. }
  80. </script>
  81. </head>
  82. <body>
  83. <divclass="main">
  84. <divclass="left">垃圾箱</div>
  85. <divclass="right">
  86. <ul>
  87. <liid="item1"draggable="true">列表1</li>
  88. <liid="item2"draggable="true">列表2</li>
  89. <liid="item3"draggable="true">列表3</li>
  90. <liid="item4"draggable="true">列表4</li>
  91. <liid="item5"draggable="true">列表5</li>
  92. <liid="item6"draggable="true">列表6</li>
  93. </ul>
  94. </div>
  95. <divstyle="clear:both;"></div>
  96. </div>
  97. <divid="message">拖到垃圾箱删除列表</div>
  98. </body>
  99. </html>

以上这篇HTML5拖拽的简单实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。

您可能有感兴趣的文章
Html5原生拖拽相关事件简介以及基础如何实现

html5 拖拽及用 javascript 如何实现拖拽功能的示例代码

HTML5拖拽文件上传的示例代码

html5拖拽应用记录及注意点

HTML5拖拽功能如何实现的拼图游戏