纯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");
//容器内占位的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实现拖拽效果
首先来了解一下,面向对象练习的基本规则和问题: 先写出普通的写法,然后改成面向对象写法项 普通方法变形 ·尽量不要出现函数嵌套函数 ·可以有全局变量 ·把onload函数中不是赋值的语句放到单独函数中 改成面向对象 ·全局变量就是属性 ·函数就是方法 ·onload中创建对象 ·改this指针问题 先把拖拽效果的布局完善好: HTML结构: <div id="box"></div> csc样式: #box{position: absolute;width: 20
-
js完美的div拖拽实例代码
复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="
-
使用js实现的简单拖拽效果
前端开发的时候,有好多地方用到拖拽效果,当然 http://jqueryui.com/draggable/ 是个不错的选择,but 我是个打破砂锅问到底的人,抽点时间用js小小的实现了类似的插件,话不多说. first: html和css 复制代码 代码如下: <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <ti
-
纯JS实现可拖拽表单的简单实例
因为要用到可拖拽表单,个人要比较喜欢自己动手,不怎么喜欢在不懂实现或者原理的情况下用插件,所以查找资料实现了一个. 思路:放入:用mousedown判断鼠标点击的位置是否在触发控件的位置,如果是,mousemove的时候clone一个控件,修改透明度,然后放入容器内的时候remove这个控件,并且在容器内生成一个放入的控件(放入的控件和触发的控件可以不一样) 拖拽:同样的, mousedown的时候判断是哪个控件,mousemove的时候需要放一个占位div放在原有的位置上,并将元素修改透明度然
-
纯javascript的ajax实现php异步提交表单的简单实例
很多时候需要异步提交表单,当表单太多是时候,一个个getElementById变得很不实际 当然,jquery可以实现异步提交表单,jquery.form.js这个库貌似也挺流行 只是有时候并不想使用额外的库,所以就琢磨着自己写,用纯js来实现异步提交表单 实现如下(本例用POST方式提交,用php作为服务器脚本) HTM L文件:test <html> <head> <script type="text/javascript" src="nam
-
JS两种类型的表单提交方法实例分析
本文实例分析了JS两种类型的表单提交方法.分享给大家供大家参考,具体如下: 1.原始的 <form method="post" action="/student/stureg/add" id="form1" onsubmit="return subForm();"> <button type="submit" class="button red" style="
-
Jquery.Form 异步提交表单的简单实例
http://www.vaikan.com/docs/jquery.form.plugin/jquery.form.plugin.html# 1. 在你的页面里写一个表单.一个普通的表单,不需要任何特殊的标记: 复制代码 代码如下: <form id="myForm" method="post" action="/Home/AjaxForm"><div>Name:<input id="username&qu
-
jquery实现表单验证简单实例演示
本文实例讲述了jquery实现表单验证代码.分享给大家供大家参考.具体如下: 运行效果截图如下: 具体代码如下: 直接上插件实现代码了,围绕代码进行讲解比较容易点: /* 描述:基于jquery的表单验证插件. */ (function ($) { $.fn.checkForm = function (options) { var root = this; //将当前应用对象存入root var isok = false; //控制表单提交的开关 var pwd1; //密码存储 var def
-
Dropzone.js实现文件拖拽上传功能(附源码下载)
dropzone.js是一个开源的JavaScript库,提供 AJAX 异步文件上传功能,支持拖拽文件.支持最大文件大小.支持设置文件类型.支持预览上传结果,不依赖jQuery库. 效果演示 源码下载 使用Dropzone 我们可以建立一个正式的上传form表单,并且给表单一个.dropzone的class. <form id="mydropzone" action="/upload.php" class="dropzone"&
-
jQuery完成表单验证的实例代码(纯代码)
废话不多说了,直接给大家贴代码了,具体代码如下所示: <!doctype html> <head> <meta charset=utf-8" /> <title>表单验证</title> <link href="css/style1.css" rel="external nofollow" rel="stylesheet" type="text/css"
-
js实现文件上传表单域美化特效
一款效果非常时尚的文件上传表单域美化特效,下面给出制作的简要教程. 先上几个效果饱饱眼福: 使用方法 这些文件上传域的美化使用的方法都是隐藏原生的<input type="file">元素,然后使用一个<label>元素来制作美化效果. HTML结构 该文件上传域美化效果最基本的HTML结构如下: <input type="file" name="file" id="file" class=&q
-
JS模拟并美化的表单控件完整实例
本文实例讲述了JS模拟并美化的表单控件效果实例.分享给大家供大家参考.具体如下: 这里演示使用JS美化并模拟网页表单控件,十分漂亮的表单效果,使用时可以将代码内的JS保存为文件, 方便调用,使用方法:WellForm(element) //element 为表单元素. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-like-table-control-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC &qu
-
JS+DIV+CSS实现仿表单下拉列表效果
本文实例讲述了JS+DIV+CSS实现仿表单下拉列表效果.分享给大家供大家参考.具体如下: JS+DIV+CSS实现仿表单下拉列表效果,是完全用CSS技术再配合JS实现的效果,用来代替传统的Select下拉框,虽然目前来说,此代码还有些粗糙,但对于美化列表的样式来说,可能以后会更方便,要比Select方便的多. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-div-css-fselect-codes/ 具体代码如下: <!DOCTYPE