• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营

    • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    HTML5拖拽的简单实例

    拖拽相关属性

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

    XML/HTML Code复制内容到剪贴板
    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事件不会被触发

    实现案例：

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

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

    上一篇：HTML5对比HTML4的主要改变和改进总结
    下一篇：h5调用摄像头的实现方法
  • 相关文章
    • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

    HTML5拖拽的简单实例 HTML5,拖拽,的,简单,实例,