你的位置:首页 > 软件开发 > Java > 纯JS实现可拖拽表单

纯JS实现可拖拽表单

发布时间:2016-09-01 17:00:04
转载注明出处!!!转载注明出处!!!转载注明出处!!!因为要用到可拖拽表单,个人要比较喜欢自己动手,不怎么喜欢在不懂实现或者原理的情况下用插件,所以查找资料实现了一个。思路:放入:用mousedown判断鼠标点击的位置是否在触发控件的位置,如果是,mousemove的时候clon ...

转载注明出处!!!

转载注明出处!!!

转载注明出处!!!

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

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

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

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

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

纯JS实现可拖拽表单纯JS实现可拖拽表单
 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       .dialog14       {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-title28       {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-content41       {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='/images/loading.gif' data-original="js/devWin.js"></script>62   </head>63   <body>64     <!-- <div id="dlgTest" > -->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     //容器内占位的DIV83     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>

原标题:纯JS实现可拖拽表单

关键词:JS

JS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。