因為要用到可拖拽表單，個人要比較喜歡自己動手，不怎么喜歡在不懂實現或者原理的情況下用插件，所以查找資料實現了一個。
思路：放入：用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" class="dialog"> --> <div id = "title" class="dialog-title">Dialog</div> <div id = "title2" class="dialog-title" 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實現可拖拽表單的簡單實例就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持武林網。
新聞熱點
疑難解答
