当前位置：Gxlcms > html代码 > 实现HTML5拖拽的示例代码

实现HTML5拖拽的示例代码

时间：2021-07-01 10:21:17 帮助过：28人阅读

下面小编就为大家带来一篇HTML5拖拽的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧

拖拽相关属性

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

  1. <ul>
  2.     <li id="item1" draggable="true">列表1</li>
  3.     <li id="item2" draggable="true">列表2</li>
  4.     <li id="item3" draggable="true">列表3</li>
  5.     <li id="item4" draggable="true">列表4</li>
  6.     <li id="item5" draggable="true">列表5</li>
  7.     <li id="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事件不会被触发

实现案例： 

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title></title>
  6.         <style type="text/css">
  7.             .main{   
  8.                 width: 800px;   
  9.                 /*border: 1px solid #ccc;*/   
  10.                 height: 400px;   
  11.                 margin:0 auto;   
  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.             .right ul,.right li{   
  28.                margin: 0;   
  29.                padding: 0;   
  30.             }   
  31.             .right li{   
  32.                 list-style: none;   
  33.                 border: 2px dashed  #666;   
  34.                 background-color: #ddd;   
  35.                 height: 60px;   
  36.                 margin-top: 3px;   
  37.                 text-indent: 30px;   
  38.                 line-height: 60px;   
  39.             }   
  40.             .right li:hover{   
  41.                 background-color: #ccc;   
  42.             }   
  43.             #message{   
  44.                 width: 800px;   
  45.                 text-align: center;   
  46.                 border: 1px solid black;   
  47.                 margin: 20px auto;   
  48.                 font-size:28px;   
  49.             }   
  50.         </style>
  51.         <script type="text/javascript">
  52.             window.onload = function(){   
  53.                 var aLi = document.getElementsByTagName('li');   
  54.                 var oLeft = document.getElementsByClassName('left')[0];   
  55.                 var oMessage = document.getElementById('message');   
  56.                 for(var i=0;i<aLi.length;i++){   
  57.                     aLi[i].index = i+1;   
  58.                     aLi[i].ondragstart = function(ev){   
  59.                                                 //事件对象ev   
  60.                         var evev = ev || event;   
  61.                         ev.dataTransfer.setData("Text",this.id);   
  62.                     }   
  63.                 }   
  64.                 oLeft.ondrop = function(ev){   
  65.                     var evev = ev || event;   
  66.                     var data = ev.dataTransfer.getData("Text");   
  67.                     var num = 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.                     var evev = ev || event;   
  74.                     ev.preventDefault();   
  75.                 }   
  76.                 oLeft.ondragenter = function(){   
  77.                     this.style.color = "#fff";   
  78.                 }   
  79.             }   
  80.         </script>
  81.     </head>
  82.     <body>
  83.         <p class="main">
  84.             <p class="left">垃圾箱</p>
  85.             <p class="right">
  86.                 <ul>
  87.                     <li id="item1" draggable="true">列表1</li>
  88.                     <li id="item2" draggable="true">列表2</li>
  89.                     <li id="item3" draggable="true">列表3</li>
  90.                     <li id="item4" draggable="true">列表4</li>
  91.                     <li id="item5" draggable="true">列表5</li>
  92.                     <li id="item6" draggable="true">列表6</li>
  93.                 </ul>
  94.             </p>
  95.             <p style="clear: both;"></p>
  96.         </p>
  97.         <p id="message">拖到垃圾箱删除列表</p>
  98.     </body>
  99. </html>

以上就是实现HTML5拖拽的示例代码的详细内容，更多请关注Gxl网其它相关文章！

人气教程排行

本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！