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

  • 时间:
  • 浏览:2

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

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

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

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

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

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

Test
    
  
  
    
      
Dialog
Dialog
123
/**
* 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 

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