HTML5 드래그 앤 드롭(Drag and Drop) 자세한 설명 및 예시-H5 튜토리얼-php.cn

소개

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

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

먼저 작은 예를 클릭하세요. 사용자가

요소를 드래그하기 시작할 때 JavaScript를 실행하세요

<p draggable="true" ondragstart="myFunction(event)">拖动我!</p>

로그인 후 복사

팁: 링크와 이미지는 기본적으로 드래그 가능하며 draggable 속성이 필요하지 않습니다.

정의 및 사용법

은 드래그 앤 드롭 프로세스 중에 다음 이벤트를 트리거합니다.

드래그 대상(소스 요소)에서 이벤트를 트리거합니다.

ondragstart - 사용자가 요소 드래그를 시작할 때 트리거됩니다.

ondrag - 요소가 드래그될 때 트리거됩니다.

ondragend - 사용자가 요소 드래그를 완료할 때 트리거됩니다.

다음 경우에 트리거됩니다. 대상이 해제됩니다.

ondragenter - 이 이벤트는 마우스로 드래그되는 객체가 해당 컨테이너의 범위에 들어갈 때 트리거됩니다.

ondragover - 드래그된 객체가 다른 객체의 범위 내로 드래그될 때 객체의 컨테이너 이 이벤트 트리거

ondragleave - 이 이벤트는 마우스로 드래그하는 객체가 컨테이너의 범위를 벗어날 때 트리거됩니다.

ondrop - 이 이벤트는 마우스 버튼을 놓을 때 트리거됩니다. 드래그 프로세스

브라우저 지원

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

참고: Safari 5.1.2는 드래그를 지원하지 않습니다. 요소를 드래그하면 ondragover 이벤트가 350밀리초마다 실행됩니다.

예

코드를 먼저 게시한 다음 하나씩 설명하세요.

<!DOCTYPE html>
<html>
<head>
<title>HTML5拖拽</title>
<meta charset="utf-8">
<style>
#div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
</style>
</head>
<body>
<p>拖动img_w3slogo.gif图片到矩形框中:</p>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="drag1" src="images/img_w3slogo.gif" draggable="true" ondragstart="drag(event)" width="300" height="56">

<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>
</body>
</html>

로그인 후 복사

드래그 전 페이지 효과는 다음과 같습니다.

HTML5 拖放（Drag 和 Drop）详解与实例

위 코드의 의미를 별도로 분석해 보겠습니다.

요소를 드래그 가능하게 설정

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

<img draggable="true">

로그인 후 복사

드래그할 내용 - ondragstart 및 setData( )

그런 다음 요소를 드래그할 때 어떤 일이 발생하는지 지정하세요.

위의 예에서 ondragstart 속성은 드래그할 데이터를 지정하는 drag(event) 함수를 호출합니다.

dataTransfer.setData() 메소드는 드래그된 데이터의 데이터 유형과 값을 설정합니다.

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

로그인 후 복사

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

위치 위치 - ondragover

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

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

이것은 ondragover 이벤트의 event.preventDefault() 메소드를 호출하여 수행됩니다.

event.preventDefault()

로그인 후 복사

배치 - ondrop

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

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

function drop(ev)
{
    ev.preventDefault();
    var data=ev.dataTransfer.getData("Text");
    ev.target.appendChild(document.getElementById(data));
}

로그인 후 복사

코드 설명:

preventDefault()를 호출하여 브라우저가 data 기본 처리(드롭 이벤트의 기본 동작은 링크로 열리는 것임)

dataTransfer.getData("Text") 메소드를 통해 드래그된 데이터를 가져옵니다. 이 메소드는 setData() 메소드에서 동일한 유형으로 설정된 모든 데이터를 반환합니다.

드래그된 데이터는 드래그된 요소의 ID("drag1")입니다

드래그된 요소를 배치 요소(타겟 요소)에 추가

구현 결과

HTML5 拖放（Drag 和 Drop）详解与实例

dataTransfer 객체

드래그 작업 중에 dataTransfer 객체를 사용하여 데이터를 전송할 수 있습니다. 드래그 작업이 끝나면 전송됩니다.

객체 속성:

dropEffect: 드래그 앤 드롭 대상에서 발생하도록 허용된 드래그 앤 드롭 동작을 설정하거나 반환합니다. 여기에 설정된 드래그 앤 드롭 동작이 더 이상 effectAllowed 속성으로 설정된 여러 드래그 앤 드롭 동작 중 하나가 아닌 경우 드래그 앤 드롭 작업이 실패합니다. 속성값은 "null", "copy", "link", "move" 4가지 값 중 하나만 허용됩니다.

effectAllowed: 드래그된 요소에 허용되는 드래그 동작을 설정하거나 반환합니다. 속성값은 "none", "copy", "copyLink", "copyMove", "link", "linkMove", "move", "all", "uninitialized"로 설정할 수 있습니다.

items: 이 속성은 드래그 데이터를 나타내는 DataTransferItems 개체를 반환합니다.

types: 이 속성은 dataTransfer에 저장된 모든 유형의 데이터를 포함하는 DOMStringList 개체를 반환합니다.

객체 메소드:

setData(format,data): 지정된 형식의 데이터를 dataTransfer 객체에 할당합니다. 매개변수 format은 데이터의 유형인 데이터의 형식을 정의합니다. data는 할당할 데이터입니다.

getData(format): dataTransfer 객체에서 지정된 형식의 데이터를 가져옵니다. 형식은 데이터 형식을 나타내며 데이터는 데이터입니다.

clearData([format]): dataTransfer 객체에서 지정된 형식의 데이터를 삭제합니다. 매개변수가 지정되지 않으면 객체의 모든 데이터가 삭제됩니다.

addElement(element): 맞춤 아이콘 추가

setDragImage(element,x,y):设置拖放操作的自定义图标。其中element设置自定义图标，x设置图标与鼠标在水平方向上的距离，y设置图标与鼠标在垂直方向上的距离。

Identify what is draggable

function dragstart_handler(ev) {
 console.log("dragStart");
 // Add the target element's id to the data transfer object
 ev.dataTransfer.setData("text/plain", ev.target.id);
}

<body>
 <p id="p1" draggable="true" ondragstart="dragstart_handler(event);">This element is draggable.</p>
</body>

로그인 후 복사

Define the drag's data

function dragstart_handler(ev) {
  // Add the drag data
  ev.dataTransfer.setData("text/plain", ev.target.id);
  ev.dataTransfer.setData("text/html", "<p>Example paragraph</p>");
  ev.dataTransfer.setData("text/uri-list", "http://developer.mozilla.org");
}

로그인 후 복사

Define the drag image

function dragstart_handler(ev) {
  // Create an image and then use it for the drag image.
  // NOTE: change "example.gif" to an existing image or the image 
  // will not be created and the default drag image will be used.
  var img = new Image(); 
  img.src = 'example.gif'; 
  ev.dataTransfer.setDragImage(img, 10, 10);
}

로그인 후 복사

Define the drag effect

function dragstart_handler(ev) {  // Set the drag effect to copy
  ev.dataTransfer.dropEffect = "copy";
}

로그인 후 복사

Define a drop zone

function dragover_handler(ev) {
 ev.preventDefault();
 // Set the dropEffect to move
 ev.dataTransfer.dropEffect = "move"
}
function drop_handler(ev) {
 ev.preventDefault();
 // Get the id of the target and add the moved element to the target's DOM
 var data = ev.dataTransfer.getData("text");
 ev.target.appendChild(document.getElementById(data));
}
<body>
 <div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">Drop Zone</div>
</body>

로그인 후 복사

火狐浏览器拖拽问题

但是进行到这儿在火狐浏览器中发现一个问题：

html5的拖拽，用了preventDefault防止弹出新页面，但在火狐下不管用？

解决办法：

document.body.ondrop = function (event) {
    event.preventDefault();
    event.stopPropagation();
}

로그인 후 복사

更多HTML5 拖放（Drag 和 Drop）详解与实例相关文章请关注PHP中文网！