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

HTML5 드래그 앤 드롭 효과 구현 코드

黄舟

풀어 주다： 2017-02-21 13:11:20

원래의

1394명이 탐색했습니다.

드래그 앤 드롭

드래그 앤 드롭은 개체를 잡고 나중에 다른 위치로 드래그하는 일반적인 기능입니다.

HTML5에서는 드래그 앤 드롭이 표준의 일부이며 모든 요소를 드래그 앤 드롭할 수 있습니다.

Internet Explorer 9+, Firefox, Opera, Chrome 및 Safari는 드래그를 지원합니다.

참고:Safari 5.1.2는 드래그를 지원하지 않습니다.

예:

<!DOCTYPE html>  
<html>  
<head>  
    <title>拖放</title>  
    <style type="text/css">  
        #p1{width:360px;height:220px;padding:20px;border:1px solid black;}  
    </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 id="p1" ondrop="drop(event)" ondragover="allowDrop(event)"></p>  
    <br />  
    <img id="drag1" src="img/bg_1.jpg" draggable="true" ondragstart="drag(event)"  width="300px" height="180px" />  
</body>  
</html>

로그인 후 복사

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

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

function drag(ev)
{
    ev.dataTransfer.setData("Text",ev.target.id);
}

로그인 후 복사

이 예에서는 data 유형은 "Text"이고 값은 드래그 가능한 요소의 ID("drag1")입니다.

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

드래그한 데이터가 배치되면, 드롭 이벤트가 발생합니다. 위 예에서 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() 메소드에서 동일한 유형으로 설정된 모든 데이터를 반환합니다.
드래그된 데이터는 드래그된 요소의 ID입니다("drag1")
드래그된 요소를 배치 요소(타겟 요소)에 추가
앞뒤로 드래그:

두 곳 사이를 앞뒤로 드래그하고 싶다면 위의 코드를 살짝 수정하면 됩니다.
본문의 코드를 다음과 같이 변경하세요.

<body>  
    <p id="p1" ondrop="drop(event)" ondragover="allowDrop(event)">  
    <img id="drag1" src="img/bg_1.jpg" draggable="true" ondragstart="drag(event)"  width="300px" height="180px" /></p>  
    <p id="p2" ondrop="drop(event)" ondragover="allowDrop(event)"></p>  
</body>

로그인 후 복사

그런 다음 스타일에 #p2를 추가하세요.

<style type="text/css">  
        #p1,#p2{width:360px;height:220px;padding:20px;border:1px solid black;}  
    </style>

로그인 후 복사

이렇게 하면 앞뒤로 드래그 앤 드롭할 수 있습니다.

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

Php8, 나도 갈게

30분 안에 웹사이트 레이아웃 배우기

Shangguan Oracle 초보자부터 능숙한 비디오 튜토리얼까지

UNI-APP 코드의 첫 번째 줄

처음부터 앱 실행까지 Flutter

Lian 형제 새 Linux 비디오 튜토리얼

AXURE 9 비디오 튜토리얼(제품 관리자 대화형 제품 디자인 UI에 적합)

Zero 기본 숙련도 PS 비디오 튜토리얼

시작하는 데 도움이 되는 16일 UI 비디오 튜토리얼

PS 기술 및 슬라이싱 기술 비디오 튜토리얼

Alibaba Cloud 환경 구축 및 프로젝트 출시 비디오 튜토리얼

컴퓨터 네트워크 개요 - 프로그래머가 마스터해야 하는 기본 지식

프로그래머를 위한 필수 튜토리얼 - HTTP 프로토콜 설명

웹소켓 비디오 튜토리얼

HTML5 드래그 앤 드롭 효과 구현 코드