zoukankan      html  css  js  c++  java

  • 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事件不会被触发

    实现案例：

    image

    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.                  800px;   
    9.                 /*border: 1px solid #ccc;*/   
    10.                 height: 400px;   
    11.                 margin:0 auto;   
    12.             }   
    13.             .left{   
    14.                 float: left;   
    15.                  25%;   
    16.                 #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.                  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.                  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>  
  • 相关阅读:
    SQL学习
    FOR XML PATH
    IOS学习网址
    weak nonatomic strong等介绍（ios）
    UVALive3045 POJ2000 ZOJ2345 Gold Coins
    UVA713 UVALive5539 POJ1504 ZOJ2001 Adding Reversed Numbers
    UVA713 UVALive5539 POJ1504 ZOJ2001 Adding Reversed Numbers
    UVA439 POJ2243 HDU1372 ZOJ1091 Knight Moves【BFS】
    UVA439 POJ2243 HDU1372 ZOJ1091 Knight Moves【BFS】
    UVA10905 Children's Game
  • 原文地址：https://www.cnblogs.com/8834760y/p/5679064.html
Copyright © 2011-2022 走看看