HTML5에서 드래그 앤 드롭 API를 연습하여 목록 드래그 앤 드롭 이동을 실현하십시오! 참조 기사 : JS HTML5 드래그 앤 드롭 업로드 이미지 미리보기
HTML5 DRAR DROP 모바일 목록 구현 :
1. 각 어린이의 드래그 가능한 속성을 설정하고 드래그 마크를 설정하려면 루프 (한 명 이상의 어린이 이상이 움직일 것입니다)
2. 배달 영역에 들어갈 때마다 감지 중에 드래그 앤 드롭 마크가 있으며 DOM 요소를 추가하십시오.
또 다른 구현 아이디어는 다음과 같습니다. Datatransfer 객체를 드래그 앤 드롭에서 속성으로 사용하고 SetData () 및 getData () 메소드를 사용하여 각 드래그 된 자식의 ID를 전달하고 지정된 자식이 실험으로 이동할 수 있습니다. . .
HTML :
// 빈 목록 <div id = "box"> </div> // 컨텐츠 목록 <ul id = "con"> <li> 항목 1 </li> <li> 항목 2 </li> <li> 항목 3 </li> <li> 항목 4 </li> </ul>
JS :
<cript> function $ (id) {return document.getElementById (id); } var con = $ ( "con"); var box = $ ( "box"); var lidoms = document.getElementsByTagName ( "li"); var i = 0, len = lidoms.length; // 각 어린이의 드래그 가능한 속성을 설정하고 (; i <len; i += 1) {lidoms [i] .Draggable = 'true'; lidom [i] .flag = false; lidoms [i] .ondragstart = function () {this.flag = true; }; lidoms [i] .ondragend = function () {this.flag = false; }; } // trender event $ ( "box"). ondragenter = function (e) {e.preventDefault (); Console.log ( 'Entry'); }; $ ( "box"). ondragover = function (e) {e.preventDefault (); Console.log ( 'Move'); }; $ ( "box"). ondragleave = function (e) {e.preventDefault (); Console.log ( 'Leave'); }; $ ( "box"). ondragleave = function (e) {e.preventDefault (); for (var i = 0; i <lidoms.length; i += 1) {if (lidoms [i] .flag) {box.appendchild (lidoms [i]); }} console.log ( 'success'); }; // 송어 영역 이벤트 $ ( "con"). ondrager = function (e) {e.preventDefault (); Console.log ( 'Enter'); }; $ ( "con"). ondragover = function (e) {e.preventDefault (); Console.log ( 'Move'); }; $ ( "con"). ondragover = function (e) {e.preventDefault (); Console.log ( 'Leave'); }; $ ( "con"). ondrop = function (e) {e.preventDefault (); for (var i = 0; i <lidoms.length; i += 1) {if (lidoms [i] .flag) {// 현재 상자 객체는 원래 컨테이너의 Li가 아닌 Li입니다. $ ( "con"). AppendChild (Lidoms [i]); }} console.log ( 'success'); }; </스크립트>생식 이미지 :
위의 내용은이 기사에 관한 모든 것입니다. 모든 사람의 학습에 도움이되기를 바랍니다.