Da ich Drag-and-Drop-Formulare verwenden möchte, bevorzuge ich es persönlich, es selbst zu tun und nicht gerne Plug-Ins zu verwenden, ohne die Implementierung oder Prinzipien zu verstehen. Daher fand ich Informationen, um eine zu implementieren.
Idee: Verwenden Sie MouseDown, um festzustellen, ob sich die Mausklickposition an der Triggersteuerung befindet. Wenn ja, wenn ja, wenn Sie Mousemove einsetzen, eine Steuerung klonen, die Transparenz ändern und dann in den Behälter eingesetzt werden, entfernen Sie die Steuerung und generieren Sie einen in den Container eingestellten (die platzierte Steuerung und die Triggersteuerung können unterschiedlich sein).
Ziehen und Drop: In ähnlicher Weise bestimmen Sie, welche Kontrolle es ist, wenn MouseDown verwendet wird. Bei Mousemove müssen Sie eine Platzhalter -Div in die ursprüngliche Position einsetzen und die Transparenz des Elements ändern und in die absolute Position setzen, um das Ziehen zu erleichtern. Beim Ziehen ändert sich auch die Platzhalter -Div entsprechend der Mausposition (gemessen, ob die aktuelle Mausposition die obere linke Ecke des Steuerelements im Container sowie die Hälfte der Höhe der Steuerung ist). Beim Ablegen wird die Position der Platzhalter -Div zum Einfügen verwendet. Schauen wir uns den Code im Detail an. Die Zeit, die diese Idee hinzugefügt hat, ist ein bisschen lange her, seit der Code implementiert wurde. Alle sind vielleicht nicht sehr genau, aber dies ist die allgemeine Idee.
PS: Wenn Sie die Funktion "Drag & Drop -Formular" verwenden möchten, müssen Sie möglicherweise die vorherige Entwurfsdatenbankmethode ändern. Hier können wir Ihnen einen vertikalen Speicher von Suchschlüsselwortlisten zur Verfügung stellen.
Die Kommentare wurden im Grunde genommen ausführlich geschrieben. Setzen Sie sie einfach in den Code.
Wenn Sie Fragen haben, geben Sie mir bitte einen Rat.
<! DocType html> <html> <kopf> <titels> Test </title> <style type = "text/css"> html, Körper {Höhe: 100%; Breite: 100%; Polsterung: 0; Rand: 0; } .dialog { /* width: 250px; Höhe: 250px;*/ Position: absolut; Hintergrundfarbe: #CCC; -Webkit-box-shadow: 1px 1px 3px #292929; -moz-box-shadow: 1px 1px 3px #292929; Box-Shadow: 1PX 1PX 3PX #292929; /*Margin: 10px;*/ Top: 50px; links: 50px; Deckkraft: 1; } .dialog-title {color: #ffff; Hintergrundfarbe:#404040; Schriftgröße: 12pt; Schriftgewicht: fett; Polsterung: 4px 6px; Cursor: Bewegung; Position: absolut; Top: 50px; links: 50px; } .dialog-content {padding: 4px; Cursor: Bewegung; } .none {display: keine; } .box {width: 200px; Höhe: 500px; Hintergrundfarbe: Grau; Zeilenhöhe: 30px; Rand: 100px; } .PLACE {width: 200px; Höhe: 50px; Grenze: 1PX gestrichelt rot; } </style> <script type = "text/javaScript" src = "js/devwin.js"> </script> </head> <body> <!-<div id = "dlgtest">-> <div id = "title"> dialog </div id = "title2" style = "top: 10px"> ">"-"DiviG"-"-</"-</"-<"-<"-" a id "-" a id ""> ">"> "DiviG </div> <"-</"-</"-"-" <"-" A. href = "#"> 123 </a> <input id = "text" type = "text" class = "none"> <div id = "box" class = "box"> <!-<input type = "" name = "" placeholder = "">-> </div> <div class = "place"> </tecry> <script type = "stex. = document.getElementById ("Titel"); var click2 = document.getElementById ("title2"); // Der Container platzierte var box = document.getElementById ("Box"); // DIV VAR Place im Container = document.createelement ("div"); place.classname = "place"; // Das Objekt, das dem Container var create = document.createelement ("input") hinzugefügt wurde; create.type = "text"; var create2 = document.createelement ("Eingabe"); create2.Type = "Passwort"; // ist es möglich, mehrere Vars isMany = true hinzuzufügen; Createwin (klicken, erstellen, ismany, Ort, Box); CreateWin (Click2, create2, ismany, Ort, Box); </script> </html> /*** Autor: LZH* Funktion: Drag-and-Drop-Sortierform-Implementierung* Parameter: Oclick Klicken Sie auf das Objekt, das das Ereignis auslöst. Createwin (Oclick, Ocreate, Bismany, Ort, obox = document.body) {// ob das Triggerobjekt angeklickt wurde auf var isclick = false; // ob das Triggerobjekt ein Element im Container var isincludeBox = false ist; Space.Style.Width = Obox.OffsetWidth-5 + "PX"; place.style.height = oclick.offseteight-5 + "px"; // Temporäres Element des beweglichen Effekts var Oclickclone; var oclickdown; // Berechnen Sie den offset var diffobj; var diffx; var diffy; var tmp; var omove_position; // ist der Punkt, der in der Containerfunktion Issinclude (x, y, includeBox = obox) {if (x> includeBox.OffsetLeft && y> includeBox.Offsettop && x <eingänzungsbox.Offsetleft + includex.offsetwidth && y <includex.offsettop + includex.offsethight) enthalten ist. false zurückgeben; } // Move Effect Function Function Function Movemagic (Omove, e) {// omove_position = window.getComputedStyle (Omove) .getPropertyValue ('Position'); Omove.Style.Opacity = 0,4; omove.style.position = "absolut"; document.body.appendchild (omove); omove.style.left = e.clientx-diffx+"px"; omove.Style.top = e.clienty-diffy+"px"; } function getDiff (e) {diffObj = e.target; diffx = e.clientx-diffobj.offsetleft; diffy = e.clienty-diffobj.offsettop; } // Mouse Press Ereignisfunktion Down (e) {if (isinclude (e.clientx, e.clienty, oclick)) {isclick = true; // Klonen Sie den Triggerknoten des Klicks oclickclone = oclick.clonenode (true); // Berechnen Sie den Offset der Maus (falls es Rand gibt, es wird einen Offset geben) getDiff (e); } else {getDiff (e); var child = obox.childnodes; for(var i=0; i < child.length; i++) { //Judge whether the mouse click is an element in the container and cannot be a placeholder div (If you do not add this placeholder div, it will be a bug, but the specific reason is not known) if(isInclude(e.clientX,e.clientY,child[i])&& child[i] != place) { isClick = true; isincludeBox = true; // Der Effekt des Klonierungselements wird verwendet, um OclickClone = Child [i] .Clonenode (true) zu ziehen; // Klonelement wird verwendet, um oclickdown = child [i] .Clonenode (true) abzulegen; // Nach dem Drücken löschen Sie das Element und verwenden Sie den bewegenden Effekt, um das Element Obox.removechild (Kind [i]) anzuzeigen; movemagisch (Oclickclone, e); // die Platzhalter -Div einfügen, um Obox zu machen. // flag = true; brechen; }}}}} // Mausbewegungsereignis Funktion Move (e) {if (isclick) {movemagic (oclickclone, e); // Bestimmen Sie, ob sich die Maus in die Innenseite des Behälters bewegt hat, wenn (is -clude (e.clientx, e.clienty, obox)) {// die untergeordneten Knoten im Container var child = obox.childnoden berechnen; // Nach dem Eintritt können Sie die Platzhalter -Div in die erste Position einfügen. // platziere den Platzhalter Div nach der Mausposition für (var i = 0; i <child.length; i ++) {// Weil der Platzhalter Div einzigartig ist, müssen Sie nur diese Weise beurteilen, wenn (E.Clienty> Kind [i] .Offsettop+Kind [i] .offseteight/2 {// beurteilen, ob das Ende das Ende ziehen kann, wenn (i! Obox.insertbefore (Ort, Kind [i+1]); sonst Obox.AppendChild (Ort); }}}}} // Maus -Lift -Ereignisfunktion auf (e) {isclick = false; // Die Maus wird angehoben und das temporäre Drag -Effect -Element kann Dokument gelöscht werden. // Wenn das Element in den Container platziert ist, wenn (isinclude (e.clientx, e.clienty)) {var child = obox.childnodes; // die Position des Platzhalters Div var Inserton; für (var i = 0; i <child.length; i ++) {// Bestimmen Sie die Position des Platzhalters div if (place === child [i]) {obox.removechild (child [i]); InsertPlace = i; brechen; }} // beurteilen, ob mehrere platziert werden können, wenn (! Bismany) {if (isIncludeBox) ocreate = oclickdown; if (insertPlace == child.length) obox.AppendChild (ocreate); sonst obox.insertbefore (ocreate, Kind [InsertPlace]); } else {// Sie können ein mehrfach platziert werden können, sodass Sie jeweils klonen müssen, wenn (isIncludeBox) var ocreateclone = oclickdown; sonst var ocreateclone = ocreate.clonenode (true); if (insertPlace == child.length) obox.AppendChild (OCreateClone); sonst {obox.insertBefore (ocreateclone, child [InsertPlace]); }}} else {if (isIncludeBox) {var child = obox.childnodes; für (var i = 0; i <child.Length; i ++) {if (child [i] === place) {obox.removechild (child [i]); Obox.insertbefore (Oclickdown, Kind [i]); } 1}}} isincludeBox = false; } document.adDeVentListener ('Mousemove', Move); document.adDeVentListener ('MouseDown', Down); document.addeventListener ('mauseup', up);}Das obige einfache Beispiel für Pure JS-Implementierungs-Drag-and-Drop-Formulare ist der gesamte Inhalt, den ich mit Ihnen teile. Ich hoffe, Sie können Ihnen eine Referenz geben und ich hoffe, Sie können wulin.com mehr unterstützen.