转载注明出处!!!转载注明出处!!!转载注明出处!!!因为要用到可拖拽表单,个人要比较喜欢自己动手,不怎么喜欢在不懂实现或者原理的情况下用插件,所以查找资料实现了一个。思路:放入:用mousedown判断鼠标点击的位置是否在触发控件的位置,如果是,mousemove的时候clon ...
转载注明出处!!!
转载注明出处!!!
转载注明出处!!!
因为要用到可拖拽表单,个人要比较喜欢自己动手,不怎么喜欢在不懂实现或者原理的情况下用插件,所以查找资料实现了一个。
思路:放入:用mousedown判断鼠标点击的位置是否在触发控件的位置,如果是,mousemove的时候clone一个控件,修改透明度,然后放入容器内的时候remove这个控件,并且在容器内生成一个放入的控件(放入的控件和触发的控件可以不一样)
拖拽:同样的, mousedown的时候判断是哪个控件,mousemove的时候需要放一个占位div放在原有的位置上,并将元素修改透明度然后设置为绝对定位方便拖动,在进行拖动的时候,占位div也会跟着鼠标位置进行改变(判断当前鼠标位置是否是容器内控件的左上角加上控件高度的一半),放下的时候进行判断占位div的位置进行插入。具体看代码吧,这个思路加上的时间距离代码实现的时间有点久远了,所有可能不是很准确,但是大概的思路就是这样了。
注释基本上都已经写的很详细了,直接上代码吧。
有什么问题请大神们多多指教
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
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。