HTML5의 드래그 앤 드롭
드래그 앤 드롭 (드래그 앤 드롭)은 HTML5 표준의 일부입니다.
아이콘과 사각형으로 드래그 W3cschool.
드래그 앤 드롭
드래그 앤 드롭 객체 후 다른 위치에 크롤링하는 일반적인 기능입니다.
HTML5에서 드래그 앤 드롭 드래그 앤 드롭 할 수있는 모든 요소의 표준 부분입니다.
브라우저 지원
인터넷 익스플로러 9 이상, 파이어 폭스, 오페라, 크롬, 사파리 지원 끕니다.
참고 : 사파리 5.1.2 드래그를 지원하지 않습니다.
HTML5의 드래그 앤 드롭 예
다음은 간단한 드래그 앤 드롭 예입니다 :
예
<html>
<head>
<meta charset="utf-8">
<title>本教程(w3big.com)</title>
<style type="text/css">
#div1 {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>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="drag1" src="/images/logo.png" draggable="true" ondragstart="drag(event)" width="336" height="69">
</body>
</html>
»시도
그것은 조금 복잡하게 보일지도 모르지만, 우리는 드래그의 다른 부분을 공부하고 이벤트를 제거 할 수 있었다.
요소는 드롭 설정
첫째, 요소 드래그 할 수 있도록하기 위해, true로 드래그 속성을 설정 :
() ondragstart 및 사항 setData - 무엇을 드래그
요소가 규정을 드래그하면 그런 다음, 어떤 일이 일어날 것입니다.
위의 예에서, ondragstart 속성은, 드러그되는 데이터가 정의하는 기능, 드래그 (이벤트)를 호출합니다.
dataTransfer.setData () 메소드는 데이터 유형을 설정하고 값 데이터를 견인 :
{
ev.dataTransfer.setData("Text",ev.target.id);
}
이 예에서, 데이터 유형 "텍스트"이며,이 값은 드래그 요소 ID ( "drag1")이있다.
어디 넣어하는 방법 -으로 onDragOver
이벤트가 어디에 배치 할 위치 지정으로 onDragOver 데이터가 끌려.
기본적으로 다른 요소에 데이터 / 요소를 배치 할 수 없습니다. 당신은 설정해야 당신이 배치 할 수 있습니다, 우리는 요소의 기본 처리를 방지해야합니다.
이벤트에서는 event.preventDefault () 메소드를으로 onDragOver 호출하여이 작업을 수행합니다 :
배치 - ondrop
드래그 된 데이터를 배치하면 이벤트가 발생 놓습니다.
특성 함수를 호출 ondrop 위의 예에서, (이벤트) 삭제 :
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
코드 설명 :
- (낙하 이벤트의 기본 동작은 링크를 열 수)의 데이터 처리를위한 기본 브라우저를 방지하기로 preventDefault ()를 호출
- dataTransfer.getData ( "텍스트") 방법을 통해 드래그 된 데이터를 가져옵니다. 이 방법은 사항 setData () 메소드에 모든 유형의 집합 같은 데이터를 반환합니다.
- 데이터가 견인 요소 ID를 견인 ( "drag1")
- 장소 요소 (대상 요소)에 추가 드래그 요소
더 많은 예제
드래그 앞뒤로 이미지를 드롭
어떻게 끌어 두 개의 <DIV> 요소 사이에 이미지를 드롭합니다.