html5 드래그 앤 드롭 API를 드래그 앤 드롭 정렬을위한 예제 코드를 구현합니다.

HTML5는 직접 드래그 및 드롭 API를 제공합니다. 이는 드래그 앤 드롭 효과를 달성하기에 매우 편리합니다. 다양한 드래그 앤 드롭 기능을 달성합니다.

특정 요소를 드래그하고 삭제하려면 속성이 False 일 때 요소의 드래그 가능한 속성을 설정해야합니다. IMG 요소와 요소는 Draggable 속성으로 True로 설정되어 있으며이 두 요소를 드래그하고 떨어 뜨려 놓을 수 있습니다.

드래그 앤 드롭 사고는 다른 요소에 의해 생성됩니다. 요소가 드래그 및 떨어지고 결국 많은 요소에 배치하고자하는 요소에 도달 할 수 있습니다. 여기서 나는 드래그 앤 드롭의 요소와 프로세스의 요소를 일시적으로 언급하며, 내가 도달 한 요소를 대상 객체라고합니다. 객체마다 드래그 앤 드롭 이벤트가 다릅니다.

소스 개체 :

1. 드래그 스타트 : 소스 객체가 드래그 앤 드롭을 시작합니다.
2. 드래그 : 소스 객체의 드래그 앤 드롭 중에.
3. 드래그 : 소스 객체 드래그 앤 드롭.

프로세스 개체 :

1. Dragenter : 소스 객체가 프로세스 범위에 들어가기 시작합니다.
2. 드래그 오버 : 소스 객체는 프로세스 범위 내에서 이동합니다.
3. 드래그 리브 : 프로세스를 떠나는 소스의 객체의 범위.

대상 개체 :

1. 드롭 : 소스 객체가 드래그되어 대상 객체로 떨어집니다.

 <div id = source draggable = true> a 요소 </div> <div id = process> b 요소 </div> <div id = target> c 요소 </div> <cript> var source = document.getElementById '( '소스'), // 요소 proces = document.getElementById ( 'process'), // b 요소 target = gelementById ( 'target'); DragStart 이벤트는 A Console.log를 생성하기 위해 요소에 의해 생성됩니다 ( '요소가 드래그가 시작됩니다');}, false) proces.addeventristener ( 'dragner', function (ev) {// dragenter event는 b에 의해 생성됩니다. log. log ( '요소가 요소에 들어가기 시작한다');}, false) proces.addeventristener ( 'dragleave', function (ev) {// dragleave 사건 ( '요소 b 요소');} , false) target.adeventListener ( 'drop', function (ev) {// drop event는 console.log ( 'a 요소의 요소')에 의해 생성됩니다. );} </script>

데이터 전송 객체 DataTransfer는 모든 드래그 및 드롭 이벤트에 제공되어 소스 객체와 대상 객체간에 데이터를 전달합니다. 다음 으로이 객체의 방법과 속성을 알아 보면 데이터가 전송되는 방법을 이해하십시오.

이 방법은 datatransfer 객체에 저장됩니다. 두 개의 매개 변수를 수신합니다. 첫 번째 매개 변수는 데이터 유형을 저장하는 문자열을 나타내며 이제 다음을 지원합니다.

1. 텍스트/평원 : 텍스트 텍스트.
2. 텍스트/html : html 텍스트.
3. 텍스트/XML : XML 텍스트.
4. Text/uri-list : URL 목록, 각 URL은 한 줄입니다.

두 번째 매개 변수는 저장할 데이터입니다. 예를 들어:

 event.datatransfer.setData ( 'Text/Plain', 'Hello World');

이 메소드는 Datatransfer 객체의 데이터를 읽습니다. 매개 변수는 setData에 지정된 데이터 유형입니다. 예를 들어:

 event.datatransfer.getData ( 'text/plain');

이 방법은 Datatransfer 객체에 저장된 데이터를 제거합니다. 매개 변수는 데이터 유형의 선택 사항입니다. 매개 변수가 비어 있으면 모든 유형의 데이터를 지우십시오. 예를 들어:

 event.datatransfer.clearData ();

이 방법은 IMG 요소를 사용하여 아이콘을 드래그 앤 드롭하도록 설정되었습니다. 세 가지 매개 변수를 수신하고, 첫 번째는 아이콘 요소이고, 두 번째는 마우스 포인터에서 아이콘 요소의 x 축 변위이고, 세 번째는 마우스 포인터에서 아이콘 요소의 y 축 변위입니다. 예를 들어:

 var source.getElementById ( 'source'), icon = createelement ( 'img'); 10, -10)}, false)

이 두 속성은 드래그 앤 드롭의 시각적 효과를 설정하기 위해 결합되어 있습니다.

IE가 Datatransfer 객체를 지원하지 않는다는 점은 주목할 가치가 있습니다. 예, 어떤 IE 버전이 지원되는지 상관 없습니다.

드래그 앤 드롭 API의 사용은 이미 위의 것들에 익숙합니다. 먼저 아이디어를 살펴 보겠습니다.

1. 한 목록에서 각 요소를 드래그 및 떨어 뜨릴 수 있으며 드래그 가능한 속성은 각 요소에 대해 true로 설정됩니다.
2. 소스 객체의 스타일을 구별하기 위해 각 요소의 드래그 스타트 이벤트를 측량합니다.
3. 각 요소의 Dragenter 이벤트를 모니터링 할 때 소스 객체가 현재 요소에 들어가면 소스 객체가 요소 앞에 추가됩니다. 이런 식으로, 그 뒤에있는 요소는 소스 객체에 의해 압박되어 분류 효과를 달성합니다.
4. 그러나 소스 객체는 마지막 객체로 순위가 매겨 질 수 없으며 두 번째 객체 만 두 번째 객체 일 수 있습니다. 현재 Dragleave 이벤트가 모니터링됩니다. 프로세스 객체가 마지막 요소 인 경우 소스 객체는 프로세스 객체를 남기고 소스 객체를 끝에 추가합니다.

기본 코드는 다음과 같습니다.

 var source = queryselectiverall ( '. list'), dragelement = null (var i = 0; i <source.length; i ++) {소스 [i] .addeventListener ( 'dragstar t', function (ev). ) {dragelement = this;}, false); [i] .addeventListener ( 'dragleave', function (ev) {if (dragelement! = this) {if (this == this.parentNode.LastElementChildChild || this.parentNod E.LastChild) {this.parentNode.AppendChild );}}, false)};

전체 코드 주소 : 드래그 데모

그것은 주로 IE에서 호환되지만 적어도 IE10에서 드래그 및 분류 할 수 있습니다.

그리고 간단한 테스트에서 요소가 IE에 설정되지 않으면 Dragleave 이벤트가 트리거되지 않습니다.

더 중요한 점은 iOS와 Android에서 완전히 호환되지 않습니다. 다행히도 모바일 엔드에서 완벽하게 호환되도록 플러그 인이 있습니다.

플러그인 주소 : iOS-HTML5-DRAG-DROP-SHIM

모바일 터미널에서 드래그하려면 원래 코드에 플러그 인을 소개하면됩니다.

 <cript> var iosdragdropshim = {enablenerlave : true} </script> <script src = vendor/ios-drop.js> </script>

위는이 기사의 모든 내용입니다.