你的位置:首页 > Java教程

[Java教程]纯JS实现可拖拽表单


转载注明出处!!!

转载注明出处!!!

转载注明出处!!!

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

思路:放入:用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="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>

HTML代码
 1 /** 2 * author:lzh  3 * 作用:可拖拽排序表单实现 4 * 参数:oclick   点击触发事件的对象 5 *   ocreate  出发后在表单中传入的对象 6 *   bisMany  单个oclick对象是否可拖入多个ocreate对象 7 *   oplace   拖入时占位div对象 8 *   obox    拖入的容器,不填则默认为body 9 */ 10 function createWin(oclick,ocreate,bisMany,oplace,obox=document.body) 11 { 12   //是否点击了触发对象 13   var isClick = false; 14   //触发对象是否为容器内的元素 15   var isIncludeBox = false; 16   oplace.style.width = obox.offsetWidth-5 + "px"; 17   oplace.style.height = oclick.offsetHeight-5 + "px"; 18   //移动效果的临时元素 19   var oclickClone; 20   var oclickDown; 21   //计算偏移量 22   var diffObj; 23   var diffX; 24   var diffY; 25   var tmp; 26   var omove_position; 27   //点是否包含在容器内 28   function isInclude(x,y,includeBox=obox) 29   { 30     if(x > includeBox.offsetLeft  31     && y > includeBox.offsetTop  32     && x < includeBox.offsetLeft + includeBox.offsetWidth 33     && y < includeBox.offsetTop + includeBox.offsetHeight) 34       return true; 35     return false; 36   } 37   //移动效果函数 38   function moveMagic(omove,e) 39   { 40     // omove_position = window.getComputedStyle(omove).getPropertyValue('position'); 41     omove.style.opacity = 0.4; 42     omove.style.position = "absolute"; 43     document.body.appendChild(omove); 44     omove.style.left = e.clientX-diffX+"px"; 45     omove.style.top = e.clientY-diffY+"px"; 46   } 47   function getdiff(e) 48   { 49     diffObj = e.target; 50     diffX = e.clientX-diffObj.offsetLeft; 51     diffY = e.clientY-diffObj.offsetTop; 52   } 53   //鼠标按下事件 54   function down(e) 55   { 56     if(isInclude(e.clientX,e.clientY,oclick)) 57     { 58       isClick = true; 59       //克隆点击的触发节点 60       oclickClone=oclick.cloneNode(true); 61       //计算鼠标的偏移量(如果有margin的话会有偏移现象) 62       getdiff(e); 63     } 64     else 65     { 66       getdiff(e); 67       var child = obox.childNodes; 68       for(var i=0; i < child.length; i++) 69       { 70         //判断鼠标点击是否是容器内的元素,并且不能是占位div(如果不加这个占位div判断会有bug,具体原因不知道) 71         if(isInclude(e.clientX,e.clientY,child[i])&& child[i] != oplace) 72         { 73           isClick = true; 74           isIncludeBox = true; 75           //克隆元素用来拖动时的效果 76           oclickClone = child[i].cloneNode(true); 77           //克隆元素用来放下 78           oclickDown = child[i].cloneNode(true); 79           //按下之后删除元素,并使用移动效果来展示元素 80           obox.removeChild(child[i]); 81           moveMagic(oclickClone,e); 82           //插入占位div来弄 83           obox.insertBefore(oplace,child[i]); 84           // flag = true; 85           break; 86         } 87       } 88     } 89   } 90   //鼠标移动事件 91   function move(e) 92   { 93     if(isClick) 94     { 95       moveMagic(oclickClone,e); 96       //判断鼠标是否移动到了容器内部 97       if(isInclude(e.clientX,e.clientY,obox)) 98       { 99         //计算容器内的子节点100         var child = obox.childNodes;101         //一旦进入就可以在首位置插入占位DIV102         obox.insertBefore(oplace,child[0]);103         //根据鼠标位置放置占位DIV104         for(var i = 0; i < child.length; i++)105         {106           //因为占位DIV是唯一的,所以只需要这样判断即可107           if(e.clientY > child[i].offsetTop+child[i].offsetHeight/2)108           {109             //判断是否拖动到了结尾110             if(i != child.length-1)111               obox.insertBefore(oplace,child[i+1]);112             else113               obox.appendChild(oplace);114           }115         }116       }117     }118   }119   //鼠标抬起事件120   function up(e)121   {122     isClick = false;123     //鼠标抬起则可以删除临时的拖动效果元素124     document.body.removeChild(oclickClone);125     //如果将元素放置到了容器内126     if(isInclude(e.clientX,e.clientY))127     {128       var child = obox.childNodes;129       //占位div的位置130       var insertPlace;131       for(var i=0; i<child.length;i++)132       {133         //确定占位div的位置134         if(oplace === child[i])135         {136           obox.removeChild(child[i]);137           insertPlace = i;138           break;139         }140       }141       //判断是否可以放置多个142       if(!bisMany)143       {144         if(isIncludeBox)145           ocreate = oclickDown;146         if(insertPlace==child.length)147           obox.appendChild(ocreate);148         else149           obox.insertBefore(ocreate,child[insertPlace]);150       }151       else152       {153           //可以放置多个则需要每个都克隆一下154         if(isIncludeBox)155           var ocreateClone = oclickDown;156         else157           var ocreateClone = ocreate.cloneNode(true);158         if(insertPlace==child.length)159           obox.appendChild(ocreateClone);160         else161         {162           obox.insertBefore(ocreateClone,child[insertPlace]);163         }164       }165     }166     else167     {168       if(isIncludeBox)169       {170         var child = obox.childNodes;171         for(var i=0; i<child.length; i++)172         {173           if(child[i] === oplace)174           {175             obox.removeChild(child[i]);176             obox.insertBefore(oclickDown,child[i]);177           }1178         }179       }180     }181     isIncludeBox = false;182   }183   document.addEventListener('mousemove',move);184   document.addEventListener('mousedown',down);185   document.addEventListener('mouseup',up);186 }

JavaScript代码