纯JS实现可拖拽表单的简单实例
因为要用到可拖拽表单，个人要比较喜欢自己动手，不怎么喜欢在不懂实现或者原理的情况下用插件，所以查找资料实现了一个。
思路：放入：用mousedown判断鼠标点击的位置是否在触发控件的位置，如果是，mousemove的时候clone一个控件，修改透明度，然后放入容器内的时候remove这个控件，并且在容器内生成一个放入的控件（放入的控件和触发的控件可以不一样）
拖拽：同样的，mousedown的时候判断是哪个控件，mousemove的时候需要放一个占位div放在原有的位置上，并将元素修改透明度然后设置为绝对定位方便拖动，在进行拖动的时候，占位div也会跟着鼠标位置进行改变（判断当前鼠标位置是否是容器内控件的左上角加上控件高度的一半），放下的时候进行判断占位div的位置进行插入。具体看代码吧，这个思路加上的时间距离代码实现的时间有点久远了，所有可能不是很准确，但是大概的思路就是这样了。
ps：要用到拖拽表单功能的，基本上可能都会要更改以往设计数据库方式，这里可以提供给你们一个搜索关键词表的纵向存储
注释基本上都已经写的很详细了，直接上代码吧。
有什么问题请大神们多多指教
<!DOCTYPEhtml>
<html>
<head>
<title>Test</title>
<styletype="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:1px1px3px#292929;
-moz-box-shadow:1px1px3px#292929;
box-shadow:1px1px3px#292929;
/*margin:10px;*/
top:50px;
left:50px;
opacity:1;
}
.dialog-title
{
color:#fff;
background-color:#404040;
font-size:12pt;
font-weight:bold;
padding:4px6px;
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:1pxdashedred;
}
</style>
<scripttype="text/javascript"src="js/devWin.js"></script>
</head>
<body>
<!--<divid="dlgTest"class="dialog">-->
<divid="title"class="dialog-title">Dialog</div>
<divid="title2"class="dialog-title"style="top:10px">Dialog</div>
<!--</div>-->
<aid="a"href="#">123</a>
<inputid="text"type="text"class="none">
<divid="box"class="box">
<!--<inputtype=""name=""placeholder="">-->
</div>
<divclass="place"></div>
</body>
<scripttype="text/javascript">
//要传入的变量
//点击触发的对象
varclick=document.getElementById("title");
varclick2=document.getElementById("title2");
//放入的容器
varbox=document.getElementById("box");
//容器内占位的DIV
varplace=document.createElement("div");
place.className="place";
//往容器内添加的对象
varcreate=document.createElement("input");
create.type="text";
varcreate2=document.createElement("input");
create2.type="password";
//是否可以添加多个
varisMany=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
*/
functioncreateWin(oclick,ocreate,bisMany,oplace,obox=document.body)
{
//是否点击了触发对象
varisClick=false;
//触发对象是否为容器内的元素
varisIncludeBox=false;
oplace.style.width=obox.offsetWidth-5+"px";
oplace.style.height=oclick.offsetHeight-5+"px";
//移动效果的临时元素
varoclickClone;
varoclickDown;
//计算偏移量
vardiffObj;
vardiffX;
vardiffY;
vartmp;
varomove_position;
//点是否包含在容器内
functionisInclude(x,y,includeBox=obox)
{
if(x>includeBox.offsetLeft
&&y>includeBox.offsetTop
&&x<includeBox.offsetLeft+includeBox.offsetWidth
&&y<includeBox.offsetTop+includeBox.offsetHeight)
returntrue;
returnfalse;
}
//移动效果函数
functionmoveMagic(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";
}
functiongetdiff(e)
{
diffObj=e.target;
diffX=e.clientX-diffObj.offsetLeft;
diffY=e.clientY-diffObj.offsetTop;
}
//鼠标按下事件
functiondown(e)
{
if(isInclude(e.clientX,e.clientY,oclick))
{
isClick=true;
//克隆点击的触发节点
oclickClone=oclick.cloneNode(true);
//计算鼠标的偏移量（如果有margin的话会有偏移现象）
getdiff(e);
}
else
{
getdiff(e);
varchild=obox.childNodes;
for(vari=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;
}
}
}
}
//鼠标移动事件
functionmove(e)
{
if(isClick)
{
moveMagic(oclickClone,e);
//判断鼠标是否移动到了容器内部
if(isInclude(e.clientX,e.clientY,obox))
{
//计算容器内的子节点
varchild=obox.childNodes;
//一旦进入就可以在首位置插入占位DIV
obox.insertBefore(oplace,child[0]);
//根据鼠标位置放置占位DIV
for(vari=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);
}
}
}
}
}
//鼠标抬起事件
functionup(e)
{
isClick=false;
//鼠标抬起则可以删除临时的拖动效果元素
document.body.removeChild(oclickClone);
//如果将元素放置到了容器内
if(isInclude(e.clientX,e.clientY))
{
varchild=obox.childNodes;
//占位div的位置
varinsertPlace;
for(vari=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)
varocreateClone=oclickDown;
else
varocreateClone=ocreate.cloneNode(true);
if(insertPlace==child.length)
obox.appendChild(ocreateClone);
else
{
obox.insertBefore(ocreateClone,child[insertPlace]);
}
}
}
else
{
if(isIncludeBox)
{
varchild=obox.childNodes;
for(vari=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实现可拖拽表单的简单实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。