因為要用到可拖拽表單，個人要比較喜歡自己動手，不怎麼喜歡在不懂實現或者原理的情況下用插件，所以查找資料實現了一個。
思路：放入：用mousedown判斷鼠標點擊的位置是否在觸發控件的位置，如果是，mousemove的時候clone一個控件，修改透明度，然後放入容器內的時候remove這個控件，並且在容器內生成一個放入的控件（放入的控件和触發的控件可以不一樣）
拖拽：同樣的， mousedown的時候判斷是哪個控件，mousemove的時候需要放一個佔位div放在原有的位置上，並將元素修改透明度然後設置為絕對定位方便拖動，在進行拖動的時候，佔位div也會跟著鼠標位置進行改變（判斷當前鼠標位置是否是容器內控件的左上角加上控件高度的一半），放下的時候進行判斷佔位div的位置進行插入。具體看代碼吧，這個思路加上的時間距離代碼實現的時間有點久遠了，所有可能不是很準確，但是大概的思路就是這樣了。
ps：要用到拖拽表單功能的，基本上可能都會要更改以往設計數據庫方式，這裡可以提供給你們一個搜索關鍵詞表的縱向存儲
註釋基本上都已經寫的很詳細了，直接上代碼吧。
有什麼問題請大神們多多指教
<!DOCTYPE html><html> <head> <title>Test</title> <style type="text/css" > html,body { height:100%; width:100%; padding:0; margin:0; } .dialog { /* width:250px; height:250px;*/ position:absolute; background-color:#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; left: 50px; opacity:1; } .dialog-title { color:#fff; background-color:#404040; font-size:12pt; font-weight:bold; padding:4px 6px; cursor:move; position:absolute; top:50px; left: 50px; } .dialog-content { padding:4px; cursor:move; } .none{ display: none; } .box{ width: 200px; height: 500px; background-color: gray; line-height: 30px; margin: 100px; } .place{ width: 200px; height: 50px; border: 1px dashed red; } </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" 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"> //要傳入的變量//點擊觸發的對象var click = document.getElementById("title"); var click2 = document.getElementById("title2"); //放入的容器var box = document.getElementById("box"); //容器內佔位的DIV var place = document.createElement("div"); place.className = "place"; //往容器內添加的對象var create = document.createElement("input"); create.type = "text"; var create2 = document.createElement("input"); create2.type = "password"; //是否可以添加多個var isMany = true; createWin(click,create,isMany,place,box); createWin(click2,create2,isMany,place,box); </script></html> /*** author:lzh * 作用:可拖拽排序表單實現* 參數:oclick 點擊觸發事件的對象* ocreate 出發後在表單中傳入的對象* bisMany 單個oclick對像是否可拖入多個ocreate對象* oplace 拖入時佔位div對象* obox 拖入的容器，不填則默認為body*/function createWin(oclick,ocreate,bisMany,oplace,obox=document.body){ //是否點擊了觸發對象var isClick = false; //觸發對像是否為容器內的元素var isIncludeBox = false; oplace.style.width = obox.offsetWidth-5 + "px"; oplace.style.height = oclick.offsetHeight-5 + "px"; //移動效果的臨時元素var oclickClone; var oclickDown; //計算偏移量var diffObj; var diffX; var diffY; var tmp; var omove_position; //點是否包含在容器內function isInclude(x,y,includeBox=obox) { if(x > includeBox.offsetLeft && y > includeBox.offsetTop && x < includeBox.offsetLeft + includeBox.offsetWidth && y < includeBox.offsetTop + includeBox.offsetHeight) return true; return false; } //移動效果函數function 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.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; } //鼠標按下事件function down(e) { if(isInclude(e.clientX,e.clientY,oclick)) { isClick = true; //克隆點擊的觸發節點oclickClone=oclick.cloneNode(true); //計算鼠標的偏移量（如果有margin的話會有偏移現象） getdiff(e); } else { getdiff(e); var child = obox.childNodes; for(var i=0; i < child.length; i++) { //判斷鼠標點擊是否是容器內的元素，並且不能是佔位div（如果不加這個佔位div判斷會有bug，具體原因不知道） if(isInclude(e.clientX,e.clientY,child[i])&& child[i] != oplace) { isClick = true; isIncludeBox = true; //克隆元素用來拖動時的效果oclickClone = child[i].cloneNode(true); //克隆元素用來放下oclickDown = child[i].cloneNode(true); //按下之後刪除元素，並使用移動效果來展示元素obox.removeChild(child[i]); moveMagic(oclickClone,e); //插入佔位div來弄obox.insertBefore(oplace,child[i]); // flag = true; break; } } } } //鼠標移動事件function move(e) { if(isClick) { moveMagic(oclickClone,e); //判斷鼠標是否移動到了容器內部if(isInclude(e.clientX,e.clientY,obox)) { //計算容器內的子節點var child = obox.childNodes; //一旦進入就可以在首位置插入佔位DIV obox.insertBefore(oplace,child[0]); //根據鼠標位置放置佔位DIV for(var i = 0; i < child.length; i++) { //因為佔位DIV是唯一的，所以只需要這樣判斷即可if(e.clientY > child[i].offsetTop+child[i].offsetHeight/2) { //判斷是否拖動到了結尾if(i != child.length-1) obox.insertBefore(oplace,child[i+1]); else obox.appendChild(oplace); } } } } } //鼠標抬起事件function up(e) { isClick = false; //鼠標抬起則可以刪除臨時的拖動效果元素document.body.removeChild(oclickClone); //如果將元素放置到了容器內if(isInclude(e.clientX,e.clientY)) { var child = obox.childNodes; //佔位div的位置var insertPlace; for(var i=0; i<child.length;i++) { //確定佔位div的位置if(oplace === child[i]) { obox.removeChild(child[i]); insertPlace = i; break; } } //判斷是否可以放置多個if(!bisMany) { if(isIncludeBox) ocreate = oclickDown; if(insertPlace==child.length) obox.appendChild(ocreate); else obox.insertBefore(ocreate,child[insertPlace]); } else { //可以放置多個則需要每個都克隆一下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; for(var i=0; i<child.length; i++) { if(child[i] === oplace) { obox.removeChild(child[i]); obox.insertBefore(oclickDown,child[i]); }1 } } } isIncludeBox = false; } document.addEventListener('mousemove',move); document.addEventListener('mousedown',down); document.addEventListener('mouseup',up);}以上這篇純JS實現可拖拽表單的簡單實例就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持武林網。