纯JS实现可拖拽表单的简单实例

因为要用到可拖拽表单，个人要比较喜欢自己动手，不怎么喜欢在不懂实现或者原理的情况下用插件，所以查找资料实现了一个。
思路：放入：用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"）;//容器内占位的DIVvar 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;//一旦进入就可以在首位置插入占位DIVobox.insertBefore（oplace,child[0]）;//根据鼠标位置放置占位DIVfor（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]）;elseobox.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）;elseobox.insertBefore（ocreate,child[insertPlace]）;}else{//可以放置多个则需要每个都克隆一下if（isIncludeBox）var ocreateClone = oclickDown;elsevar 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实现可拖拽表单的简单实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。