Debido a que quiero usar formularios de arrastrar y soltar, personalmente prefiero hacerlo yo mismo y no me gusta usar complementos sin comprender la implementación o los principios, por lo que encontré información para implementar uno.
Idea: use MouseDown para determinar si la posición del clic del mouse está en el control de activación. Si es así, cuando MouseMove, clone un control, modifique la transparencia y luego, cuando se coloque en el contenedor, retire el control y genere una colocación en el contenedor (el control colocado y el control de activación pueden ser diferentes)
Arrastre y caiga: Del mismo modo, cuando se usa MouseDown, determine qué control es. Cuando Mousemove, debe colocar un DIV de marcador de posición en la posición original, y modificar la transparencia del elemento y establecerlo en una posición absoluta para facilitar el arrastre. Al arrastrar, el Diving del marcador de posición también cambiará de acuerdo con la posición del mouse (juzgando si la posición actual del mouse es la esquina superior izquierda del control en el contenedor más la mitad de la altura del control). Al dejarlo, la posición del marcador de posición Div se usa para insertarlo. Veamos el código en detalle. El tiempo agregado por esta idea ha pasado un poco desde que se implementó el código. Todos pueden no ser muy precisos, pero esta es la idea general.
PD: Si desea usar la función de Formulario de arrastrar y soltar, básicamente puede cambiar el método de base de datos de diseño anterior. Aquí podemos proporcionarle un almacenamiento vertical de listas de palabras clave de búsqueda.
Los comentarios básicamente se han escrito en detalle, solo póngalos en el código.
Si tiene alguna pregunta, dame algún consejo.
<! Doctype html> <html> <head> <title> test </title> <style type = "text/css"> html, cuerpo {altura: 100%; Ancho: 100%; relleno: 0; margen: 0; } .dialog { /* ancho: 250px; Altura: 250px;*/ Posición: Absoluto; Color de fondo: #CCC; -webkit-box-shadow: 1px 1px 3px #292929; -moz-box-shadow: 1px 1px 3px #292929; Shadow de caja: 1px 1px 3px #292929; /*margen: 10px;*/ top: 50px; Izquierda: 50px; Opacidad: 1; } .dialog-title {color: #ffff; Color de fondo:#404040; tamaño de fuente: 12pt; Font-Weight: Bold; relleno: 4px 6px; cursor: mover; Posición: Absoluto; Arriba: 50px; Izquierda: 50px; } .dialog-contento {relleno: 4px; cursor: mover; } .none {pantalla: ninguno; } .Box {ancho: 200px; Altura: 500px; Color de fondo: gris; Línea de altura: 30px; margen: 100px; } .place {ancho: 200px; Altura: 50px; borde: 1px rojo discontinuo; } </style> <script type = "text/javaScript" src = "js/devwin.js"> </script> </head> <body> <!-<div id = "dlgtest">-> <div it = "title"> dialog </div Id = "title2" style = "top: 10px"> dialog </div>! href="#">123</a> <input id = "text" type="text" class = "none"> <div id = "box" class = "box"> <!-- <input type="" name="" placeholder=""> --> </div> <div class = "place"></div> </body> <script type="text/javascript"> //Variable to be passed in//Click to trigger the object var click = document.getElementById ("título"); var click2 = document.getElementById ("title2"); // El contenedor colocado var box = document.getElementById ("box"); // el lugar div var en el contenedor = document.createElement ("div"); lugar.classname = "lugar"; // el objeto agregado al contenedor var create = document.createElement ("entrada"); create.type = "text"; var create2 = document.createElement ("entrada"); create2.type = "contraseña"; // es posible agregar múltiples vars ismany = true; createwin (haga clic, crea, ismany, lugar, cuadro); createwin (click2, create2, ismany, lugar, cuadro); </script> </html> /*** Autor: LZH* Función: Implementación del formulario de clasificación de arrastre y drogada Parámetros* Parámetros: oclick Haga clic en el objeto que desencadena el evento* Ocreate el objeto aprobado en el formulario Después de la salida* BISMANY puede un solo objeto Oclick arrastrado en múltiples objetos Ocreatee* TIEMPLO DE LUCE DIV cuando se arrastra en* OBOX el contenedor arrastrado, si no se está llenando, el cuerpo es el cuerpo de múltiples*. Createwin (Oclick, Ocreate, Bismany, Place, OBOX = Document.Body) {// Si el objeto de activación se hizo clic en Var ISClick = false; // Si el objeto de activación es un elemento en el contenedor var isincludeBox = false; space.style.width = obox.offsetwidth-5 + "px"; lugar.style.Height = oclick.offsetheight-5 + "px"; // Elemento temporal del efecto móvil var oclickClone; var oclickdown; // Calcule el VAR de compensación diffobj; var diffx; var Diffy; var tmp; var omove_position; // es el punto incluido en la función del contenedor isinclude (x, y, includebox = obox) {if (x> includebox.offsetleft && y> includebox.offsettop && x <includebox.offsetleft + includebox.offsetwidth && y <includebox.offsettop + includeBox.offsetHeTheight) return real; devolver falso; } // Función de efecto Move Función Movemagic (Omove, E) {// Omove_Position = Window.getComputedStyle (Omove) .GetPropertyValue ('Position'); Omove.style.opacity = 0.4; Omove.style.Position = "Absolute"; document.body.appendChild (Omove); Omove.style.Ltft = e.clientx-diffx+"px"; omove.style.top = e.clienty-diffy+"px"; } función getDiff (e) {diffobj = e.target; diffx = e.clientx-diffobj.offsetleft; diffy = e.clienty-diffobj.offsettop; } // mouse presione event full down (e) {if (isinclude (e.clientx, e.clienty, oclick)) {isClick = true; // Clone el nodo de activación del clickclone de clic = oclick.clonenode (true); // Calcule el desplazamiento del mouse (si hay margen, habrá un compensación) getDiff (e); } else {getDiff (e); var niño = obox.childnodes; para (var i = 0; i <child.length; i ++) {// juzga si el clic del mouse es un elemento en el contenedor y no puede ser un marcador de posición Div (si no agrega este diving de position Div, será un error, pero el motivo específico se conoce) si (isinclude (e.clientx, e.clienty, hijo [i]) & ef! = lugar) isincludeBox = true; // El efecto del elemento de clonación se usa para arrastrar oclickclone = niño [i] .clonenode (verdadero); // El elemento clon se usa para colocar oclickdown = niño [i] .clonenode (true); // Después de presionar, elimine el elemento y use el efecto móvil para mostrar el elemento OBOX.removechild (niño [i]); Movemagic (oclickclone, e); // inserte el marcador de posición Div para hacer OBOX. // flag = True; romper; }}}}} // Función del evento de movimiento del mouse Move (E) {if (isClick) {MovEMagic (OclickClone, E); // Determine si el mouse se ha movido al interior del contenedor if (isinclude (e.clientx, e.clienty, obox)) {// Calcule los nodos infantiles en el contenedor var child = obox.childnodes; // Una vez que ingrese, puede insertar el Diving Div en la primera posición OBOX. // Coloque el marcador de posición DIV de acuerdo con la posición del mouse para (var i = 0; i <child.length; i ++) {// Debido a que el marcador de posición Div es único, solo necesita juzgar de esta manera si (e.clienty> child [i] .Offsettop+child [i] .OffsetheTight/2) {// juzgar si está a la altura al final de (i! = Child.length-1) obox.insertbefore (lugar, niño [i+1]); else OBOX.AppendChild (lugar); }}}}} // El evento de elevación del mouse Function Up (e) {isClick = false; // El mouse se eleva y el elemento de efecto de arrastre temporal se puede eliminar document.body.removechild (oclickclone); // Si el elemento se coloca en el contenedor if (isinclude (e.clientx, e.clienty)) {var child = obox.childnodes; // La posición del marcador de posición Div Var Insert Place; for (var i = 0; i <child.length; i ++) {// determinar la posición del marcador de posición Div if (lugar === Child [i]) {OBOX.REMOVECHILD (niño [i]); insertplace = i; romper; }} // juzga si múltiples se puede colocar si (! Bismany) {if (isincludeBox) ocreate = oclickdown; if (insertplace == child.length) OBOX.AppendChild (ocreate); else OBOX. } else {// Puede colocar múltiples se puede colocar, por lo que debe clonar cada uno if (isincludeBox) var ocreateClone = oclickdown; else var ocreateClone = ocreate.clonenode (true); if (insertplace == child.length) OBOX.AppendChild (ocreateClone); else {obox.insertbefore (ocreateClone, child [insertplace]); }}} else {if (isincludeBox) {var child = obox.childnodes; para (var i = 0; i <child.length; i ++) {if (child [i] === place) {obox.removechild (niño [i]); obox.insertbefore (oclickdown, niño [i]); } 1}}} isincludeBox = false; } document.adDeventListener ('MouseMove', Move); document.AdDeventListener ('Mousedown', Down); document.addeventListener ('mouseup', up);}El ejemplo simple anterior de los formularios de arrastre de implementación de JS puro es todo el contenido que comparto con usted. Espero que pueda darle una referencia y espero que pueda apoyar más a Wulin.com.