纯JS实现可拖拽表单

转载注明出处！！！

因为要用到可拖拽表单，个人要比较喜欢自己动手，不怎么喜欢在不懂实现或者原理的情况下用插件，所以查找资料实现了一个。

思路：放入：用mousedown判断鼠标点击的位置是否在触发控件的位置，如果是，mousemove的时候clone一个控件，修改透明度，然后放入容器内的时候remove这个控件，并且在容器内生成一个放入的控件（放入的控件和触发的控件可以不一样）

拖拽：同样的， mousedown的时候判断是哪个控件，mousemove的时候需要放一个占位div放在原有的位置上，并将元素修改透明度然后设置为绝对定位方便拖动，在进行拖动的时候，占位div也会跟着鼠标位置进行改变（判断当前鼠标位置是否是容器内控件的左上角加上控件高度的一半），放下的时候进行判断占位div的位置进行插入。具体看代码吧，这个思路加上的时间距离代码实现的时间有点久远了，所有可能不是很准确，但是大概的思路就是这样了。

ps：要用到拖拽表单功能的，基本上可能都会要更改以往设计数据库方式，这里可以提供给你们一个搜索关键词表的纵向存储

注释基本上都已经写的很详细了，直接上代码吧。

有什么问题请大神们多多指教

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <title>Test</title>
 5         <style type="text/css" >
 6             html,body
 7             {
 8                 height:100%;
 9                 width:100%;
10                 padding:0;
11                 margin:0;
12             }
13             .dialog
14             {
15              /*   width:250px;
16                 height:250px;*/
17                 position:absolute;
18                 background-color:#ccc;
19                 -webkit-box-shadow:1px 1px 3px #292929;
20                 -moz-box-shadow:1px 1px 3px #292929;
21                 box-shadow:1px 1px 3px #292929;
22                 /*margin:10px;*/
23                 top:50px;
24                 left: 50px;
25                 opacity:1;
26             }
27             .dialog-title
28             {
29                 color:#fff;
30                 background-color:#404040;
31                 font-size:12pt;
32                 font-weight:bold;
33                 padding:4px 6px;
34                 cursor:move;
35                 position:absolute;
36                 top:50px;
37                 left: 50px;
38             }
39             
40             .dialog-content
41             {
42                 padding:4px;
43                 cursor:move;
44             }
45             .none{
46                 display: none;
47             }
48             .box{
49                 width: 200px;
50                 height: 500px;
51                 background-color: gray;
52                 line-height: 30px;
53                 margin: 100px;
54             }
55             .place{
56                 width: 200px;
57                 height: 50px;
58                 border: 1px dashed red;
59             }
60         </style>
61         <script type="text/javascript" src="js/devWin.js"></script>
62     </head>
63     <body>
64         <!-- <div >-->
65             <div id = "title" class="dialog-title">Dialog</div>
66             <div id = "title2" class="dialog-title" style ="top:10px">Dialog</div>
67         <!-- </div> -->
68         <a id = "a" href="#">123</a>
69         <input id = "text" type="text" class = "none">
70         <div id = "box" class = "box">
71        <!-- <input type="" name="" placeholder=""> -->
72         </div>
73         <div class = "place"></div>
74     </body>
75     <script type="text/javascript">
76         //要传入的变量
77         //点击触发的对象 
78         var click = document.getElementById("title");
79         var click2 = document.getElementById("title2");
80         //放入的容器
81         var box = document.getElementById("box");
82         //容器内占位的DIV
83         var place = document.createElement("div");
84         place.className = "place";
85         //往容器内添加的对象
86         var create = document.createElement("input");
87         create.type = "text";
88         var create2 = document.createElement("input");
89         create2.type = "password";
90         //是否可以添加多个
91         var isMany = true;
92         createWin(click,create,isMany,place,box);
93         createWin(click2,create2,isMany,place,box);
94     </script>
95 </html>

HTML代码