이러한 인터페이스를 자체 디자인에 구현할 수 있는 창의적인 방법에는 여러 가지가 있습니다. 드래그 앤 드롭 UI의 10가지 독특한 예를 살펴보겠습니다: 드래그 앤 드롭은 수십 년 동안 우리와 함께 해왔습니다. 데스크톱 과 모바일 앱과 운영 체제 모두에서 작업을 수행하는 데 도움이됩니다. 단순성과 직관적인 기능으로 인해 가장 보편적인 UI 기능 중 하나가 되었습니다. 끌어서 놓기 UI가 웹 사이트의 사용자 친화성에 도움이 될 수 있는 방법에는 여러 가지가 있습니다. 위의 예제에서는 이 익숙한 기능을 사용하여 프로젝트를 향상시키는 방법에 대한 몇 가지 영감을 제공할 수 있기를 바랍니다. 열 샘플의 흥미로운 점은 열이 끌기 소스와 놓기 대상이라는 것입니다. 더 일반적인 시나리오는 소스 및 대상 요소가 다를 수 있도록 하는 것입니다. 데모는 html5demos.com/drag 참조하십시오. 팁: 드래그 가능 속성을 드래그 가능=”true”와 같이 드래그 가능한 속성을 true로 설정하여 요소를 드래그할 수 있도록 할 수 있습니다. 그러나 대부분의 브라우저에서 href 특성이 있는 텍스트 선택, 이미지 및 앵커 요소는 기본적으로 드래그할 수 있습니다. 우선: 요소를 끌어낼 수 있도록 하려면 드래그 가능한 속성을 true로 설정합니다: 드래그 피드백 이미지에 대해 자세히 알아보려면 피드백 이미지 끌기 설정을 참조하세요.

각 이동에 대해 약간 더 세련되고 카운터가 있는 최종 제품: 각 드래그 이벤트 유형에는 실제 드롭을 처리하려면 놓기 및 dragend 이벤트에 대한 이벤트 수신기를 추가합니다. 이 처리기에서는 일반적으로 성가신 리디렉션의 일종인 드롭에 대한 브라우저의 기본 동작을 방지해야 합니다. e.stopPropagation()을 호출하여 이벤트가 DOM을 부글부글 부글부글 올리는 것을 방지할 수 있습니다. 사용자가 개체를 드래그하는 동안 마우스 단추를 해제하면 발생합니다. 그것은 재미, 하지만 꽤 좌절 주차로. 이를 실현하기 위해 몇 가지 규칙을 만들어야 합니다. 드래그 가능한 요소가 있으면 ondragstart 이벤트 처리기를 호출하고 원하는 대로 수행하는 함수를 전달할 수 있습니다. 드롭 존 건물에 더 많은 차량을 추가하려고 할 때 상황은 더욱 복잡해지고 있었습니다.

PC에서 Win7에서 나는 몇 가지 브라우저 차이 발생 하 고 (나를 위해) CodePen #2 이상한 현상. 삭제된 이미지의 크기와 비율(확률/비례 아님)이 분기됩니다. – 기존 떨어뜨린 전차 위에 떨어뜨리면 그 중 하나가 사라집니다. – 그리고 사라진 차량 (개발자 도구에 따라: 뿐만 아니라 html-DOM에서 제거) 다시 가져올 수 있습니다 (!) 드래그 하 고 다시 기존 verhicle를 삭제 하 여, 드롭 영역의 다른 장소에. hocus 포커스는 스크립트의 어딘가에 있어야합니다. 자바 스크립트 영웅이 아니기 때문에 어떻게 볼 수 없습니다. 놓기 이벤트는 끌기 작업이 끝날 때 드롭이 발생한 요소에서 발생합니다. 수신기는 드래그되는 데이터를 검색하고 놓기 위치에 삽입해야 합니다.