Como quero usar formulários de arrastar e soltar, eu pessoalmente prefiro fazer isso sozinho e não gosto de usar plug-ins sem entender a implementação ou os princípios, então encontrei informações para implementar uma.
Ideia: Use Mousedown para determinar se a posição de clique do mouse está no controle do gatilho. Nesse caso, quando mousemove, clone um controle, modifique a transparência e, em seguida, quando colocado no contêiner, remova o controle e gerar um colocado no recipiente (o controle e o controle do gatilho colocados podem ser diferentes)
Arraste e solte: Da mesma forma, quando o mousedown é usado, determine qual controle ele é. Quando o MouseMove, você precisa colocar uma divisão de espaço reservado na posição original e modificar a transparência do elemento e defini -la como posição absoluta para facilitar o arrasto. Ao arrastar, a divisão de espaço reservado também mudará de acordo com a posição do mouse (julgando se a posição atual do mouse é o canto superior esquerdo do controle no contêiner mais metade da altura do controle). Ao abaixá -lo, a posição da divisão de espaço reservado é usada para inseri -la. Vejamos o código em detalhes. O tempo adicionado por essa ideia tem sido um pouco tempo desde que o código foi implementado. Tudo pode não ser muito preciso, mas essa é a ideia geral.
PS: Se você deseja usar a função de arrastar e soltar, pode basicamente alterar o método de banco de dados de design anterior. Aqui podemos fornecer a você um armazenamento vertical das listas de palavras -chave de pesquisa.
Os comentários foram basicamente escritos em detalhes, basta colocá -los no código.
Se você tiver alguma dúvida, me dê alguns conselhos.
<! Doctype html> <html> <head> <title> test </title> <style type = "text/css"> html, corpo {altura: 100%; largura: 100%; preenchimento: 0; margem: 0; } .dialog { /* width: 250px; Altura: 250px;*/ Posição: Absoluto; Background-Color: #CCC; -webkit-box-shadow: 1px 1px 3px #292929; -moz-box-shadow: 1px 1px 3px #292929; Box-Shadow: 1px 1px 3px #292929; /*margem: 10px;*/ topo: 50px; Esquerda: 50px; opacidade: 1; } .dialog-title {color: #ffff; Background-Color:#404040; tamanho de fonte: 12pt; Peso da fonte: negrito; preenchimento: 4px 6px; Cursor: Mova; Posição: Absoluto; Top: 50px; Esquerda: 50px; } .dialog-content {preenchimento: 4px; Cursor: Mova; } .None {Display: Nenhum; } .Box {Width: 200px; Altura: 500px; Background-Color: cinza; altura de linha: 30px; margem: 100px; } .place {width: 200px; Altura: 50px; borda: 1px vermelho tracejado; } </style> <script type = "text/javascript" src = "js/devwin.js"> </sCript> </ad Head> <body> <!-<div id = "dlgtest">-> <div id = "title"> dialog </div id/"title2" style = "top: 10pxxxx" 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 o objeto var click = document.getElementById ("title"); var click2 = document.getElementById ("title2"); // o contêiner colocado var caixa = document.getElementById ("caixa"); // o div é o lugar no contêiner = document.createElement ("div"); Place.className = "Place"; // o objeto adicionado ao contêiner var cria = document.createElement ("input"); create.type = "text"; var criate2 = document.createElement ("entrada"); create2.type = "senha"; // é possível adicionar vários vars ismany = true; createwin (clique, crie, ismany, local, caixa); createwin (click2, create2, ismany, local, caixa); </script> </html> /*** author:lzh * Function: Drag-and-drop sorting form implementation* Parameters: oclick Click the object that triggers the event* ocreate the object passed in the form after departure* bisMany Can a single oclick object be dragged into multiple ocreate objects* placeholder div object when dragged in* obox The container dragged in, if not filled in, the default is body*/function createwin (oclick, ocreate, bismany, local, obox = document.body) {// se o objeto de gatilho foi clicado var isclick = false; // se o objeto de gatilho é um elemento no contêiner var isincludebox = false; space.style.width = obox.offsetWidth-5 + "px"; Place.style.Height = OCLICK.OFFSETHEION-5 + "PX"; // elemento temporário do efeito móvel var oclickclone; var oclickdown; // calcule o deslocamento var diffobj; var diffx; var diffy; var tmp; var omove_position; // é o ponto incluído na função de contêiner isinclude (x, y, incluirbox = obox) {if (x> incluirbox.offsetleft && y> incluirbox.offsetTop && x <incluirBox.offsetLeft + incluirBox.offsetWidth && y <BoxBox. retornar falso; } // Função de efeito Move função MoveMagic (OMOVE, e) {// omove_position = window.getComputedStyle (OMOVE) .getPropertyValue ('posição'); omove.style.Opacity = 0,4; omove.style.Position = "Absolute"; document.body.appendChild (OMOVE); omove.style.left = e.clientx-diffx+"px"; omove.style.top = e.clienty-diffy+"px"; } função getDiff (e) {diffobj = e.target; diffx = e.clientx-Diffobj.OffSetLeft; difffy = e.clienty-Diffobj.OffSettop; } // mouse Press Event Função para baixo (e) {if (isinclude (e.clientX, e.clienty, oclick)) {isClick = true; // Clone o nó do gatilho do click oclickclone = oclick.cloneNode (true); // Calcule o deslocamento do mouse (se houver margem, haverá um deslocamento) getDiff (e); } else {getDiff (e); var filho = obox.ChildNodes; para (var i = 0; i <child.length; i ++) {// julga se o clique do mouse é um elemento no contêiner e não pode ser um divisão de espaço reservado (se você não adicionar esse espaço reservado, será um bug, mas o motivo específico não é conhecido) se (iSinclude (e.clientx, e.cienty, Childy, [i] & não é conhecido [i]; isincludeBox = true; // O efeito do elemento de clonagem é usado para arrastar oclickclone = filho [i] .cloneNode (true); // O elemento clone é usado para colocar o oclickdown = filho [i] .cloneNode (true); // Depois de pressionar, exclua o elemento e use o efeito móvel para exibir o elemento obox.RemoVechild (criança [i]); MoveMagic (OclickClone, e); // Insira o espaço reservado para fazer obox.insertBefore (local, criança [i]); // sinalizador = true; quebrar; }}}}} // Função de eventos de movimento do mouse move (e) {if (isClick) {movemagic (oclickclone, e); // Determine se o mouse se moveu para o interior do contêiner se (isinclude (e.clientX, e.clienty, obox)) {// calcule os nós filhos no contêiner var criança = obox.childnodes; // Depois de entrar, você pode inserir o espaço reservado na primeira posição obox.InsertBe antes (local, criança [0]); /// coloque o espaço reservado de acordo com a posição do mouse para (var i = 0; i <child.length; i ++) {// porque o divisor de espaço reservado é único, você só precisa julgar dessa maneira se (e.clienty> filho [i] .offsettop+criança [i] .offSeight/2) {// julgar se o débil se houver (i! obox.InsertBefore (local, criança [i+1]); else obox.appendchild (local); }}}}} // Função de eventos de elevação do mouse up (e) {isClick = false; // O mouse é elevado e o elemento de efeito de arrasto temporário pode ser excluído documento.Body.RemoveChild (OCLICKCLONE); // se o elemento for colocado no contêiner if (isinclude (e.clientX, e.clienty)) {var child = obox.childnodes; // a posição do espaço reservado Div VAR Insertplace; for (var i = 0; i <child.length; i ++) {// determinar a posição do espaço reservado div. insertplace = i; quebrar; }} // julgue se vários podem ser colocados se (! Bismany) {if (isincludebox) ocriate = oclickdown; if (insertplace == Child.length) obox.appendChild (OCREATE); else obox.InsertBefore (OCRATE, criança [inserção]); } else {// você pode colocar múltiplas pode ser colocado, portanto, precisa clonar cada um if (isincludebox) var ocReateClone = oclickdown; else var ocReateClone = ocriate.clonEnode (true); if (insertplace == Child.length) obox.appendChild (ocreateclone); else {obox.insertBefore (ocreateclone, criança [insertplace]); }}} else {if (isincludeBox) {var criança = obox.childnodes; for (var i = 0; i <child.length; i ++) {if (filho [i] === local) {obox.RemoveChild (criança [i]); obox.InsertBefore (Oclickdown, criança [i]); } 1}}} isincludeBox = false; } document.addeventListener ('mousemove', move); document.addeventListener ('mousedown', para baixo); document.addeventlistener ('mouseup', up);}O exemplo simples acima dos formulários de arrastar e soltar de implementação de JS puros é todo o conteúdo que eu compartilho com você. Espero que você possa lhe dar uma referência e espero que você possa apoiar mais o wulin.com.