드래그 앤 드롭 양식을 사용하고 싶기 때문에 개인적으로 직접 수행하는 것을 선호하며 구현이나 원칙을 이해하지 않고 플러그인을 사용하는 것을 좋아하지 않으므로 구현할 정보를 찾았습니다.
아이디어 : Mousedown을 사용하여 마우스 클릭 위치가 트리거 제어에 있는지 확인하십시오. 그렇다면 MouseMove가 컨트롤을 복제하고 투명성을 수정 한 다음 컨테이너에 넣을 때 컨트롤을 제거하고 컨테이너에 퍼팅을 생성합니다 (배치 제어 및 트리거 제어가 다를 수 있습니다).
드래그 앤 드롭 : 마찬가지로, Mousedown이 사용될 때 어떤 컨트롤인지 결정하십시오. MouseMove는 자리 표시 자 DIV를 원래 위치에 넣고 요소의 투명성을 수정하고 드래그를 용이하게하기 위해 절대 위치로 설정해야합니다. 드래그 할 때 자리 표시 자 DIV도 마우스 위치에 따라 변경됩니다 (현재 마우스 위치가 컨테이너의 컨트롤의 왼쪽 상단 모서리와 컨트롤 높이의 절반인지 판단). 그것을 내려 놓을 때, 자리 표시 자 Div의 위치는 그것을 삽입하는 데 사용됩니다. 코드를 자세히 살펴 보겠습니다. 이 아이디어에 의해 추가 된 시간은 코드가 구현 된 이후 약간 오래되었습니다. 모두 정확하지는 않지만 이것이 일반적인 아이디어입니다.
추신 : 드래그 앤 드롭 양식 함수를 사용하려면 기본적으로 이전 설계 데이터베이스 메소드를 변경해야 할 수도 있습니다. 여기서 검색 키워드 목록의 수직 저장을 제공 할 수 있습니다.
주석은 기본적으로 자세히 작성되었으며 코드에 올려 놓았습니다.
궁금한 점이 있으면 조언을 해주세요.
<! doctype html> <html> <head> <title> test </title> <style type = "text/css"> html, body {height : 100%; 너비 : 100%; 패딩 : 0; 여백 : 0; } .dialog { /* 너비 : 250px; 높이 : 250px;*/ 위치 : 절대; 배경색 : #CCC; -webkit-box-shadow : 1px 1px 3px #292929; -Moz-Box-Shadow : 1px 1px 3px #292929; Box-Shadow : 1px 1px 3px #292929; /*마진 : 10px;*/ top : 50px; 왼쪽 : 50px; 불투명도 : 1; } .dialog-title {색상 : #ffff; 배경색 :#404040; 글꼴 크기 : 12pt; 글꼴 중량 : 대담한; 패딩 : 4px 6px; 커서 : 이동; 위치 : 절대; 상단 : 50px; 왼쪽 : 50px; } .dialog-content {패딩 : 4px; 커서 : 이동; } .none {디스플레이 : 없음; } .box {너비 : 200px; 높이 : 500px; 배경색 : 회색; 라인 높이 : 30px; 여백 : 100px; }. 장소 {너비 : 200px; 높이 : 50px; 테두리 : 1px 점선 빨간색; } </style> <script type = "text/javaScript"src = "js/devwin.js"> </script> </head> <body> <!-<div id = "dlgtest">-> <div id = "title"> Div div> <div id = "title2"style = "top : 10px"> </div> <a <a <a <a <a <a.> <aid "> href = "#"> 123 </a> <input id = "text"type "type"type = "text"class = "none"> <div id = "box"class = "box"> <input type = ""name = ""placeHolder = "" ">-> </div> <div class ="place "> </div> </body> <text/javascript"> // JavaScript on in in in trored " 객체 var click = document.getElementById ( "title"); var click2 = document.getElementById ( "Title2"); // 배치 된 컨테이너 var box = document.getElementById ( "box"); // 컨테이너의 div var 장소 = document.createElement ( "div"); place.className = "장소"; // 컨테이너에 추가 된 객체 var create = document.createElement ( "input"); create.type = "텍스트"; var create2 = document.createElement ( "입력"); create2.type = "비밀번호"; // 여러 vars ismany = true를 추가 할 수 있습니까? CreateWin (클릭, Create, Ismany, Place, Box); CreateWin (Click2, Create2, Ismany, Place, Box); </script> </html> /*** 저자 : LZH* 기능 : 드래그 앤 드롭 정렬 양식 구현* 매개 변수 : OCLICK 이벤트를 트리거하는 객체* 출발 후 양식에 전달 된 객체를 클릭하십시오* BINGANY는 여러 개의 ocReate 객체로 드래그 할 때 단일 oclick 객체를 여러 개의 옥상 대상으로 끌 수 있습니다. CreateWin (oclick, ocreate, bismany, place, obox = document.body) {// 트리거 객체가 클릭되었는지 var isclick = false; // 트리거 객체가 컨테이너의 요소인지 var isincludebox = false; space.style.width = obox.offsetwidth-5 + "px"; place.style.height = oclick.offsetheight-5 + "px"; // 이동 효과의 임시 요소 var orclickclone; var oclickdown; // 오프셋 var diffobj를 계산합니다. var diffx; var diffy; var tmp; var omove_position; // 컨테이너 함수 isinclude (x, y, includebox = obox) {if (x> includebox.offsetleft && y> includebox.OffSetTop && includebox.OffSetLeft.OffSetLeft.OffSetWidth && y <includebox.offsetTop + contact box.OffSetheight) retud true; 거짓을 반환합니다. } // 효과 이동 함수 기능 moveMeMagic (omove, e) {// omove_position = wind Omove.style.opacity = 0.4; Omove.style.position = "절대"; document.body.appendChild (Omove); Omove.style.left = e.clientx-diffx+"px"; Omove.style.top = E.Clienty-diffy+"px"; } 함수 getDiff (e) {diffobj = e.target; diffx = e.clientx-diffobj.offsetleft; diffy = e.clienty-diffobj.offsettop; } // 마우스 프레스 이벤트 함수 아래 (e) {if (isinclude (e.clientx, e.clienty, oclick)) {isclick = true; // 클릭의 트리거 노드를 클론 OCLICKCLONE = OCLICK.CLONENODE (true); // 마우스의 오프셋을 계산합니다 (여백이 있으면 오프셋이있을 경우) getDiff (e); } else {getDiff (e); var child = obox.childnodes; for (var i = 0; i <child.length; i ++) {// 마우스 클릭이 컨테이너의 요소이고 자리 표시 자 Div가 될 수 없는지 판단합니다 (이 자리 표시 자 div를 추가하지 않으면 버그가 될 것입니다. 그러나 특정 이유는 알려져 있지 않지만 (e.clientx, e.clienty, child [i]) && child [i]! isincludebox = true; // 클로닝 요소의 효과는 OclickClone = child [i] .clonenode (true)를 드래그하는 데 사용됩니다. // 클론 요소는 OCLICKDOWN = child [i] .Clonenode (true)를 내려 놓는 데 사용됩니다. // 누른 후, 요소를 삭제하고 움직이는 효과를 사용하여 요소 Obox.RemoveChild (child [i])를 표시합니다. movemagic (Oclickclone, e); // 자리 표시 자 Div를 삽입하여 obox.insertbefore (place, child [i]); // flag = true; 부서지다; }}}}} // 마우스 이동 이벤트 함수 이동 (e) {if (isclick) {movemagic (oclickclone, e); // 마우스가 컨테이너 내부로 이동했는지 여부를 결정합니다. if (isinclude (e.clientx, e.clienty, obox)) {// 컨테이너 var child = obox.childnodes; // 일단 들어가면, 자리 표시 자 DIV를 첫 번째 위치 Obox.insertbefore (Place, Child [0])에 삽입 할 수 있습니다. // (var i = 0; i <child.length; i ++) {// 자리 표시 자 div가 독특하기 때문에 (e.clienty> child [i] .OffSetTop+child [i] .OffSetHeight/2) {// end if로 끌려 갈지 여부 (i! = lengther-1). Obox.insertbefore (장소, 자식 [i+1]); else obox. AppendChild (장소); }}}}}} // 마우스 리프트 이벤트 함수 업 (e) {isclick = false; // 마우스가 올라가고 임시 드래그 효과 요소를 삭제할 수 있습니다. // 요소가 컨테이너에 배치 된 경우 if (isinclude (e.clientx, e.clienty)) {var child = obox.childnodes; // 자리 표시 자 Div var 삽입 장소의 위치; for (var i = 0; i <child.length; i ++) {// 자리 표시 자 Div의 위치를 결정합니다. 삽입 장소 = i; 부서지다; }} // 다중 배치 할 수 있는지 판단 (! bismany) {if (isincludebox) ocreate = oclickdown; if (insertplace == child.length) obox.appendChild (ocreate); else obox.insertbefore (ocreate, child [insertplace]); } else {// 여러 배치를 배치 할 수 있으므로 (isincludebox) var ocreateclone = oclickdown; else var var oreateclone = ocreate.clonenode (true); if (insertplace == child.length) obox.appendChild (ocreateclone); else {obox.insertbefore (ocreateclone, child [insertplace]); }}} else {if (isincludebox) {var child = obox.childnodes; for (var i = 0; i <child.length; i ++) {if (child [i] === place) {obox.removechild (child [i]); Obox.insertbefore (Oclickdown, Child [i]); } 1}}} isincludebox = false; } document.addeventListener ( 'MousEmove', Move); document.addeventListener ( 'Mousedown', Down); document.addeventListener ( 'MouseUp', UP);}Pure JS 구현의 위의 간단한 예는 드래그 앤 드롭 양식입니다. 나는 당신이 당신에게 참조를 줄 수 있기를 바랍니다. 그리고 당신이 wulin.com을 더 지원할 수 있기를 바랍니다.