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{
  45. width:800px;
  46. text-align:center;
  47. border:1pxsolidblack;
  48. margin:20pxauto;
  49. font-size:28px;
  50. }
  51. </style>
  52. <scripttype="text/javascript">
  53. window.onload=function(){
  54. varaLi=document.getElementsByTagName('li');
  55. varoLeft=document.getElementsByClassName('left')[0];
  56. varoMessage=document.getElementById('message');
  58. for(vari=0;i<aLi.length;i++){
  59. aLi[i].index=i+1;
  60. aLi[i].ondragstart=function(ev){
  61. //事件对象ev
  62. varevev=ev||event;
  64. ev.dataTransfer.setData("Text",this.id);
  65. }
  67. }
  68. oLeft.ondrop=function(ev){
  70. varevev=ev||event;
  71. vardata=ev.dataTransfer.getData("Text");
  72. varnum=document.getElementById(data).index;
  73. document.getElementById(data).remove();
  75. oMessage.innerHTML="列表"+num+"被放进了垃圾箱";
  77. this.style.color="black";
  79. }
  80. oLeft.ondragover=function(ev){
  81. varevev=ev||event;
  82. ev.preventDefault();
  83. }
  84. oLeft.ondragenter=function(){
  85. this.style.color="#fff";
  86. }
  87. }
  88. </script>
  89. </head>
  90. <body>
  91. <divclass="main">
  92. <divclass="left">垃圾箱</div>
  93. <divclass="right">
  94. <ul>
  95. <liid="item1"draggable="true">列表1</li>
  96. <liid="item2"draggable="true">列表2</li>
  97. <liid="item3"draggable="true">列表3</li>
  98. <liid="item4"draggable="true">列表4</li>
  99. <liid="item5"draggable="true">列表5</li>
  100. <liid="item6"draggable="true">列表6</li>
  101. </ul>
  102. </div>
  103. <divstyle="clear:both;"></div>
  106. </div>
  107. <divid="message">拖到垃圾箱删除列表</div>
  108. </body>
  109. </html>

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

您可能有感兴趣的文章
Html5原生拖拽相关事件简介以及基础如何实现
html5 拖拽及用 javascript 如何实现拖拽功能的示例代码
HTML5拖拽文件上传的示例代码
html5拖拽应用记录及注意点
HTML5拖拽功能如何实现的拼图游戏