因为要用到可拖拽表单，个人要比较喜欢自己动手，不怎么喜欢在不懂实现或者原理的情况下用插件，所以查找资料实现了一个。
思路：放入：用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 = "title">Dialog</div> <div id = "title2" style ="top:10px">Dialog</div> <> <a id = "a" href="#">123</a> <input id = "text" type="text" class = "none"> <div id = "box" class = "box"> <> </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实现可拖拽表单的简单实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持查字典教程网。
【纯JS实现可拖拽表单的简单实例】相关文章：