Code language: HTML, XML (xml)

Code language: CSS (css)

, cssstyle.css div> 폴더, drag-n-drop-basics 폴더의 index.html

셋째,

및 다음과 같이 index.html 파일의 app.js에 연결되는 스크립트 태그 :

index.html 파일 빌드

index.html 파일에 다음 코드를 배치합니다.

이 index.html 파일에서 .container 요소를 사용하여 제목과 drop-targets 요소를 정렬했습니다.

drop-targets 요소 내부에서 동일한 클래스 box로 세 개의 div 요소를 배치했습니다. 그리고 첫 번째 상자에 item 클래스가있는 다른 div 요소를 배치합니다.

index.html를 열고 노란색 상자를 드래그하면 드래그 할 수 없음을 나타내는 커서가 표시됩니다.

요소를 드래그 가능하게 만들려면 true 값으로 draggable 속성을 추가합니다. 다음과 같이 HTML 태그에 추가합니다.

Code language: JavaScript (javascript)

이제 index.html를 저장하면 브라우저에서 엽니 다. 다시, 다음과 같이 항목 요소를 드래그 할 수 있습니다.

드래그 가능한 요소에서 이벤트 처리

style.css 파일에는 .hide가 있습니다. 요소를 숨기는 클래스 :

Code language: CSS (css)

app.js 파일에 다음 코드를 추가합니다.

어떻게 작동 :

• 먼저 querySelector()를 사용하여 드래그 가능한 요소를 선택합니다.
• 두 번째, 이벤트 핸들러를 드래그 가능한 요소에 추가합니다.
• 세 번째로 dragStart() 함수를 정의하여 dragstart 이벤트.

index.html 파일을 열고 드래그 가능한 요소를 드래그하기 시작하면 drag starts... 메시지가 콘솔.

dragStart 이벤트 핸들러에서 드래그 가능한 요소의 id를 저장해야합니다. 그리고 숨겨야합니다.

요소를 드래그하면 드래그를 시작하면 사라집니다.

이 문제를 해결하려면 setTimeout() 함수 :

이제 드래그 가능한 요소를 원래 위치에서 드래그 할 수 있습니다.

놓기 대상에서 이벤트 처리

style.css 파일에는

:

Code language: CSS (css)

app.js에서 놓기 대상 요소를 선택하고 dragenter, dragover, dragleave 및 drop 이벤트 :

dragenter 및

이벤트가 발생합니다. dragleave 및 drop 이벤트가 발생하면 스타일을 복원해야합니다.

이렇게하려면 추가 및 제거합니다. drag-over 클래스를 다음과 같이 drop 대상으로 :

이제 드래그 가능한 요소를 다른 드롭으로 드래그하면 target에서 드롭 대상의 테두리가 다음 그림과 같이 변경되는 것을 볼 수 있습니다.

드롭 타겟을 유효하게하려면 dragenterevent.preventDefault()를 호출해야합니다. > 및 dragover 이벤트 핸들러는 다음과 같습니다.

이렇게하지 않으면 drop 이벤트가 발생하지 않습니다. div 요소는 기본적으로 유효한 놓기 대상이 아니기 때문에 실행됩니다.

드래그 가능한 요소를 놓기 대상으로 드래그하면 커서가 요소를 삭제할 수 있음을 나타내는 변경 사항 :

이제 항목 요소를 드롭하면 즉시 사라지는 것을 볼 수 있습니다.

이 문제를 해결하려면 문제가 발생하면 drop 이벤트 처리를 추가해야합니다.

• 먼저, iv id의 getData() 메소드를 사용하여 드래그 가능한 요소의 id를 가져옵니다. = “cafe64ce48″>