HTML5에서 드래그 앤 드롭을 구현하기 위한 예제 코드 공유-H5 튜토리얼-php.cn

HTML5에서 드래그 앤 드롭을 구현하기 위한 예제 코드 공유

零下一度

풀어 주다： 2017-05-04 15:36:47

원래의

1965명이 탐색했습니다.

html5에서는 API 인터페이스를 지원합니다. 이 기능을 통해 브라우저와 다른 애플리케이션 간에 데이터를 드래그 앤 드롭할 수 있습니다. 이 작업을 수행하려면 다음 두 단계
를 거쳐야 합니다. (1) 드래그 앤 드롭하려는 객체 의 드래그 가능한 속성 을 true로 설정합니다. 이런 방법으로 태그를 드래그 앤 드롭할 수 있습니다. 또한 img 태그와 a 태그를 true로 지정해야 하며 기본적으로 드래그 앤 드롭이 허용됩니다.
(2) 드래그 앤 드롭과 관련된 이벤트 처리 코드를 작성합니다. 일반적으로 사용되는 재생 이벤트는 다음과 같습니다.
dragstart는 드래그 앤 드롭 작업을 시작합니다.
드래그 드래그 앤 드롭 프로세스 중에. ,
dragenter is 드래그된 라벨이 이 라벨의 범위에 들어가기 시작합니다
dragover 드래그된 라벨이 이 라벨의 범위 내에서 이동하고 있습니다
dragleave 드래그된 라벨이 이 라벨의 범위를 벗어납니다
drop 거기 다른 라벨이 드래그되고 있는지 이 태그에 넣으세요
dragend 드래그 앤 드롭 작업이 종료됩니다

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>拖放</title>
<script type="text/javascript">
function init() 
{
    // (1) 拖放开始
    source.addEventListener("dragstart", function(ev) 
    {
       //(1) 向dataTransfer对象追加数据
        var dt = ev.dataTransfer;
        dt.effectAllowed = &#39;all&#39;;    
       //(2) 拖动元素为dt.setData("text/plain", this.id); 
        dt.setData("text/plain", "你好"); 
    }, false);
      // (3) dragend：拖放结束
    dest.addEventListener("dragend", function(ev) 
    {
        //不执行默认处理（拒绝被拖放）
        ev.preventDefault();
     }, false);
    // (4) drop:被拖放
    dest.addEventListener("drop", function(ev) 
    {
        // 从DataTransfer对象那里取得数据
        var dt = ev.dataTransfer;
        //(5) 不执行默认处理（拒绝被拖放）
        ev.preventDefault();
        //停止事件传播
        ev.stopPropagation();
    }, false);
}
</script>
</head>
<body onload="init()">
<h5>请拖放</h5>
</html>

로그인 후 복사

위 코드에서는 페이지가 로드될 때 inint() 이벤트가 자동으로 트리거됩니다. . 이 이벤트에는 끌기 시작, 끌기 및 놓기, 끌기 종료의 세 가지 기능이 포함됩니다. 브라우저에서 웹페이지를 열고 마우스를 드래그하여 웹페이지에 저녁 사진을 표시하면 웹페이지에 필요한 콘텐츠가 자동으로 로드됩니다.

[관련 추천]

1. 무료 h5 온라인 동영상 튜토리얼

HTML5 정식 버전 매뉴얼

3. php.cn 원본 html5 동영상 튜토리얼

위 내용은 HTML5에서 드래그 앤 드롭을 구현하기 위한 예제 코드 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!