H5怎么做出拖拽效果

互联网 18-1-9

这次给大家带来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;i<aLi.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>

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

H5怎么做出拖拽效果

相关资讯

标签推荐