Drag the W3Schools image into the rectangle.
W3Schools 이미지를 사각형으로 끌어옵니다.
Drag and Drop
끌어서 놓기
Drag and drop is a very common feature. It is when you "grab" an object and drag it to a different location.
드래그 앤 드롭은 매우 일반적인 기능입니다. 그것은 당신이 물건을 "움켜 잡아"다른 위치로 끌 때입니다.
In HTML5, drag and drop is part of the standard: Any element can be draggable.
HTML5에서 드래그 앤 드롭은 표준의 일부입니다. 모든 요소를 드래그 할 수 있습니다.
Browser Support
브라우저 지원
The numbers in the table specify the first browser version that fully supports Drag and Drop.
표의 숫자는 끌어서 놓기를 완전히 지원하는 첫 번째 브라우저 버전을 지정합니다.
API |
|||||
|---|---|---|---|---|---|
Drag and Drop |
4.0 |
9.0 |
3.5 |
6.0 |
12.0 |
HTML Drag and Drop Example
HTML 끌어서 놓기 예제
The example below is a simple drag and drop example:
아래의 예제는 간단한 드래그 앤 드롭 예제입니다.
Example
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | <!DOCTYPE HTML> <html> <head> <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> <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69"> </body> </html> | cs |
It might seem complicated, but lets go through all the different parts of a drag and drop event.
복잡해 보일 수도 있지만 드래그 앤 드롭 이벤트의 모든 다른 부분을 살펴볼 수 있습니다.
Make an Element Draggable
요소를 드래그 할 수있게 만들기
First of all: To make an element draggable, set the draggable attribute to true:
무엇보다 먼저 : 요소를 드래그 가능하게 만들려면 draggable속성을 true로 설정하십시오 .
1 | <img draggable="true"> | cs |
What to Drag - ondragstart and setData()
무엇을 드래그 할 것인가 - ondragstart와 setData ()
Then, specify what should happen when the element is dragged.
그런 다음 요소를 끌 때 발생할 일을 지정하십시오.
In the example above, the ondragstart attribute calls a function, drag(event), that specifies what data to be dragged.
위의 예에서 ondragstart속성은 드래그 할 데이터를 지정하는 함수 drag (event)를 호출합니다.
The dataTransfer.setData() method sets the data type and the value of the dragged data:
이 dataTransfer.setData()메서드는 데이터 유형과 드래그 된 데이터의 값을 설정합니다.
1 2 3 | function drag(ev) { ev.dataTransfer.setData("text", ev.target.id); } | cs |
In this case, the data type is "text" and the value is the id of the draggable element ("drag1").
이 경우 데이터 유형은 "텍스트"이고 값은 드래그 할 수있는 요소의 ID입니다 ( "drag1").
Where to Drop - ondragover
어디서 떨어지는 지 - ondragover
The ondragover event specifies where the dragged data can be dropped.
이 ondragover이벤트는 드래그 된 데이터를 삭제할 수있는 위치를 지정합니다.
By default, data/elements cannot be dropped in other elements. To allow a drop, we must prevent the default handling of the element.
기본적으로 데이터 / 요소는 다른 요소에 놓을 수 없습니다. 드롭을 허용하려면 요소의 기본 처리를 방지해야합니다.
This is done by calling the event.preventDefault() method for the ondragover event:
이것은 event.preventDefault()ondragover 이벤트에 대한 메소드를 호출하여 수행됩니다 .
1 | event.preventDefault() | cs |
Do the Drop - ondrop
Drop - ondrop을하십시오.
When the dragged data is dropped, a drop event occurs.
드래그 된 데이터가 삭제되면 드롭 이벤트가 발생합니다.
In the example above, the ondrop attribute calls a function, drop(event):
위의 예에서 ondrop 속성은 함수 drop (이벤트)을 호출합니다.
1 2 3 4 5 | function drop(ev) { ev.preventDefault(); var data = ev.dataTransfer.getData("text"); ev.target.appendChild(document.getElementById(data)); } | cs |
Code explained:
설명 된 코드 :
Call preventDefault() to prevent the browser default handling of the data (default is open as link on drop)
데이터의 브라우저 기본 처리를 방지하려면 preventDefault ()를 호출하십시오 (기본값은 드롭 다운 링크로 열림)
Get the dragged data with the dataTransfer.getData() method. This method will return any data that was set to the same type in the setData() method
dataTransfer.getData () 메소드를 사용하여 드래그 된 데이터를 가져옵니다. 이 메서드는 setData () 메서드에서 동일한 유형으로 설정된 모든 데이터를 반환합니다.
The dragged data is the id of the dragged element ("drag1")
드래그 된 데이터는 드래그 된 요소의 ID입니다 ( "drag1").
Append the dragged element into the drop element
드래그 한 요소를 드롭 요소에 추가합니다.
More Examples
추가 예제
Drag image back and forth
이미지를 앞뒤로 드래그
How to drag (and drop) an image back and forth between two <div> elements:
두 개의 <div> 요소 사이에서 이미지를 앞뒤로 드래그 (및 놓기)하는 방법 :
'HTML' 카테고리의 다른 글
| [R]HTML5 웹 작업자(HTML5 Web Workers) (0) | 2018.07.23 |
|---|---|
| [R]HTML5 웹 저장소(HTML5 Web Storage) (0) | 2018.07.22 |
| [R]HTML5 Geolocation (0) | 2018.07.20 |
| [R]HTML YouTube 동영상(HTML YouTube Videos) (0) | 2018.07.19 |
| [R]HTML 플러그인(HTML Plug-ins & object & embed) (0) | 2018.07.18 |