Parce que je veux utiliser des formulaires de glisser-déposer, je préfère personnellement le faire moi-même et n'aime pas utiliser des plug-ins sans comprendre l'implémentation ou les principes, j'ai donc trouvé des informations pour implémenter une.
Idée: utilisez Mousedown pour déterminer si la position de clic de la souris est au contrôle de déclenchement. Dans l'affirmative, lorsque MouseMove, clonez un contrôle, modifiez la transparence, puis lorsqu'il est mis dans le récipient, retirez la commande et générez une mise dans le récipient (le contrôle placé et le contrôle de déclenchement peuvent être différents)
Drag et dépôt: De même, lorsque Mousedown est utilisé, déterminez de quel contrôle il s'agit. Lorsque MouseMove, vous devez mettre un div d'espace réservé dans la position d'origine, et modifier la transparence de l'élément et la définir sur la position absolue pour faciliter la traînée. Lors de la traînée, l'espace réservé Div changera également en fonction de la position de la souris (à juger si la position actuelle de la souris est le coin supérieur gauche du contrôle dans le conteneur plus la moitié de la hauteur du contrôle). Lorsque vous le posez, la position de l'espace réservé Div est utilisée pour l'insérer. Examinons le code en détail. Le temps ajouté par cette idée a été un peu depuis longtemps que le code a été implémenté. Tout peut ne pas être très précis, mais c'est l'idée générale.
PS: Si vous souhaitez utiliser la fonction de formulaire de glisser-déposer, vous devrez peut-être modifier la méthode de la base de données de conception précédente. Ici, nous pouvons vous fournir un stockage vertical des listes de mots clés de recherche.
Les commentaires ont été essentiellement écrits en détail, il suffit de les mettre sur le code.
Si vous avez des questions, veuillez me donner quelques conseils.
<! Doctype html> <html> <éad- head> <itle> test </ title> <style type = "text / css"> html, body {height: 100%; Largeur: 100%; rembourrage: 0; marge: 0; } .dialog {/ * largeur: 250px; Hauteur: 250px; * / position: Absolute; Color d'arrière-plan: #ccc; -Webkit-box-shadow: 1px 1px 3px # 292929; -moz-box-shadow: 1px 1px 3px # 292929; Box-Shadow: 1px 1px 3px # 292929; / * marge: 10px; * / top: 50px; Gauche: 50px; Opacité: 1; } .dialog-title {couleur: #ffff; Color d'arrière-plan: # 404040; taille de police: 12pt; Police-poids: Bold; rembourrage: 4px 6px; curseur: déplacer; Position: absolue; en haut: 50px; Gauche: 50px; } .dialog-content {padding: 4px; curseur: déplacer; } .none {affichage: aucun; } .box {largeur: 200px; hauteur: 500px; Color en arrière-plan: gris; hauteur de ligne: 30px; marge: 100px; } .place {largeur: 200px; hauteur: 50px; Border: 1px en roue en roue; } </ style> <script type = "text / javascript" src = "js / devwin.js"> </ script> </ head> <body> <! - <div id = "dlgtest"> -> <div id = "title"> Dialog </ div> <div id = "title2" style = "top: 10px"> dialog </ div> <! - </ div> <a id = "a dialogue </ div> <! - </ div> href = "#"> 123 </a> <input id = "text" type = "text" class = "non"> <div id = "box" class = "box"> <! - <input type = "" name = "" placeholder = ""> -> </ div> <div class = "Place"> </ div> </ body> <script type = "text / javascript"> // variable pour être passé dans le trger = document.getElementById ("Title"); var click2 = document.getElementById ("title2"); // le conteneur placé var box = document.getElementById ("box"); // le plact div var dans le conteneur = document.CreateElement ("div"); Place.className = "Place"; // l'objet ajouté au conteneur var create = document.CreateElement ("entrée"); create.type = "texte"; var create2 = document.CreateElement ("entrée"); create2.type = "mot de passe"; // est-il possible d'ajouter plusieurs vars isMany = true; CreateWin (cliquez, créer, isMany, Place, Box); createWin (click2, create2, ismany, place, box); </cript> </html> / *** Auteur: LZH * Fonction: Formulaire de tri glisser-déposer Implémentation * Paramètres: Oclick Cliquez sur l'objet qui déclenche l'événement * ocreate l'objet passé sous la forme après le départ * BisMany peut un seul objet oclick être glisser dans plusieurs objets ocrete * createWin (oclick, ocreate, bisMany, Place, obox = document.body) {// L'objet déclencheur a été cliqué var isClick = false; // si l'objet Trigger est un élément du conteneur var isIncludebox = false; Space.style.width = obox.offsetWidth-5 + "PX"; place.style.height = oclick.offsetheight-5 + "px"; // élément temporaire de l'effet mobile var oclickclone; var oclickdown; // Calculez le décalage var diffobj; var diffx; var diffy; var tmp; var omove_position; // est le point inclus dans la fonction de conteneur isInclude (x, y, includebox = obox) {if (x> includebox.offsetLeft && y> includebox.offsettop && x <includebox.offsetleft + incluebox.offsetwidth && y <includebox.offsettop + includebox.offsetHeight) return true; retourne false; } // Fonction Effect de déplacement MOVEMAGIC (OMOVE, E) {// OMOVE_POSITION = Window.GetComputedStyle (Omove) .getPropertyValue ('position'); omove.style.opacity = 0,4; omove.style.position = "Absolute"; Document.Body.ApendChild (Omove); omove.style.left = e.clientx-diffx + "px"; OMOVE.STYLE.TOP = E.CLIENTY-DIFFY + "PX"; } fonction getDiff (e) {diffobj = e.target; diffx = e.clientx-diffobj.offsetLeft; diffy = e.clienty-diffobj.offsettop; } // La fonction de la fonction de l'événement de la souris Down (e) {if (isInclude (e.clientx, e.clienty, oclick)) {isClick = true; // Clone le nœud de déclenchement du clic oclickclone = oclick.clonenode (true); // Calculez le décalage de la souris (s'il y a une marge, il y aura un décalage) getDiff (e); } else {getDiff (e); var child = obox.childNodes; pour (var i = 0; i <child.length; i ++) {// juger si le clic de souris est un élément dans le conteneur et ne peut pas être un div d'espace réservé (si vous n'ajoutez pas cet espace réservé div, ce sera un bug, mais la raison spécifique n'est pas connue) if (isInclude (e.clientx, E.Clienty, enfant [i]) && child [i]! = place) {estClick = true; isincludebox = true; // L'effet de l'élément de clonage est utilisé pour faire glisser oclickclone = enfant [i] .clonenode (true); // L'élément de clone est utilisé pour rabaisser oClickdown = enfant [i] .clonenode (true); // Après avoir appuyé, supprimez l'élément et utilisez l'effet mobile pour afficher l'élément obox.removechild (enfant [i]); MOVEMAGIC (OCLICKCLONE, E); // Insérez le div d'espace réservé pour faire obox.insertBefore (lieu, enfant [i]); // flag = true; casser; }}}}} // Fonction de l'événement de mouvement de souris Move (e) {if (isClick) {MoveMagic (oclickclone, e); // Déterminez si la souris s'est déplacée à l'intérieur du conteneur if (isInclude (e.clientx, e.clienty, obox)) {// Calculez les nœuds enfants dans le conteneur var child = obox.childNodes; // Une fois entré, vous pouvez insérer le div d'espace réservé dans la première position obox.insertBefore (place, enfant [0]); // Placez le div d'espace réservé en fonction de la position de la souris pour (var i = 0; i <child.length; i ++) {// Parce que le div de l'espace réservé est unique, il vous suffit de juger de cette façon si (e.clienty> enfant [i] .offsetTop + enfant [i] .offsetheight / 2) {// juger si il faut glisser vers la fin if (i! = Child.Length-1) obox.insertbefore (lieu, enfant [i + 1]); else Obox.ApendChild (lieu); }}}}} // Fonction de l'événement de levage de souris up (e) {isClick = false; // La souris est soulevée et l'élément d'effet de traînée temporaire peut être supprimé document.body.removechild (oclickclone); // Si l'élément est placé dans le conteneur if (isInclude (e.clientx, e.clienty)) {var child = obox.childNodes; // la position de l'espace réservé div var insertplace; for (var i = 0; i <child.length; i ++) {// déterminer la position de l'espace réservé div if (place === enfant [i]) {obox.removechild (enfant [i]); INSERTPLACE = I; casser; }} // juger si plusieurs peuvent être placés if (! BisMany) {if (isIncludebox) oCreate = oclickdown; if (insertplace == child.length) obox.ApendChild (oCreate); else obox.insertbefore (ocreate, enfant [insertplace]); } else {// Vous pouvez placer plusieurs peuvent être placés, vous devez donc cloner chacun si (isincludebox) var ocreateClone = oclickdown; else var ocreateClone = ocreate.clonenode (true); if (insertplace == child.length) obox.appendChild (ocreateClone); else {obox.insertbefore (ocreateClone, enfant [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, enfant [i]); } 1}}} isincludebox = false; } document.addeventListener ('MousMove', Move); Document.AddeventListener («MousDown», Down); document.addeventListener ('MouseUp', UP);}L'exemple simple ci-dessus des formulaires de glisser-déposer de l'implémentation JS purs est tout le contenu que je partage avec vous. J'espère que vous pourrez vous faire référence et j'espère que vous pourrez soutenir Wulin.com plus.