HTML5 드래그 앤 드롭 기능 구현 코드-H5 튜토리얼-php.cn

HTML5 드래그 앤 드롭 기능 구현 코드

黄舟

풀어 주다： 2017-02-20 13:35:33

원래의

1449명이 탐색했습니다.

HTML5에서는 드래그 앤 드롭이 표준이며, 구체적인 내용은 다음과 같습니다.
1. 드래그 앤 드롭

<!DOCTYPE HTML>  

    <html>  

    <head>  

    <style type="text/css">  

    #p1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}   

    </style>  

    <script>  

    function allowDrop(ev)   

    {   

    ev.preventDefault();   

    }   

    function drag(ev)   

    {   

    ev.dataTransfer.setData("Text",ev.target.id);   

    }   

    function drop(ev)   

    {   

    ev.preventDefault();   

    var data=ev.dataTransfer.getData("Text");   

    ev.target.appendChild(document.getElementById(data));   

    }   

    </script>  

    </head>  

    <body>  

    <p>拖动 W3CSchool.cc 图片到矩形框中:</p>  

    <p id="p1" ondrop="drop(event)" ondragover="allowDrop(event)"></p>  

    <br>  

    <img id="drag1" src="/images/logo.png" draggable="true" ondragstart="drag(event)" width="336" height="69">  

    </body>  

    </html>

로그인 후 복사

2. 요소를 드래그 가능하게 설정

먼저 요소를 드래그 가능하게 만들려면 draggable 속성을 true로 설정하세요.

3. 드래그할 내용 - ondragstart 및 setData()

그런 다음 요소를 드래그할 때 어떤 일이 일어날지 지정하세요. . 위의 예에서 ondragstart 속성은 드래그할 데이터를 지정하는 drag(event) 함수를 호출합니다. dataTransfer.setData() 메서드는 드래그된 데이터의 데이터 유형과 값을 설정합니다.

function drag(ev)   

    {   

       ev.dataTransfer.setData("Text",ev.target.id);   

    }

로그인 후 복사

이 예에서 데이터 유형은 "Text"이고 값은 드래그된 요소("drag1")의 ID입니다.

4. 배치 위치 - ondragover

ondragover 이벤트는 드래그된 데이터를 배치할 위치를 지정합니다. 기본적으로 데이터/요소는 다른 요소에 배치될 수 없습니다. 배치를 허용해야 하는 경우 요소의 기본 처리를 방지해야 합니다. 이는 ondragover 이벤트의 event.preventDefault() 메소드를 호출하여 수행됩니다: event.preventDefault()

Place - ondrop

when 드래그된 데이터를 Drop하면 drop 이벤트가 발생합니다. 위의 예에서 ondrop 속성은 drop(event) 함수를 호출합니다.

function drop(ev)   

    {   

    ev.preventDefault();   

    var data=ev.dataTransfer.getData("Text");   

    ev.target.appendChild(document.getElementById(data));   

    }

로그인 후 복사

코드 설명:

브라우저의 기본 데이터 처리를 방지하려면 PreventDefault()를 호출하세요(드롭 이벤트의 기본 동작은 링크로 열리는 것입니다). dataTransfer.getData("Text") 메서드를 통해 드래그된 데이터를 가져옵니다. 이 메소드는 setData() 메소드에서 동일한 유형으로 설정된 모든 데이터를 반환합니다. 드래그된 데이터는 드래그된 요소("drag1")의 ID입니다. 드래그된 요소를 드롭된 요소(대상 요소)에 추가합니다.

위 내용은 HTML5 드래그 앤 드롭 기능 구현 코드 내용입니다. 더 많은 관련 내용은 PHP 중국어 홈페이지(www.php.cn)를 참고해주세요!