집 > 기사 > 웹 프론트엔드 > HTML5 모바일 개발을 향한 Xiaoqiang의 길(16) - 마법 같은 드래그 앤 드롭 기능

HTML5 모바일 개발을 향한 Xiaoqiang의 길(16) - 마법 같은 드래그 앤 드롭 기능

黄舟원래의: 2017-01-22 11:50:181180검색

스마트폰의 급속한 발전으로 드래그 앤 드롭 기능이 하나의 패션이 되었지만, 이 편리하고 빠른 기능이 우리 브라우저에는 아직 빠져있는 걸까요? 새로운 HTML5 표준에는 드래그 앤 드롭에 대한 표준이 있습니다. Html5 표준의 일부로 모든 요소를 끌어서 놓을 수 있습니다.

1. 브라우저 지원

Internet Explorer 9, Firefox, Opera 12, Chrome 및 Safari 5는 드래그 앤 드롭을 지원합니다.

참고: Safari 5.1.2에서는 드래그 앤 드롭이 지원되지 않습니다.

2. 사용 방법

먼저 요소를 드래그 가능하게 하려면 draggable 속성을 true로 설정합니다.

<img  draggable="true" / alt="HTML5 모바일 개발을 향한 Xiaoqiang의 길(16) - 마법 같은 드래그 앤 드롭 기능" >

그런 다음 요소가 드래그할 때

ondragstart 속성이 함수를 호출하고

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

dataTransfer.setData() 메서드에 드래그 개체를 반환하도록 하세요. 드래그된 데이터 데이터 유형 및 값을 설정합니다. (드래그된 개체의 ID를 dataTransfer에 전달합니다.)

function drag(ev)  
{  
<span style="white-space:pre">  </span>ev.dataTransfer.setData("Text",ev.target.id);  
}

를 넣을 위치 - ondragover

ondragover 이벤트는 드래그된 데이터를 저장할 위치에 지정됩니다.

기본적으로 데이터/요소는 다른 요소 안에 배치될 수 없습니다. 배치를 허용해야 하는 경우 요소의 기본 처리를 방지해야 합니다.

ondragover 이벤트의 event.preventDefault() 메소드를 호출하면 됩니다.

event.preventDefault()

드래그된 데이터가 배치되면 드롭 이벤트가 발생합니다.

위에서 ondrop 속성은 drop(event) 함수를 호출합니다.

function drop(ev)  
{  
<span style="white-space:pre">  </span>ev.preventDefault();  
<span style="white-space:pre">  </span>var data=ev.dataTransfer.getData("Text");  
<span style="white-space:pre">  </span>ev.target.appendChild(document.getElementById(data));  
}

코드 설명:

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

2. 예시

<!DOCTYPE HTML>  
<html>  
    <head>  
        <script type="text/javascript">  
            //阻止对元素的默认处理方式  
            function allowDrop(ev)  
            {  
                ev.preventDefault();  
            }  
              
            //将被拖动对象的id传递给dataTransfer中间对象  
            function drag(ev)  
            {  
                ev.dataTransfer.setData("Text",ev.target.id);  
            }  
              
            //取得拖动对象id找到对象实例并用DOM模型添加到<div>里面  
            function drop(ev)  
            {  
                ev.preventDefault();  
                var data=ev.dataTransfer.getData("Text");  
                ev.target.appendChild(document.getElementById(data));  
            }  
        </script>  
    </head>  
    <body>  
        <!--要被拖动到的地方-->  
        <div id="div1" ondrop="drop(event)"    
        ondragover="allowDrop(event)"    
        style="border:1px solid red;width:300px;height:200px;">  
        </div>  
        <!--要被拖动的对象-->  
        <img id="drag1" src="test.png" draggable="true"  
        ondragstart="drag(event)"/>  
  
    </body>  
</html>

HTML5 모바일 개발을 향한 Xiaoqiang의 길(16) - 마법 같은 드래그 앤 드롭 기능

위는 Xiaoqiang의 HTML5 모바일 개발 로드(16) - Magic Drag 자세한 내용은 내용은 PHP 중국어 홈페이지(www.php.cn)를 주목해주세요!

성명：

이전 기사：HTML5 모바일 개발을 향한 Xiaoqiang의 길(15) - HTML5의 오디오다음 기사：HTML5 모바일 개발을 향한 Xiaoqiang의 길(15) - HTML5의 오디오

HTML5 모바일 개발을 향한 Xiaoqiang의 길(16) - 마법 같은 드래그 앤 드롭 기능

관련 기사