HTML5 모바일 개발을 향한 Xiaoqiang의 길(16) - 마법 같은 드래그 앤 드롭 기능
- 黄舟원래의
- 2017-01-22 11:50:181204검색
스마트폰의 급속한 발전으로 드래그 앤 드롭 기능이 하나의 패션이 되었지만, 이 편리하고 빠른 기능이 우리 브라우저에는 아직 빠져있는 걸까요? 새로운 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>
위는 Xiaoqiang의 HTML5 모바일 개발 로드(16) - Magic Drag 자세한 내용은 내용은 PHP 중국어 홈페이지(www.php.cn)를 주목해주세요!