zoukankan      html  css  js  c++  java
  • 纯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              /*   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 id="dlgTest" class="dialog"> -->
    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代码
      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                 //一旦进入就可以在首位置插入占位DIV
    102                 obox.insertBefore(oplace,child[0]);
    103                 //根据鼠标位置放置占位DIV
    104                 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                         else
    113                             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                 else
    149                     obox.insertBefore(ocreate,child[insertPlace]);
    150             }
    151             else
    152             {
    153                     //可以放置多个则需要每个都克隆一下
    154                 if(isIncludeBox)
    155                     var ocreateClone = oclickDown;
    156                 else
    157                     var ocreateClone = ocreate.cloneNode(true);
    158                 if(insertPlace==child.length)
    159                     obox.appendChild(ocreateClone);
    160                 else
    161                 {
    162                     obox.insertBefore(ocreateClone,child[insertPlace]);
    163                 }
    164             }
    165         }
    166         else
    167         {
    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                     }1
    178                 }
    179             }
    180         }
    181         isIncludeBox = false;
    182     }
    183     document.addEventListener('mousemove',move);
    184     document.addEventListener('mousedown',down);
    185     document.addEventListener('mouseup',up);
    186 }
    JavaScript代码
  • 相关阅读:
    【BZOJ 4581】【Usaco2016 Open】Field Reduction
    【BZOJ 4582】【Usaco2016 Open】Diamond Collector
    【BZOJ 4580】【Usaco2016 Open】248
    【BZOJ 3754】Tree之最小方差树
    【51Nod 1501】【算法马拉松 19D】石头剪刀布威力加强版
    【51Nod 1622】【算法马拉松 19C】集合对
    【51Nod 1616】【算法马拉松 19B】最小集合
    【51Nod 1674】【算法马拉松 19A】区间的价值 V2
    【BZOJ 2541】【Vijos 1366】【CTSC 2000】冰原探险
    【BZOJ 1065】【Vijos 1826】【NOI 2008】奥运物流
  • 原文地址:https://www.cnblogs.com/baqiphp/p/5830324.html
Copyright © 2011-2022 走看看