html 드래그 앤 드롭 예제

| 0

이러한 인터페이스를 자체 디자인에 구현할 수 있는 창의적인 방법에는 여러 가지가 있습니다. 드래그 앤 드롭 UI의 10가지 고유한 예제를 살펴보겠습니다. 위의 예제에서는 이 익숙한 기능을 사용하여 프로젝트를 향상시키는 방법에 대한 몇 가지 영감을 제공할 수 있기를 바랍니다. 드래그 앤 드롭은 수십 년 동안 우리와 함께하고있다. 데스크톱 과 모바일 앱과 운영 체제 모두에서 작업을 수행하는 데 도움이됩니다. 단순성과 직관적인 기능으로 인해 가장 보편적인 UI 기능 중 하나가 되었습니다. 드롭 존 건물에 더 많은 차량을 추가하려고 할 때 상황은 더욱 복잡해지고 있었습니다. PC에서 Win7에서 나는 몇 가지 브라우저 차이 발생 하 고 (나를 위해) CodePen #2 이상한 현상. 삭제된 이미지의 크기와 비율(확률/비례 아님)이 분기됩니다. – 기존 떨어뜨린 전차 위에 떨어뜨리면 그 중 하나가 사라집니다.

– 그리고 사라진 차량 (개발자 도구에 따라: 뿐만 아니라 html-DOM에서 제거) 다시 가져올 수 있습니다 (!) 드래그 하 고 다시 기존 verhicle를 삭제 하 여, 드롭 영역의 다른 장소에. hocus 포커스는 스크립트의 어딘가에 있어야합니다. 자바 스크립트 영웅이 아니기 때문에 어떻게 볼 수 없습니다. 열 샘플의 흥미로운 점은 열이 끌기 소스와 놓기 대상이라는 것입니다. 더 일반적인 시나리오는 소스 및 대상 요소가 다를 수 있도록 하는 것입니다. 데모는 html5demos.com/drag 참조하십시오. 알고 보니, 그 중 많은 것이 보풀입니다. 실제 코드는 가장 예쁜 방법은 아니지만 자바 스크립트 길이가 약 30 줄입니다. 당신이들을 수있는 세 가지 드래그 관련 이벤트가 있지만 우리는 단지 두 가지를 사용하려고 : 드래그 스타트 및 드래그 엔드. 우리는 종종 양식과 함께 사용되는 드래그 앤 드롭을 참조하십시오.

중력 양식 같은 워드 프레스 플러그인 마음에 온다, 어디 필드를 추가 하 고 매우 직관적으로 재배치. 여기서는 HTML5 및 Angular.js를 사용하는 양식 빌더 UI가 있습니다. DnD API를 사용하면 데스크톱에서 브라우저 창의 웹 앱으로 파일을 끌 수 있습니다. 이 아이디어의 확장으로, 구글 크롬은 바탕 화면에 브라우저에서 파일 개체를 드래그 하는 기능을 지원. 놓기 이벤트는 끌기 작업이 끝날 때 드롭이 발생한 요소에서 발생합니다. 수신기는 드래그되는 데이터를 검색하고 놓기 위치에 삽입해야 합니다. 각 끌기 이벤트에는 이벤트의 데이터를 포함하는 dataTransfer 속성이 있습니다. 이 속성(DataTransfer 개체)에는 드래그 데이터를 관리하는 메서드도 있습니다. setData() 메서드는 다음 예제와 같이 끌어놓기 데이터에 항목을 추가하는 데 사용됩니다.

소방차, 구급차, 자동차, 자전거 등 4대의 차량에 대한 이미지를 설정하는 HTML부터 시작하겠습니다. 콘텐츠에 정의된 draggable=”true” 특성이 있으면 드래그 스타트 이벤트 처리기를 첨부하여 각 열에 대한 DnD 시퀀스를 시작합니다. 가능한 값은 없음, 복사, 링크 및 이동입니다. 드롭 대상이 드롭을 수락할지 여부를 결정하는 데 사용되는 dragenter 이벤트입니다. 드롭을 수락하려면 이 이벤트를 취소해야 합니다. 드래그 앤 드롭(DnD)은 강력한 사용자 인터페이스 개념으로 마우스 클릭을 통해 항목을 쉽게 복사, 재정렬 및 삭제할 수 있습니다. 이렇게 하면 사용자가 요소 위로 마우스 단추를 클릭하고 길게 누를 수 있고, 다른 위치로 드래그한 다음 마우스 단추를 놓아 요소를 삭제할 수 있습니다.

Follow admin:

Latest posts from