HTML5 드래그 앤 드롭(Drag and Drop) 자세한 설명 및 예시
- 高洛峰원래의
- 2017-02-09 15:09:551793검색
소개
드래그 앤 드롭은 개체를 잡고 다른 위치로 드래그하는 일반적인 기능입니다.
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>
드래그 전 페이지 효과는 다음과 같습니다.
위 코드의 의미를 별도로 분석해 보겠습니다.
요소를 드래그 가능하게 설정
먼저 요소를 드래그 가능하게 만들려면 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")입니다
드래그된 요소를 배치 요소(타겟 요소)에 추가
구현 결과
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中文网！