首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

纯JS实现可拖拽表单的简单实例

Posted in Javascript onSeptember 02, 2016

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

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

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

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

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

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

<!DOCTYPE html>
<html>
  <head>
    <title>Test</title>
    <style type="text/css" >
      html,body
      {
        height:100%;
        width:100%;
        padding:0;
        margin:0;
      }
      .dialog
      {
       /*  width:250px;
        height:250px;*/
        position:absolute;
        background-color:#ccc;
        -webkit-box-shadow:1px 1px 3px #292929;
        -moz-box-shadow:1px 1px 3px #292929;
        box-shadow:1px 1px 3px #292929;
        /*margin:10px;*/
        top:50px;
        left: 50px;
        opacity:1;
      }
      .dialog-title
      {
        color:#fff;
        background-color:#404040;
        font-size:12pt;
        font-weight:bold;
        padding:4px 6px;
        cursor:move;
        position:absolute;
        top:50px;
        left: 50px;
      }
      
      .dialog-content
      {
        padding:4px;
        cursor:move;
      }
      .none{
        display: none;
      }
      .box{
        width: 200px;
        height: 500px;
        background-color: gray;
        line-height: 30px;
        margin: 100px;
      }
      .place{
        width: 200px;
        height: 50px;
        border: 1px dashed red;
      }
    </style>
    <script type="text/javascript" src="js/devWin.js"></script>
  </head>
  <body>
    <!-- <div id="dlgTest" class="dialog"> -->
      <div id = "title" class="dialog-title">Dialog</div>
      <div id = "title2" class="dialog-title" style ="top:10px">Dialog</div>
    <!-- </div> -->
    <a id = "a" href="#">123</a>
    <input id = "text" type="text" class = "none">
    <div id = "box" class = "box">
    <!-- <input type="" name="" placeholder=""> -->
    </div>
    <div class = "place"></div>
  </body>
  <script type="text/javascript">
    //要传入的变量
    //点击触发的对象 
    var click = document.getElementById("title");
    var click2 = document.getElementById("title2");
    //放入的容器
    var box = document.getElementById("box");
    //容器内占位的DIV
    var place = document.createElement("div");
    place.className = "place";
    //往容器内添加的对象
    var create = document.createElement("input");
    create.type = "text";
    var create2 = document.createElement("input");
    create2.type = "password";
    //是否可以添加多个
    var isMany = true;
    createWin(click,create,isMany,place,box);
    createWin(click2,create2,isMany,place,box);
  </script>
</html>
/**
* author:lzh 
* 作用:可拖拽排序表单实现
* 参数:oclick   点击触发事件的对象
*   ocreate  出发后在表单中传入的对象
*   bisMany  单个oclick对象是否可拖入多个ocreate对象
*   oplace   拖入时占位div对象
*   obox    拖入的容器，不填则默认为body
*/
function createWin(oclick,ocreate,bisMany,oplace,obox=document.body)
{
  //是否点击了触发对象
  var isClick = false;
  //触发对象是否为容器内的元素
  var isIncludeBox = false;
  oplace.style.width = obox.offsetWidth-5 + "px";
  oplace.style.height = oclick.offsetHeight-5 + "px";
  //移动效果的临时元素
  var oclickClone;
  var oclickDown;
  //计算偏移量
  var diffObj;
  var diffX;
  var diffY;
  var tmp;
  var omove_position;
  //点是否包含在容器内
  function isInclude(x,y,includeBox=obox)
  {
    if(x > includeBox.offsetLeft 
    && y > includeBox.offsetTop 
    && x < includeBox.offsetLeft + includeBox.offsetWidth
    && y < includeBox.offsetTop + includeBox.offsetHeight)
      return true;
    return false;
  }
  //移动效果函数
  function moveMagic(omove,e)
  {
    // omove_position = window.getComputedStyle(omove).getPropertyValue('position');
    omove.style.opacity = 0.4;
    omove.style.position = "absolute";
    document.body.appendChild(omove);
    omove.style.left = e.clientX-diffX+"px";
    omove.style.top = e.clientY-diffY+"px";
  }
  function getdiff(e)
  {
    diffObj = e.target;
    diffX = e.clientX-diffObj.offsetLeft;
    diffY = e.clientY-diffObj.offsetTop;
  }
  //鼠标按下事件
  function down(e)
  {
    if(isInclude(e.clientX,e.clientY,oclick))
    {
      isClick = true;
      //克隆点击的触发节点
      oclickClone=oclick.cloneNode(true);
      //计算鼠标的偏移量（如果有margin的话会有偏移现象）
      getdiff(e);
    }
    else
    {
      getdiff(e);
      var child = obox.childNodes;
      for(var i=0; i < child.length; i++)
      {
        //判断鼠标点击是否是容器内的元素，并且不能是占位div（如果不加这个占位div判断会有bug，具体原因不知道）
        if(isInclude(e.clientX,e.clientY,child[i])&& child[i] != oplace)
        {
          isClick = true;
          isIncludeBox = true;
          //克隆元素用来拖动时的效果
          oclickClone = child[i].cloneNode(true);
          //克隆元素用来放下
          oclickDown = child[i].cloneNode(true);
          //按下之后删除元素，并使用移动效果来展示元素
          obox.removeChild(child[i]);
          moveMagic(oclickClone,e);
          //插入占位div来弄
          obox.insertBefore(oplace,child[i]);
          // flag = true;
          break;
        }
      }
    }
  }
  //鼠标移动事件
  function move(e)
  {
    if(isClick)
    {
      moveMagic(oclickClone,e);
      //判断鼠标是否移动到了容器内部
      if(isInclude(e.clientX,e.clientY,obox))
      {
        //计算容器内的子节点
        var child = obox.childNodes;
        //一旦进入就可以在首位置插入占位DIV
        obox.insertBefore(oplace,child[0]);
        //根据鼠标位置放置占位DIV
        for(var i = 0; i < child.length; i++)
        {
          //因为占位DIV是唯一的，所以只需要这样判断即可
          if(e.clientY > child[i].offsetTop+child[i].offsetHeight/2)
          {
            //判断是否拖动到了结尾
            if(i != child.length-1)
              obox.insertBefore(oplace,child[i+1]);
            else
              obox.appendChild(oplace);
          }
        }
      }
    }
  }
  //鼠标抬起事件
  function up(e)
  {
    isClick = false;
    //鼠标抬起则可以删除临时的拖动效果元素
    document.body.removeChild(oclickClone);
    //如果将元素放置到了容器内
    if(isInclude(e.clientX,e.clientY))
    {
      var child = obox.childNodes;
      //占位div的位置
      var insertPlace;
      for(var i=0; i<child.length;i++)
      {
        //确定占位div的位置
        if(oplace === child[i])
        {
          obox.removeChild(child[i]);
          insertPlace = i;
          break;
        }
      }
      //判断是否可以放置多个
      if(!bisMany)
      {
        if(isIncludeBox)
          ocreate = oclickDown;
        if(insertPlace==child.length)
          obox.appendChild(ocreate);
        else
          obox.insertBefore(ocreate,child[insertPlace]);
      }
      else
      {
          //可以放置多个则需要每个都克隆一下
        if(isIncludeBox)
          var ocreateClone = oclickDown;
        else
          var ocreateClone = ocreate.cloneNode(true);
        if(insertPlace==child.length)
          obox.appendChild(ocreateClone);
        else
        {
          obox.insertBefore(ocreateClone,child[insertPlace]);
        }
      }
    }
    else
    {
      if(isIncludeBox)
      {
        var child = obox.childNodes;
        for(var i=0; i<child.length; i++)
        {
          if(child[i] === oplace)
          {
            obox.removeChild(child[i]);
            obox.insertBefore(oclickDown,child[i]);
          }1
        }
      }
    }
    isIncludeBox = false;
  }
  document.addEventListener('mousemove',move);
  document.addEventListener('mousedown',down);
  document.addEventListener('mouseup',up);
}

以上这篇纯JS实现可拖拽表单的简单实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持三水点靠木。

纯JS实现可拖拽表单的简单实例

- Author -

jingxian

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
IE Firefox 使用自定义标签的区别
Oct 15 Javascript
Js基础学习资料
Nov 23 Javascript
JavaScript中的细节分析
Jun 30 Javascript
用JQuery 判断某个属性是否存在hasAttr的解决方法
Apr 26 Javascript
基于Jquery实现仿百度百科右侧导航代码附源码下载
Nov 27 Javascript
JavaScript数组的一些奇葩行为
Jan 25 Javascript
js实现导航栏中英文切换效果
Jan 16 Javascript
JS使用setInterval实现的简单计时器功能示例
Apr 19 Javascript
layui富文本编辑器前端无法取值的解决方法
Sep 18 Javascript
vue+element-ui JYAdmin后台管理系统模板解析
Jul 28 Javascript
js实现tab栏切换效果
Aug 02 Javascript
html5中sharedWorker实现多页面通信的示例代码
May 07 Javascript
vue.js入门教程之绑定class和style样式
Sep 02 #Javascript
js绘制购物车抛物线动画
Nov 18 #Javascript
基于jQuery实现发送短信验证码后的倒计时功能(无视页面关闭)
Sep 02 #Javascript
基于JS实现发送短信验证码后的倒计时功能(无视页面刷新，页面关闭不进行倒计时功能)
Sep 02 #Javascript
node.js中module.exports与exports用法上的区别
Sep 02 #Javascript
AngularJs Scope详解及示例代码
Sep 01 #Javascript
AngularJs Modules详解及示例代码
Sep 01 #Javascript
类加载器(1) json_extract(1) 弹窗(1) netty(1) Launch Mode(1) 缓冲区(1) form表单(1) JOIN(1) NoSQL(1) 变量提升(1)
You might like
PHP数组交集的优化代码分析
2011/03/06 PHP
PHP几个实用自定义函数小结
2016/01/25 PHP
Zend Framework教程之请求对象的封装Zend_Controller_Request实例详解
2016/03/07 PHP
ThinkPHP 3.2.3实现页面静态化功能的方法详解
2017/08/03 PHP
浅谈PHP中pack、unpack的详细用法
2018/03/12 PHP
javascript 语法基础 想学习js的朋友可以看看
2009/12/16 Javascript
JS动态创建Table,Tr,Td并赋值的具体实现
2013/07/05 Javascript
使用JS实现jQuery的addClass, removeClass, hasClass函数功能
2014/10/31 Javascript
Java Mybatis框架入门基础教程
2015/09/21 Javascript
使用jquery动态加载Js文件和Css文件
2015/10/24 Javascript
Javascript生成全局唯一标识符（GUID,UUID）的方法
2016/02/27 Javascript
基于bootstrap-datetimepicker.js不支持IE8的快速解决方法
2016/11/07 Javascript
Angularjs处理页面闪烁的解决方法
2017/03/09 Javascript
vue2中的keep-alive使用总结及注意事项
2017/12/21 Javascript
微信小程序开发实现消息推送
2020/11/18 Javascript
JS中数据结构与算法---排序算法(Sort Algorithm)实例详解
2019/06/17 Javascript
JS常见面试试题总结【去重、遍历、闭包、继承等】
2019/08/27 Javascript
VUE 单页面使用 echart 窗口变化时的用法
2020/07/30 Javascript
使用FastCGI部署Python的Django应用的教程
2015/07/22 Python
Python过滤列表用法实例分析
2016/04/29 Python
Java Web开发过程中登陆模块的验证码的实现方式总结
2016/05/25 Python
让Django支持Sql Server作后端数据库的方法
2018/05/29 Python
基于python实现matlab filter函数过程详解
2020/06/08 Python
浅谈tensorflow使用张量时的一些注意点tf.concat,tf.reshape,tf.stack
2020/06/23 Python
有关pycharm登录github时有的时候会报错connection reset的问题
2020/09/15 Python
Python调用JavaScript代码的方法
2020/10/27 Python
python 如何设置守护进程
2020/10/29 Python
css3学习系列之移动属性详解
2017/07/04 HTML / CSS
香港彩色隐形眼镜在线商店：Stunninglens（全球免费送货）
2019/05/10 全球购物
迪卡侬(Decathlon)加拿大官网：源自法国的运动专业超市
2020/11/22 全球购物
运输企业安全生产责任书
2014/07/28 职场文书
2014年党员自我评议（5篇）
2014/09/12 职场文书
老公保证书
2015/01/17 职场文书
2015年学校心理健康教育工作总结
2015/05/11 职场文书
Python 解决空列表.append() 输出为None的问题
2021/05/23 Python
pandas取dataframe特定行列的实现方法
2021/05/24 Python