H5怎么做出拖拽效果

时间2024-01-23 03:26:39发布访客分类HTML浏览652

导读：收集整理的这篇文章主要介绍了H5怎么做出拖拽效果，觉得挺不错的，现在分享给大家，也给大家做个参考。这次给大家带来H5怎么做出拖拽效果，H5做拖拽效果的注意事项有哪些，下面就是实战案例，一起来看一下。拖拽相关属性Draggable属性是htM...

收集整理的这篇文章主要介绍了H5怎么做出拖拽效果，觉得挺不错的，现在分享给大家，也给大家做个参考。这次给大家带来H5怎么做出拖拽效果，H5做拖拽效果的注意事项有哪些，下面就是实战案例，一起来看一下。

拖拽相关属性

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

ul>
             li id="ITem1" draggable="true">
    列表1/li>
          li id="item2" draggable="true">
    列表2/li>
          li id="item3" draggable="true">
    列表3/li>
          li id="item4" draggable="true">
    列表4/li>
          li id="item5" draggable="true">
    列表5/li>
          li id="item6" draggable="true">
    列表6/li>
      /ul>

拖拽相关的事件

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

datatransfer 对象相关方法

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

Event.preventDefault()

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

!DOCTYPE html>
         html>
             head>
              meta charset="UTF-8">
              title>
    /title>
              style type="text/css">
              .main{
                       width: 800px;
                       /*border: 1px solid #ccc;
    */                   height: 400px;
                       margin:0 auto;
               }
               .left{
                       float: left;
                       width: 25%;
                       background-color: #666;
                       height: 370px;
                       text-align: center;
                       color: black;
                       padding-top:30px ;
                       font-Size: 110px;
               }
               .right{
                       float: right;
                       width: 69%;
               }
               .right ul,.right li{
                      margin: 0;
                      padding: 0;
               }
               .right li{
                       list-style: none;
                       border: 2px dashed  #666;
                       background-color: #ddd;
                       height: 60px;
                       margin-top: 3px;
                       text-indent: 30px;
                       line-height: 60px;
               }
               .right li:hover{
                       background-color: #ccc;
               }
               #message{
                         width: 800px;
                       text-align: center;
                       border: 1px solid black;
                       margin: 20px auto;
                       font-size:28px;
               }
               /style>
              script type="text/javascript">
              window.onload = function(){
                       VAR aLi = document.getelementsbytagname('li');
                       var oLeft = document.getElementsByclassname('left')[0];
                       var oMessage = document.getElementById('message');
                         for(var i=0;
    iaLi.length;
i++){
                           aLi[i].index = i+1;
                       aLi[i].ondragstart = function(ev){
                                                       //事件对象ev                           var evev = ev || event;
                                 ev.dataTransfer.setData("Text",this.id);
                       }
                     }
                   oLeft.ondrop = function(ev){
                             var evev = ev || event;
                           var data = ev.dataTransfer.getData("Text");
                           var num = document.getElementById(data).index;
                            document.getElementById(data).remove();
                             oMessage.innerHTML = "列表"+num+"被放进了垃圾箱";
                             this.style.color = "black";
                         }
                   oLeft.ondragover = function(ev){
                           var evev = ev || event;
                           ev.preventDefault();
                   }
                   oLeft.ondragenter = function(){
                           this.style.color = "#fff";
                   }
               }
               /script>
          /head>
          body>
              div class="main">
                  div class="left">
    垃圾箱/div>
                  div class="right">
                      ul>
                          li id="item1" draggable="true">
    列表1/li>
                          li id="item2" draggable="true">
    列表2/li>
                          li id="item3" draggable="true">
    列表3/li>
                          li id="item4" draggable="true">
    列表4/li>
                          li id="item5" draggable="true">
    列表5/li>
                          li id="item6" draggable="true">
    列表6/li>
                      /ul>
                  /div>
                  div style="clear: both;
    ">
    /div>
                  /div>
              div id="message">
    拖到垃圾箱删除列表/div>
          /body>
      /html>

相信看了这些案例你已经掌握了方法，更多精彩请关注其它相关文章！