H5에서 드래그 효과를 만드는 방법-H5 튜토리얼-php.cn

H5에서 드래그 효과를 만드는 방법

php中世界最好的语言

풀어 주다： 2018-01-09 10:38:03

원래의

4662명이 탐색했습니다.

이번에는 H5에서 드래그 효과를 만드는 방법을 보여드리겠습니다. H5에서 드래그 효과를 만들기 위한 주의사항은 무엇인가요? 실제 사례를 살펴보겠습니다.

드래그 관련 속성

드래그 가능 속성은 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>

로그인 후 복사

Drag 관련 이벤트

ondragstart: 이 이벤트는 사용자가 시작할 때 트리거됩니다. 요소 드래그 또는 텍스트 선택 ondrag: 요소가 드래그될 때 ondragend가 트리거됩니다. : 사용자가 요소 드래그 앤 드롭을 완료할 때 트리거됩니다. ondragleave: 마우스로 드래그하는 객체가 컨테이너 범위를 벗어날 때 트리거됩니다. ondragover: 드래그된 객체가 트리거될 때 트리거됩니다. 다른 객체의 컨테이너 범위 내에서 드래그됩니다. 이 이벤트는 대상 요소에서 발생합니다. 드래그 프로세스 중에 마우스를 놓을 때 트리거됩니다. 이 이벤트는 대상 요소

dataTransfer 객체 관련 메소드

setData(format, data): 사용자 정의 데이터 형식 추가 getData(format): 사용자 정의 데이터 형식 가져오기clearData([format]): 사용자 정의 데이터 형식 및 데이터 지우기

Event.preventDefault()

이 메서드는 이벤트를 방지하기 위한 기본 동작입니다. .PreventDefault()는 ondragover에서 실행되어야 합니다. 그렇지 않으면 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(&#39;li&#39;);   
                var oLeft = document.getElementsByClassName(&#39;left&#39;)[0];   
                var oMessage = document.getElementById(&#39;message&#39;);   
  
                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 중국어 웹사이트의 다른 관련 기사에 주목하세요. !